HTML - Tables

Tables are useful for presenting tabular information on web pages but more importantly perhaps, they are used for laying out and controlling the appearance of pages. You can view this page to get more information on tables and layouts.

Once you have created a table you will need to add rows and then table cells. 

The table tag is <table> and needs to be closed at the end of the table </table>
To add a table row the tag is <tr> </tr>
To add table data/a cell the tag is <td> </td>

To create a basic table with two rows and three columns (table cells), the code is as follows:

<table width="750" border="1" cellspacing="0" cellpadding="0">

<tr>
<td>this is row one, col one</td>
<td>this is row one, col two</td>
<td>this is row one, col three</td>
</tr>

<tr>
<td>this is row two, col one</td>
<td>this is row two, col two</td>
<td>this is row two, col three</td>
</tr>

</table>

The finished table
 

Notes:

• The word column is not used in HTML, rather table data or table cell.
• It is important to specify cellpadding and spacing unless you want to accept the default of 1 pixel.
• The width should be specified either in pixels to fix the width in the browser or as a percentage of the browser window. For examples of the difference see the BBC's site which is fixed, or Amazon which is set as a percentage
• Then you should specify the widths of each <td> as well to control the widths of the columns.
• To position your table on the page, use the align attribute.
• Look at the basic tags for HTML tables for further info.

 TIP  Even if you don't want a border on your finished table, include it at the design stage as it makes working with the table easier.

site map | index | email me | top