Tables

Tables are a fantastic layout device. Using tables, almost any problem you've been having with layout can be solved.

Tables use three major tags:

<table>

This tag simply tells the browser that what follows should be rendered as a table.

<tr>

"Table Row" - defines successive rows in a table.

<td>

"Table Data" - defines each cell in the row.

The following code:
    <table border="1">
       <tr>
           <td>Row 1, Col 1</td>
           <td>Row 1, Col 2</td>
       </tr>
       <tr>
           <td>Row 2, Col 1</td>
           <td>Row 2, Col 2</td>
       </tr>
   </table>
produces the following output:

The <table> tag can take the following attributes:

width= [pixels | percent]

Sets the width of the entire table in either pixels or a percentage of available space

border= [pixels]

Sets the width in pixels of the border

cellpadding= [pixels]

Sets the distance in pixels between a cell border and the data within that cell. Think of it as setting a margin for the cells

cellspacing= [pixels]

Sets the distance in pixels between the cells.

The <tr> tag can take the following attributes:

align=[ left | center | right | justify ]

horizontal alignment of cells in group

valign=[ top | middle | bottom | baseline ]

vertical alignment of cells in group

The <td> tag commonly takes the following attributes:

rowspan= [Number]

rows spanned by the cell

colspan= [Number]

columns spanned by the cell

align=[ left | center | right | justify ]

horizontal alignment within the cell

valign=[ top | middle | bottom | baselineJ]

Vertical alignment within the cell