demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

CSS Design Patterns For HTML5 Tables

css / tables

Estimated reading time: 1 minute, 35 seconds

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:

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

CSS for a Grid Table

Make an HTML table look like an actual table.

American Film Institute’s Top 100 Films
PositionMovieYear of Release
1Citizen Kane1941
2The Godfather1972
3Casablanca1942
4Raging Bull1980
5Singin’ In The Rain1952
table { border-collapse: collapse;
font-family: Futura, Arial, sans-serif; }
caption { font-size: larger; margin: 1em auto; } 
th, td { padding: .65em; }
th, thead { background: #000; color: #fff; border: 1px solid #000; }
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.

PositionMovieYear of Release
1Citizen Kane1941
2The Godfather1972
3Casablanca1942
4Raging Bull1980
5Singin’ In The Rain1952
table { border-collapse: collapse; font-family: Futura, Arial, sans-serif; border: 1px solid #777; }
caption { font-size: larger; margin: 1em auto; }
th, td { padding: .65em; }
th, thead { background: #000; color: #fff; border: 1px solid #000; }
tr:nth-child(odd) { background: #ccc; }
tr:hover { background: #aaa; } 
td { border-right: 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.

PositionMovieYear of Release
1Citizen Kane1941
2The Godfather1972
3Casablanca1942
4Raging Bull1980
5Singin’ In The Rain1952
table { border-collapse: collapse; border-spacing: 0; font-family: Futura, Arial, sans-serif; }
caption { font-size: larger; margin: 1em auto; }
th, td { padding: .75em; }
th { background: linear-gradient(#ccc,##777); color: #fff; }
th:first-child { border-radius: 9px 0 0 0; }
th:last-child { border-radius: 0 9px 0 0; }
tr:last-child td:first-child { border-radius: 0 0 0 9px; }
tr:last-child td:last-child { border-radius: 0 0 9px 0; }
tr:nth-child(odd) { background: #ccc; }
Play with this code on CodePen.
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.