tabulated text

Tables were originally included in HTML so that designers could produce tabulated text. This is not a layout issue as such. The two-dimensional array of information occurs in a great many offline texts, as we've already noted. But you might be wondering whether, particularly with complex arrays like the one below, whether the <pre> tag will save you a lot of hassle, not to mention coding time and download. Consider this, particularly if all 24 clubs in the division were included - would have become very tedious to render with a table:

NATIONWIDE LEAGUE DIVISION 2 - 2001-2 season, top six

                    P    W    D    L    F    A    Pts   GD

1. BRIGHTON (C)     46   25   15    6   66   42   90    +24
2. Reading  (P)     46   23   15    8   70   43   84    +27
3. Brentford        46   24   11   11   77   43   83    +34
4. Cardiff          46   23   14    9   75   50   83    +25
5. Stoke (P)        46   23   11   12   67   40   80    +27
6. Huddersfield     46   21   15   10   65   47   78    +18

It's a fair point and this is probably the one reasonable use of <pre>. In the first place, though, you might want better presentation than this: in that case, you need tables. Also remember that HTML's heart lies with defining what text is rather than what it looks like or where it goes on the screen. To anything which wants or needs information about what different "bits" of text actually are, that league table is just a mass of characters which maybe has more spaces in it than usual. It only works as a table because it has visual impact. If you're browsing the web with something which can't handle the visual tabulation, you need information like that to be included in a table.

One reason this topic gets a separate page is that there are some tags, attributes and style properties which do not come into play unless the table is included on a page to reproduce tabulated text, rather than just being used to lay out images, text and white space. These are:

<caption>. This does pretty much what it says: marks up text as being a caption for the table. (This and the other new tags discussed here are demonstrated by the example below.) <caption> usually gets placed between the <table> and the first <tr> tag, and it can be styled like any other text formatting tag for font family, size, colour and so on. One style sheet property unique to <caption> is caption-side which takes the values top, right, bottom or left and this tells the browser where, in relation to the table, to actually put the caption. The default is top. This property is not yet supported by all browsers: if it works in yours the example table below should have its caption underneath the table.

<th>. This stands for table heading. Basically, it fulfils the same role in layout terms as <td>. You would use one of these tags in place of a <td>; they do not work together as such. The browser default is usually to style <th> tags bolder than <td>, but you can use styles to do what you want with them, of course. You might wonder why it's necessary to use another tag here but as ever the answer comes in maintaining the textual structure of your page. Non-visual browsers will know that what's in the <th> is specifically a column or row heading, not just another old table cell.

summary. This is one of those accessibility techniques which it is difficult to persuade people to use. One disadvantage of tables is that some web browsers do not render them. Non-visual browsers and text-only browsers will linearise the table. In other words they ignore all these table tags and simply render things in the order they appear in the code. Examples follow on the two pages linked in this paragraph, and at this stage it might seem as if this is an unnecessary complication. But it's worth remembering summary for when we talk about this more in lecture 6. summary appears as an attribute in the <table> tag and takes a value which is a short description of the table. To be truly correct XHMTL 1.0 every table should have a summary: in practice this is only meaningful for tabulated text. Tables that are used purely for layout can have an empty value here (i.e., summary="").

As a demonstration of some of the things mentioned here and of table styling generally, have a look at this table. The code and related style information follows below. Note that the style information shows only what I've changed here to render the table: other tags like <p> are still styled in the main sheet for this site.

<table summary="Exam results 2002" style="width: 60%">
    <caption>Exam results 2002</caption>
    <tr>
        <th>&nbsp;</th>
        <th>Advanced Hypermathematics</th>
        <Th>Quantum Everything</th>
        <TH><P><B>Basic Social Skills</th>
    </tr>
    <tr>
        <th>Tom</th>
        <td class="marks"><p>77%</p></td>
        <td class="marks"><p>81%</p></td>
        <td class="marks"><p>33%</p></td>
    </tr>
    <tr>
        <th>Dick</th>
        <td class="marks"><p>83%</p></td>
        <td class="marks"><p>66%</p></td>
        <td class="marks"><p>18%</p></td>
    </tr>
    <tr>
        <th>Harriet</th>
        <td class="marks"><p>74%</p></td>
        <td class="marks"><p>72%</p></td>
        <td class="marks"><p>41%</p></td>
    </tr>
</table>

th { width: 10%;
     border-style: solid;
     border-color: #003300;
     border-width: 1px;
     font-family: Garamond, Times, serif;
     color: #003300;
     font-weight: bold;  }

td.marks { width: 30%;
           text-align: center; }

caption { font-family: Garamond, Times, serif;
          font-style: italic;
          font-weight: bold;
          caption-side: bottom;
          text-align: center;
          padding: 10px; }

Note the use of the non-breaking space special character (&nbsp;) which pads out the top left cell and ensures that it appears. Completely empty cells are not always rendered.

Back to the top

Back to the menu for lesson 4