In 2005 I wrote an article about styling a table with CSS. After receiving so many requests I finally decided to give in and write another tutorial. Seems like a popular topic and an interesting one to share some tricks on how you can nicely style them. This article is about the proper usage of tables, for tabular data. How you can implement them with accessibility in mind and how to make them appealing for the eye using CSS.
If you’ve ever read my first article, you might remember that I suggested you to read Roger’s article ‘Bring on the tables’. I can’t explain it any more profound than how he does. However, I’ll give you a short overview of what to keep in mind when you are coding a table with accessibility in mind. Here’s my short list:
- Make sure to use the th elements for the headers in combination with the scope attribute
- Add a caption to your table, especially when there is more then 1 table on the same page
- Use the summary attribure in the table element to describe the content of the table
- Divide your table into sections by grouping table rows using the thead, tfoot and tbody element if needed