Answers Search Help
Boston University home page
HTML: Intermediate
 
 
    Site Management
 
 
    Linking
 
 
 
 
 
 
    HTML Lists
 
 
 
 
    Tables
 
 
 
 
 
 
    Special Characters
 
 
    Supplementary
 
 
 
    Also See
   
   
   

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
WebCentral Using Publishing Learning Training Consulting WebCentral
Answers Search Help
NIS  |  OIT  |  Boston University  |   January 9, 2007