CSS Design Patterns For HTML5 Tables

Once you have your table marked up correctly, it’s time to style it. This article is the first in a series featuring CSS design patterns that you can apply to your own tables, or read to learn from. All of the resulting tables show share the same basic markup:

1. <table>
2. <caption>American Film Institute’s Top Five Films</caption>
3. <col><col><col>
4. <thead>
5. <tr><th>Position <th>Movie <th>Year of Release
6. </thead>
7. <tbody>
8. <tr><td>1 <td>Citizen Kane <td>1941
9. <tr><td>2 <td>The Godfather <td>1972
10. <tr><td>3 <td>Casablanca <td>1942
11. <tr><td>4 <td>Raging Bull <td>1980
12. <tr><td>5 <td>Singin’ In The Rain <td>1952
13. </tbody>
14. </table>

CSS for a Grid Table

Make an HTML table look like an actual table.

1. table { border-collapse: collapse;
2. font-family: Futura, Arial, sans-serif; }
3. caption { font-size: larger; margin: 1em auto; }
4. th, td { padding: .65em; }
5. th, thead { background: #000; color: #fff; border: 1px solid #000; }
6. td { border: 1px solid #777; }

Zebra Striped Table

Vertical division between columns, single line between rows, alternate colors on table rows, and highlight rows on mouse hover.

1. table { border-collapse: collapse;
2. font-family: Futura, Arial, sans-serif; }
3. caption { font-size: larger; margin: 1em auto; }
4. th, td { padding: .65em; }
5. th, thead { background: #000; color: #fff; border: 1px solid #000; }
6. tr:nth-child(odd) { background: #ccc; }
7. tr:hover { background: #aaa; }
8. td { border-right: 1px solid #777; }
9. table { border: 1px solid #777; }

Rounded Corner Table

Linear gradient in table head, rounded corners on table. Gradient will need vendor prefixes to work in older browsers.

1. table {
2. border-collapse: collapse;
3. border-spacing: 0;
4. font-family: Futura, Arial, sans-serif;
5. }
6. caption { font-size: larger; margin: 1em auto; }
7. th, td { padding: .75em; }
8. th {
9. background: linear-gradient(#ccc,##777);
10. color: #fff;
11. }
12. th:first-child { border-radius: 9px 0 0 0; }
13. th:last-child { border-radius: 0 9px 0 0; }
14. tr:last-child td:first-child { border-radius: 0 0 0 9px; }
15. tr:last-child td:last-child { border-radius: 0 0 9px 0; }
16. tr:nth-child(odd) { background: #ccc; }