CSS Table Tutorial

Here’s the css and html for this tutorial!

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

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

<body>

<table border=&quot;0&quot;>
<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;
}

The Web Squeeze is sponsored by:

About The Author

Jack Franklin

Jack is a 18 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.

Comments

Ian

August 31st, 2009 at 10:05 am.

Reply

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

November 17th, 2009 at 5:58 am.

Reply

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.

Trackbacks

Toggle Trackbacks

Como alternar linhas de uma tabela com CSS | Erika Sarti | portfolio web designer linked here

[... Here's the css and html for this tutorial! [html]< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> CSS Tables >> A Screencast by Jack Franklin Name Age Shoe Size Bob 15 11 Jack 10 9 Bobette 17 3 Jim 12 6 Jacob 97 4 Karinne 12 5 Linda 20 8 Simon 11 12 [/html] [css]table { border-collapse: collapse; ...]
Twitter Trackbacks for CSS Table Tutorial [thewebsqueeze.com] on Topsy.com linked here

[... Here's the css and html for this tutorial! [html]< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> CSS Tables >> A Screencast by Jack Franklin Name Age Shoe Size Bob 15 11 Jack 10 9 Bobette 17 3 Jim 12 6 Jacob 97 4 Karinne 12 5 Linda 20 8 Simon 11 12 [/html] [css]table { border-collapse: collapse; ...]
Learn it! Screencasts » Blog Archive » Screencast for TheWebSqueeze.com linked here

[... Here's the css and html for this tutorial! [html]< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> CSS Tables >> A Screencast by Jack Franklin Name Age Shoe Size Bob 15 11 Jack 10 9 Bobette 17 3 Jim 12 6 Jacob 97 4 Karinne 12 5 Linda 20 8 Simon 11 12 [/html] [css]table { border-collapse: collapse; ...]
CSS Table Tutorial | HKNetLife - Blogging for Life linked here

[... Here's the css and html for this tutorial! [html]< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> CSS Tables >> A Screencast by Jack Franklin Name Age Shoe Size Bob 15 11 Jack 10 9 Bobette 17 3 Jim 12 6 Jacob 97 4 Karinne 12 5 Linda 20 8 Simon 11 12 [/html] [css]table { border-collapse: collapse; ...]