Tables 101

A table is a grid containing columns and rows. These columns and rows contain cells, which, in turn, can hold any kind of content you want to put inside them. Sure, you can use a table to list game scores, but a table can also provide you with a structure on which to organize your page. Tables help break up your page into separate regions. Any region can contain elements like text, pictures, and so on. A table used for page layout can be very simple. For example, it might consist of only two cells, a short narrow one on top containing a page banner, and a large one below for general page content.

Figure 5-1 illustrates the basic parts of a table.

Figure 5-1. This simple table shows the components you'll be managing when you use FrontPage's table tool. A table is made up of cells that form columns and rows. Cell padding is the space between a cell wall and its contents. Cell spacing is the thickness of the cell wall.

You need to know your table partsthings like table borders, cell spacing, and cell paddingbecause you'll manipulate each part to fine-tune the layout you want. FrontPage gives you two ways to control a table's appearance: you can format attributes of the entire table or you can manipulate the look and feel of individual cells. Many times, you'll want to do both.

HTML tables aren't like other tables you've encountered in Microsoft Word and similar programs. Once again, the browser is in charge of what your viewer sees and is quite capable of making your table look very different from what you envisioned. Even as you work with a table in Design view, you'll get a taste of this volatility. For instance, if you insert a large picture into a small cell, the cell expands to display the picture, enlarging the dimensions of the rows and columns that it sits in. And as you type in a table cell, the table may change its dimensions with each letter you add. These things happen because a table cell expands to display its contents. While this fluidity can be disconcerting at first, once you understand how HTML tables behave, you'll become a pro at managing them.

BEHIND THE SCENES
Tables in HTML

As you learn about tables, you'll appreciate how much time and hair-pulling agony FrontPage can save you from. Below is the HTML code for the table illustrated in Figure 5-1.

    <table border="1" width="100%"
    cellspacing="14" cellpadding="20">
        <tr>

            <td>&nbsp;</td>
            <td>Text</td>
            <td>&nbsp;</td>

        </tr>
        <tr>

            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>

        </tr>
    </table>

What's happening here? Table tags contain row tags, which contain cell tags. The <tr> tags represent a table row. Notice how each set of <tr> tags contains multiple <td> tags ("td" is short for table data). Each set of <td> tags is a table cell. (Right now, all but one of these cells contain only a non-breaking space.)

This is actually a very simple table. Imagine the code for one that's more complex. Not only do manual coders have to type out all these mind-bendingly minute instructions, they have to keep track of what the table actually looks like and in which row they're working. Even professionals who love to work directly in HTML often turn to products like FrontPage to save them a lot of time and tedium.

[Previous] [Content Page] [Next]