Using Tables

Previous page...

		Tables are one of the best ways of using HTML to give the information on your web page a clear layout. They also enable you to position images, text and links almost anywhere on the page.


		This section looks at how to make traditional tables to present information and insert text and images, and introduces tables as a layout tool for designing whole web pages.


		This text is in an invisible table with a coloured background. By the end of this section you will be able to produce layouts like this and better.

Tables can be used to set out information in a clear way as you would use tables in a word processing document, or a spreadsheet. When making a table, you describe the whole table and then describe the rows and the number of columns in each of those rows.

These are described with the following tags:
the <TABLE>.....</TABLE> tag which describes the whole table
the table row tag <TR>.....</TR> which describes the table row,
and the table data tag <TD>.....</TD> which describes each individual cell in the row.

You will also use the attribute BORDER="1" in the TABLE tag in order to make the table borders one pixel wide, so that you can see the table layout.

To make a table that lists creatures and their relative sizes, you might do it like this:

<TABLE BORDER="1">
<TR>
<TD>Elephant</TD>
<TD>Big</TD>
</TR>

<TR>
<TD>Ant</TD>
<TD>Small</TD>
</TR>
</TABLE>

This results in the following table with two rows and two columns and a border of one pixel:

Elephant Big

Ant Small

Tables Part 1 Part 2 Part 3 Part 4 Part 5