Accessible Tables
🏠 | « | »
Advanced Tables ...
Tables - CSS Usability
1. Single line borders
table {
border: single thick black;
border-collapse: collapse;
}
2. Alignment Matters
- Column Headers are usually aligned with their data
- Numerical data is right-aligned (year, date, time, numbers that are usually added up)
- Textual data or counting or identification numbers are left-aligned (first column text for numerical rows)
- 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 −
−42 −
−42 −
6. Display table headers on each page when printing
Example. (Thanks to Evagoras Charalambous)
thead {display: table-header-group; }
tbody {display: table-row-group; }