Introduction To HTML

The use of the many table-related tags in HTML can be a complex activity. It is often difficult to see how your table will be rendered. Before creating any HTML table you should always sketch the table on paper.

There are a number of tags associated with tables; the following are almost always required.

<table> </table> These tags mark the start and end of the table code. All of the HTML required to produce the structure of the table should be within these tags.
<tr> </tr> Table row tag. The HTML which defines each row (horizontal) of the table should be between these two tags.
<td> </td> Table data tag. The HTML which defines the content of each cell must be placed between these two tags.

Copy the following HTML into a web page to view the table.

<table align="center" width="50%" border="1">
<td width="30%" align="left"><b>Column 1</b></td>
<td width="70%" align="right"><b>Column 2</b></td>
<td width="30%" height="100" align="center" valign="middle">Row 2</td>
<td width="70%" height="100" align="center" valign="top" bgcolor="green">Row 2</td>

Play around with some of the attributes to see the effect that it has.

Using Tables To Help With Layout

Tables can be used without borders to help with the layout of your page. The following effect can be created using a table with 3 columns and 1 row. The value for border must be set to zero in the <table> tag.

It used to be common to find entire web page layouts made with tables. Things can get quite complex and small mistakes can be amplified in such a layout. There are better ways to achieve the same effects and most pages use those now.