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;
}