HTML Tutorial


Lesson 8
Why and How of Tables

If you want to put information into columns on a web page, you will need to use a table. You can create a simple table with the following code:
<table>
<tr>
<td>
Column 1
</td>
<td>
Column 2
</td>
</tr>
</table>

This would give us:
Column 1 Column 2

<table> begins the table.
<tr> begins a row the table.
<td> begins a division in the table row.
</td> closes a division in the table row.
</tr> closes a row the table.
</table> closes the table.

We can center the table on the page, adjust the width of the table and add a border and a heading:
<center>
<table width=400 border=1>
<tr>
<td colspan=2 align=center>
Header
</td>
</tr>
<tr>
<td>
Column 1
</td>
<td>
Column 2
</td>
</tr>
</table>
</center>

This would give us:

Header
Column 1 Column 2

width=400 sets the width of the table.
border=1 creates a border for the table (border=0 removes the border).
colspan=2 causes the first division on the first row to span two columns.

You can do many things with tables, including getting much better control of your page lay out. Your tables do not need to be this simple. Study the source code of more complex tables (e.g., the one at http://www.acousticmusic.net/radio/) to learn how to construct the table you need.

LESSON 7 | HOME PAGE | LESSON 9

© Geo. McCalip 2001