CSS Table Tutorial

You are here: Home » Tutorials » CSS Table Tutorial

CSS Table Tutorial

Learn how to make professional tables with only CSS. You’ll learn how to alternate table row colors as well as how to create a table row hover.

By Jack Franklin on August 24th, 2009 in Tutorials |

Here’s the css and html for this tutorial!

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title> CSS Tables >> A Screencast by Jack Franklin</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>

<table border="0">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Shoe Size</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob</td>
<td>15</td>
<td>11</td>
</tr>
<tr>
<td>Jack</td>
<td>10</td>
<td>9</td>
</tr>
<tr>
<td>Bobette</td>
<td>17</td>
<td>3</td>
</tr>
<tr>
<td>Jim</td>
<td>12</td>
<td>6</td>
</tr>
<tr>
<td>Jacob</td>
<td>97</td>
<td>4</td>
</tr>
<tr>
<td>Karinne</td>
<td>12</td>
<td>5</td>
</tr>
<tr>
<td>Linda</td>
<td>20</td>
<td>8</td>
</tr>
<tr>
<td>Simon</td>
<td>11</td>
<td>12</td>
</tr>
</tbody></table>
</body>
</html>

table {
    border-collapse: collapse;
    width: 500px;
    font-family: 'Trebuchet MS';
}

tbody tr:nth-child(odd) {
    background-color: grey;
}

tbody tr:hover {
    background-color: #E3E3E3;
}

tr {
    height: 50px;
}

td, th {
    text-align: center;
    border: 3px solid #ccc;
}

thead tr {
    background-color: #111;
    color: white;
}

Did you like it?

Help us spread the word!

About The Author

Jack Franklin

Jack is a 17 year old web designer and developer who lives in the beautiful area of Cornwall, England. Off the computer, Jack enjoys playing snooker, tennis, football and badminton. He is currently attending college and doing A-Levels in Maths, Further Maths, English and Computing.

Comments

Ian said :
August 31st, 2009 at 10:05 am
Great screencast but I thought CSS tables meant not using HTML at all for the table.
I hope you’ll do more on CSS, especially covering positioning.
Phil said :
November 17th, 2009 at 5:58 am
Thanks a lot. Im working on a project on wich i can and will use this.
@Ian:
Tables for layout = wrong
Tables for tabled content = good
As long as you keep the markup in a ceperate file imo.