Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Design    Internet

Creating a basic table

To create a table, you use tags for the table, each row in the table and the columns in a row:

Use the <table> tag to define the start and end of the table.

<table>
</table>

Add a row in the table with the <tr> tag.

<table>
<tr></tr>
</table>

Add columns in the table with the <td> tag. This example has two columns.

<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>

You can the put pictures or text in the cells. Here is the two column table with information in the cells

<table>
<tr>
<td>Apples</td><td>Celery</td>
</tr>
<tr>
<td>Oranges</td><td>Carrots</td>
</tr>
</table>

In a <td> tag, you can use most of the tags that you use in the body of the page, including tags for section headings, lists, and even other tables. This allows you to control where text and pictures appear when the browser displays your page, but can also make the management of your page more complex.

If you want, you can also add a <th> tag for the table header. This tag is like the <td> tag in that it creates a cell and can contain text and pictures, but it automatically makes text bold and centred to distinguish it from text in other cells.

When the browser displays a table, it collects all the cells, adjusts their sizes so they fit together and creates a row. It then collects the rows together and creates the table. The size of one cell or row may affect other cells and rows in the table so the browser may have to go back and adjust other rows so that the table looks right. This means that he browser makes two passes: one to size the cells and rows and the second to build the final table.

HTML lets you do a lot more with tables: you can set the height and width of a table, add borders, include background pictures, align the table and the the text or pictures that appear in the table cells, add a caption, add header or footers to a table, and group rows or columns together.