Advanced Tables ...

Tables - CSS Usability

0. The Complete Guide to the Table Element (CSS-TRICKS)

1. Single line borders

table {
border: single thick black;
border-collapse: collapse;
}

 

2. Alignment Matters

  1. Column Headers are usually aligned with their data
  2. Numerical data is right-aligned (year, date, time, numbers that are usually added up)
  3. Textual data or counting or identification numbers are left-aligned (first column text for numerical rows)
  4. Don’t use center alignment. (note: default rendering for all browsers <th>)
Made Sold
Teddy Bears 50,000 300,000
Board Games 1,000 900

Game Type Made Sold
Teddy Bears 50,000 300,000
Board Games 1,000 900

3. Zebra Strip table (mind the contrast)-border added for contrast

tbody tr:nth-child(odd){
background: #eee;
border-top: 1px solid #333;
border-bottom: 3px solid black;}

4. Space for reading ... (just a bit between text and border)

td {padding-left: .2em; }
td {padding: 0.1em 0.2em 0.1em 0.2em;} (top right bottom left)

Made Sold
Teddy Bears 50,000 300,000
Board Games 1,000 900

Made Sold
Teddy Bears 50,000 300,000
Board Games 1,000 900

5. Use Minus Sign NOT Hyphen for negative numbers (MAC fix)

Font support for minus sign

Unicode: Minus Sign U+2212

-42 (hyphen)

−42 &minus;

−42 &#8722;

−42 &#x2212;

6. Display table headers on each page when printing

Example. (Thanks to Evagoras Charalambous)

thead {display: table-header-group; }  

tbody {display: table-row-group; }

7. 10 CSS Table Examples

8. Responsive Tables - Demo Responsive Table (see also Accessible Simple Responsive Tables)

9. Highlight Cell Relationships Visually (low vision)

10. Table Generator