ACOM: Web Design Tutorial Site

Table tags and structure

The other tags we have investigated up to this point are pretty straightforward. You decide what formatting you want to apply to a piece of text and surround it in start and end tags - or you want to insert an object on the page so you just bung in an <IMG> or other similar tag. Tables are a little more complicated. You are therefore advised to read this section very carefully and be sure you understand exactly how tables work before moving on.

The complication comes about because tables are not formed from just one tag, but from at least three different tags which all work in conjunction to create the table. They are further complicated by some tags which are not compulsory, but which have certain effects if used - we will look at these after having dealt with the three compulsory table tags, which are:

<TABLE>     <TR>    <TD>

Each of these tags can take a broad range of attributes, but let's not worry about them until later. For now just concentrate on how they work to define the table layout. The easiest way to explain this is to show you by example, so have a look at the table on the left below, which has been defined by the HTML on the right (any attributes used have been removed at this stage for clarity):

<TABLE>
    <TR>
        <TD>Top left</TD>
        <TD>Top right</TD>
    </TR>
    <TR>
        <TD>Bottom left</TD>
        <TD>Bottom right</TD>
    </TR>
</TABLE>

First of all note how the whole table is bounded by the start and end <TABLE> tags. Then we set about dividing the table up. Think about how we read text from a book (in English, anyway); we start at the top left, read from left to right, and do not move onto the next line until we have reached the far right of the current line. It is the same with tables - we define one line or row of the table at a time. So this is the next level of division, using <TR> or table row tags. Look closely at the example. Notice how the second level of structure, the <TR> tags, separate the rows from one another rather than the columns.

Once we have separated the rows in this way the last task is to separate each "cell" of the row from each other. This is done with the <TD> tags (short for "table data"). The actual contents of any given part of the table always appear between start and end <TD> tags. And anything can appear in a table cell - text, images, links, even other tables.

Here's another abstract example. This is a three-row, three-column table: except that the central row has had two of its columns merged. This is done with an attribute called COLSPAN - I showcase it here to suggest that tables don't always have to be regular grids. But they do always have to be split into rectangular blocks. You can't have circular or irregular table cells. I've also left a cell empty, to suggest that you can use tables for nothing more than spacing things out - but do note that completely empty cells might not appear at all. Always have something between <TD> and </TD> tags, even if it's just a nonbreaking space (&nbsp;) character, as here. Anyway, have a look at this table and the code which follows it, and note once again how it is a matter of dividing horizontally first, into rows: then vertically, into cells. I've added a border to make things even clearer.

<TABLE BORDER>
    <TR>
        <TD>Top left</TD>
        <TD>Top middle</TD>
        <TD>Top right</TD>
    </TR>
    <TR>
        <TD COLSPAN=2>The two merged cells</TD>
        <TD>Centre right</TD>
    </TR>
    <TR>
        <TD>&nbsp;</TD>
        <TD>Bottom middle</TD>
        <TD>Bottom right</TD>
    </TR>
</TABLE>

"Real world" examples of tables follow on the other pages within this topic. I used abstract examples here to try and help you concentrate on the actual table structure. When looking at the examples, whether here or on the sample site, if you're having problems fathoming how the table works try and make sure you block out all extraneous detail - that is, the actual table contents - as, in the end, this is irrelevant to how the table is actually arranged using the three tag types. That's the important thing with tables.

Actually, the really important thing with tables is to close and nest your tags properly!. It's very easy to forget to close a </TD> tag, for instance, or to miss off a / from a closing tag, or forget the closing </TABLE> tag altogether. If your table contents appear in unexpected places, or if the table vanishes completely, check the tag integrity first. 99% of the time, this is where the problem lies. Internet Explorer in some ways compounds the problem by being a little more lenient on missing tags - this is a good example of why you should always check your page's appearance in at least the two major browsers (and preferably others, if you have access). A table which lacks a </TABLE> tag may render OK in IE, but won't appear at all in Netscape! Too many pages are released onto the Web without checking this, and end up with part or all of the page being invisible! I'll say it again - if at any point your table is disappearing, or being rendered out of order, check all the tags are correctly nested and properly closed.

There are a couple of other tags you can use in tables, incidentally:

• <CAPTION>: place this at the top or bottom of the table to give it a caption. The tables on the page about simple tabulated text have captions.
• <TH>: this stands for "table heading". They can be used as alternatives to <TD> tags, and browsers will normally render the text within them in bold.

Captions and table headings have advantages with non-visual browsers as they are structural as well as stylistic tags. These browsers will therefore "know" that the caption is a caption, on top of it being just some more text, and can highlight it to the user as such. This is just another one of those occasions where it's better to use the right tag for the job even if, when looking at the results in an "ordinary" browser, you can't actually see much difference. (Do note as well the existence of the SUMMARY table attribute as well.)

Back to the top

Back to the menu for lesson 4