How to create a table: CssTutorial

1. Structure the table element. In order to emulate the structure of the iTunes
playlist, set the table’s width to a percentage value. This means the table will
stretch with the browser window. As explained earlier, you should also use the
summary attribute to succinctly detail what the table’s all about.
<table width="90%" border="1" cellspacing="0"
å summary="Music selected by Craig Grannell, with details of song,
å playing time, artist, album and play count.">
</table>

2. Add a caption. Immediately after the table start tag, add a caption element to provide
the table with a title.

<caption>A playlist of great music</caption>
3. Add the basic table structure. Use row groups to provide the table with its basic
structure.
<thead>
</thead>
<tfoot>
</tfoot>
<tbody>
</tbody>

4. Using table header cell elements, add the content for the table head (the column
headers) as in the following code block, remembering to include relevant scope
attribute/value pairs:
<thead>
<tr>
<th scope="col">Song Name</th>
<th scope="col">Time</th>
<th scope="col">Artist</th>
<th scope="col">Album</th>
<th scope="col">Play Count</th>
</tr>
</thead>
There’s no need to add any styling—not even strong tags. By default, most
browsers display table header cell content in bold (and centered) to differentiate it
from table data; also, in the following section, you’ll be using CSS to style everything,
anyway.

5. Add table foot content. As mentioned, the footer for this table is to essentially be
a signature, stating who’s at fault for this selection of music. Because this is a single
line of text that could potentially span the entire table width, simply include a
single table cell, set to span five rows (using the colspan attribute).
<tfoot>
<tr><td colspan="5">Music selection by:
å www.snubcommunications.com</td></tr>
</tfoot>

6. Add table body content. Finally, add the table’s body content via the usual method,
using table row and table cell elements. This table will have nearly 20 rows, so to
save on trees, only the first two rows are detailed in the following printed code
block—you can add all the others in the same way, or just copy across the content
of building-the-table-body.txt from the download files, to save inputting the
data yourself.
<tbody>
<tr>
<td>In The Art Of Stopping</td>
<td>3:34</td>
<td>Wire</td>
<td>Send</td>
<td>3</td>
</tr>
<tr>
<td>Electron John</td>
<td>3:18</td>
<td>Worm Is Green</td>
<td>Push Play</td>
<td>42</td>
</tr>
</tbody>