Flair: Tables

  1. Images
  2. Flair
  3. Lists

Another thing that might be useful for readers is a couple of tables of information about the DVD and the movie. Let’s add a list of DVD features. (This table, and the other tables we’ll create, are in the “tables” folder of the resources folder.) Add this below the movie quote at the top of the page, and above the “There are places in this world” paragraph.

<div id="features">

<h3>Special features</h3>

<table>

<tr><th>Commentary Track</th><td>5</td></tr>

<tr><th>Deleted Scenes</th><td>4</td></tr>

<tr><th>Documentary</th><td>7</td></tr>

<tr><th>Locations</th><td>6</td></tr>

<tr><th>Related Movies</th><td>8</td></tr>

<tr><th>Written Interviews</th><td>6</td></tr>

</table>

</div>

image 14

This is the most complex tag we’ve seen (and are likely to see). Like the definition list tags, the table tag contains a series of other tags. Tables contain rows, and rows contains cells. The <tr> tag marks table rows. The <th> tag marks table headers, and the <td> tag marks table data. You can have as many data cells in a row as you need. You’ll probably want only one header cell, however. Here, we have the header cells all in the left column; another common format is for all of the header cells to be in the top row.

Let’s try another, simpler table. After the “There are places” paragraph but before the div with id “review”, add:

<table id="movie">

<tr><th>Director</th><td>Herk Harvey</td></tr>

<tr><th>Writer</th><td>John Clifford</td></tr>

</table>

image 15

You should be careful with tables. They’re so simple to create, you can easily make a web page that can’t be read by anyone but you. Remember that there are lots of different web browsers out there, some of them that don’t even use computer screens. Simpler is almost always better!

  1. Images
  2. Flair
  3. Lists