Put your cards on the table
Make tables great again
"Liberty Leading the People", Eugène Delacroix
Theories
- "Do not use tables for layout. It’s bad practice"
- "Designers do not use tables in templates"
- "Tables are difficult to adapt for mobiles"
"Do not use tables for layout. It’s a bad practice"
.
.
.
Summary
| BRO |
NOT BRO |
|
|
"Designers do not use tables in templates"
.
.
.
When I should use tables?
Table layout can be used to represent tabular relationships between data.
Tabular data
- The data can be presented as rows and columns.
- Each row has the same columns as the other rows, in the same order.
- A given column has the same type, but different columns can have different types.
- The rows are usually in some particular order.
"Tables are difficult to adapt for mobiles"
.
.
.
Tips
Do not use display: none
thead {
position: absolute;
top: -9999px;
left: -9999px;
}
"What about accessibility?"
.
.
.
VO key
Tab for navigation throw interactive elements.
VO key + ← ↑ ↓ → for navigation throw simple text and tables on the page.
VO key by default equal to Ctrl + Option.
Add role
<table>
<thead role="rowgroup">
<tr role="row">
<th role="columnheader">First name</th>
...
</thead>
</table>
Attribute role 🦸♂️
<table> — table<thead> / <tbody> / <tfoot> — rowgroup<tr> — row<td> — cell- headers at the top —
columnheader to each
- headers on the side —
rowheader to each
Only necessary data
Talk with business / designer and find out is all this info so important for mobile users?
Hide unnecessary columns, but remember about aria-hidden="true"
"Why must I use table tag with all this tr-td stuff instead simple divs?"
.
.
.
"Why we should use all this semantic tags on sites instead of so comfortable divs?"
react-rainbow-components = 💞
Infinite loop
while (true) {
console.log("Developers avoid tables");
console.log("Working groups don't pay enough attention");
console.log("The standard staying in stagnation");
}
