Get the latest tech news

Styling Tables the Modern CSS Way


makes styling HTML tables in a considered, responsive nature a breeze. Michelle Barker breaks it all down for you in this deep dive.

To ensure our content can be easily interpreted by assistive technologies, we can include the scope attribute with a value of row or column, to infer which axis the heading belongs to. Without any custom CSS at all, we can see a clear relationship between the row and column headings and their corresponding data, giving users a good minimum viable experience. I generally incline towards knocking back cell borders to a lighter colour compared to the header and footer, to avoid the table feeling overcrowded.

Get the Android app

Or read this on Hacker News

Read more on:

Photo of styling

styling

Photo of modern css way

modern css way