Using HTML Tables on IVTOM
Let’s learn about the HTML table element. Don’t worry about how your table will look. IVTOM’s stylesheet specifies how tables look with style codes (that’s what the id=”blues-table” refers to). You only have to get the structure right.
Here is part of the table for Broadway Audition Songs for Female Singers.
<table id="blues-table" summary="Broadway Audition Songs for Female Singers -- Up Tempo">
<caption>Broadway Audition Songs for Female Singers -- Up Tempo</caption>
<thead>
<tr>
<th scope="col">Song Title</th>
<th scope="col">Artist/Album/Show</th>
<th scope="col">Notes</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">Compiled for IVTOM</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Wouldn't It Be Loverly</td>
<td>My Fair Lady</td>
<td></td>
</tr>
...
</tbody></table>
Table id and summary: the id refers to the stylesheet; the summary, which is read by browsers and screen readers, is a description of the table.
Caption: <caption>...</caption> the caption is the text that appears above the table.
Table Header: <thead>...</thead> The header contains the header cells or <th> wrapped in a table row or <tr>.
Table Footer: <tfoot>...</tfoot> The footer spans the last row in the table. So if you have two headers, the <td> in the <tfoot> will span two columns — “colspan="2". Change the number to match the number of headers the table has.
Did you notice that the <tfoot> comes after the table header and before the table data? The browser renders the footer more quickly when it is at the top of the HTML table. However, if the table footer is actually a footnote, it’s better to put it after the table body.
Table Body: <tbody>...</tbody> The body contains all the table rows & columns.
Table Row: <tr>…</tr> Each table row contains the table data — <td> — cells. You need as many <td> as you have table headers — <th>. In the example above, there are three <th>, and the three <td> correlate to them. Song title, Artist/Album/Show, and Notes. In this example, there are no notes, so the <td> is empty.
Table Data: <td>...</td> This starts and ends a table data cell. (must appear within table rows)
Adding a New Data Cell to an Existing Table
Let’s say you want to add a new song to the Repertoire list of songs. It’s easier if you use the text (HTML) editor, not the visual editor. Go to the end of the post. Copy the last <tr>...</tr> and paste it after the last </tr> — just before the </tbody>. Now highlight the text inside each <td> and type the new song, new artist, new show, and new notes for each table data cell. Save and View.
If you want to insert a new table row elsewhere in the table, place the cursor on a new line after the code that ends that row — </tr> — and then copy and paste the TR code and edit the new data cells.
To create an entirely new table, select all the code above and paste it into a new post in the editor. Then add as many rows as you need, filling in the data cells as you go.
That’s it! These instructions will help us maintain nice-looking tables that print well.
Be sure not to leave space around HTML elements. <td>NAME OF SONG</td> is correct. <td>NAME OF SONG </td> is incorrect. Some browsers will forgive the space after the word ‘song’ , others not so much.
Back to Help start page
