CSS Table Tutorial

by The Web Squeeze on August 24, 2009 in Tutorials with 2 Comments

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;
}
Tagged: ,

2 Comments on "CSS Table Tutorial"

  1. Ian says:
    August 31, 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.

    Reply
  2. Phil says:
    November 17, 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.

    Reply

Got something to say? Go for it!

←
→