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

Position	Movie	Year of Release
1	Citizen Kane	1941
2	The Godfather	1972
3	Casablanca	1942
4	Raging Bull	1980
5	Singin’ In The Rain	1952

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.

Position	Movie	Year of Release
1	Citizen Kane	1941
2	The Godfather	1972
3	Casablanca	1942
4	Raging Bull	1980
5	Singin’ In The Rain	1952

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, shown at the top of this article.

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

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/lhzcs