You may think that tables are just used for columns of figures. In HTML this could not be further from the truth. Although this may have been how the table markup was originally conceived, in practice it provides the most useful way of positioning items on a web page, and of adding graphic elements to emphasise their relationship.
Like a list, a table contains a number of items within an overall container. However with a table there are two levels of structure. The table contains one or more rows and each row contains one or more data items. So the HTML required for a simple table with two rows each of two colums, would look like:
<TABLE border=1> <TR> <TD>Row 1, Column 1</TD> <TD>Row 1, Column 2</TD> </TR> <TR> <TD>Row 2, Column 1</TD> <TD>Row 2, Column 2</TD> </TR> </TABLE>Which would result in a table looking like;
|Row 1,Column 1||Row 1, Column 2|
|Row 2, Column 1||Row 2, Column 1|
An alternative to the <TD> (Table Data) tag is the <TH> (Table Heading) tag. The only difference is that the contents of this cell are by default centered in the cell and emboldened, whereas the Table Data cell contents are by default left aligned and in a normal typeface.
The power of the table lies chiefly in the plethora of attributes that may be applied to the various tags. Here, we will just describe the most useful ones. If you want to know all the possibilities, you should consult a more detailed reference work. One word of warning, there are a some attributes and additional table tags, that only work with certain makes of browser. We won't include any of these here.
<TABLE width=100%>This ensures that the complete table occupies the full width of your browser window.
Browsers are good at working out the best cell widths for themselves, so it is usually unnecessary to specify the widths of individual cells. All the cells in a column have the same width, so the overall width of a column will be set by the space needed for the largest item in the column. If the required space is not available without exceeding the table width, data will be wrapped within the cells to fit.
The align attribute can take the values, left, center and right, whilst the valign attribute can take the values bottom, middle and top.
In the absence of an align attribute the contents of a <TD> cell will be left aligned, and of a <TH> cell will be centered. In the absence of a valign attribute, the contents of all cells will be in the middle of the cell.
Note that it is not possible to apply these cell alignment attributes to all the cells in a table, by applying them to the <TABLE> tag. This tag can take an align attribute, but its affect is to align the whole table horizontally within the browser window. There is a snag with this however. Just as with the <IMG> tag, not all browsers respect its align attribute. It is therefore better, if you want to center your table, to put the whole table within a set of <CENTER> and </CENTER> tags.
In a similar vein, there is a <TBODY> tag which allows default alignment and colour attributes to be set for all the cells in a table. Unfortunately it too is not supported in some of the common browsers, so is best avoided.
Occasionally you may want one of your cells in a table to be empty. If you have nothing between your <TD> and </TD> tags or just leave a space between them, then instead of the empty cell you wanted, the table's bgcolor will spread right across the cell. The way around this is to place between the tags. This is the "non-breaking space" character entity which we introduced on the "Add Some Variety" page. The example table below uses this technique to create the empty yellow cell.
If the table properties described so far are not sufficient to enable you to achieve that perfect layout, you can always make life a little more complicated by placing tables within tables! Any <TD> item may itself be a complete table (or a list, or an image) so it is possible to achieve just about any conceivable layout with a little thought. If you do attempt this, it is a good idea to ensure that you indent your source text carefully to make sure that you end inner tables before outer ones etc.
The only way to get familier with table mark up is to practice, so have a play with some tables on your web pages and see which ones you like. Also have a look at the source code for some of the pages on this tutorial section and my main Shotover web site, and see how I have used tables. Even a simple single cell table can be useful. This is the way I achieve the nice 3-D border effect for the headings on the main web site.
To finish off, here is an example of a really crazy table, including some of the mark up that has been described here. It is followed by a listing of its markup. See if you can work out what is happening.
|A Wacky Table|
|Row 1,Column 1||Row 1, Column 2|
|Row 2, Column 1||
Here is the HTML for this table:-
<CENTER> <TABLE border="10" bgcolor="99cccc" cellspacing="10" cellpadding="20"> <TR> <TH colspan="2">A Wacky Table</TH> </TR> <TR bgcolor="669999"> <TD>Row 1,Column 1</TD> <TD bgcolor="996699">Row 1, Column 2</TD> </TR> <TR bgcolor="pink"> <TD>Row 2, Column 1</TD> <TD align="center"> <TABLE border="1" bgcolor="red" cellpadding="5"> <TR> <TD bgcolor="cyan">A</TD> <TD bgcolor="yellow"> </TD> </TR> <TR> <TD bgcolor="#00ff00">B</TD> <TD bgcolor="white">C</TD> </TR> </TABLE> </TD> </TR> </TABLE> </CENTER>
|Copyright © Alan Simpson 2000-2007||Back to index.||Forward to next page.||Last Updated 2007-10-30|