Tables
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 Web site, 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 |
|
|