Tables are probably the most versatile element of HTML code. Tables are commonly used to precisely place text and graphics on web pages. Tables are also widely used to size the width of web pages. And of course, tables are excellent for their first intended use: the presentation of tabular data.

Creating complex tables with straight HTML code can be a little intimidating. If you have a complex table you are going to publish on your website, you might want to try first creating it in a word processor or a spreadsheet application, and then save the file as HTML from there. Microsoft Excel does a very good job of converting a spreadsheet to HTML code.

Tables are constructed using three elements in a specific, nested order:

  • <table> defines the start of the table.
  • <tr> defines the start of the first row.
  • <td> defines table data, the contents of a column

Note: In HTML, a row is defined as the horizontal element of the table, while a column is defined as the vertical element of the table.

Table options can be set on the entire table, on a row-by-row basis, or on a column-by-column basis.

Here is the sample code for a table. In this example, we’ll even nest a table within a table. The possibilities are endless!

CODE EXAMPLE:

<table WIDTH="240" bORDER="3" cellpadding="3" align="CENTER"
valign="TOP" bGCOLOR="Silver" bORDERCOLOR="Red">
<tr>
<td>be creative with tables in your layouts.</td>
<td>Another good use of tables is to place your entire Web page
inside a table approximately 580 pixels wide. This will make your
page viewable even to those folks still using the older, smallest
display devices, which use a screen resolution of 640 x 480 pixels.</td>
</tr>
<tr>
<td>Remember, you can use images inside tables, too.</td>
<td>
<table border="5" cellpadding="10" cellspacing="20"
valign="bottom" bgcolor="Yellow" bordercolor="navy">
<tr>
<td><b>These cells are</b></td>
<td><b>part of another table</b></td>
<td><b>inside the original table</b></td>
</tr>
<tr>
<td><b>These cells are</b></td>
<td><b>part of another table</b></td>
<td><b>inside the original table</b></td>
</tr>
</table>
</td>
</tr>
</table>

RESULT:

be creative with tables in your layouts. Another good use of tables is to place your entire web page inside a table approximately 580 pixels wide. This will make you page viewable even to those folks still using the older, smallest display devices, which use a screen resolution of 640 x 480 pixels.
Remember, you can use images inside tables, too.
These cells are part of another table inside the original table
These cells are part of another table inside the original table