
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;
}Similar Posts
Want more web design and development tips?
Subscribe to The Web Squeeze by Email, or our RSS feed, and you'll have all the latest web design tips coming right to your inbox! Don't be a stranger, join our forum!









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.
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.