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:

Row 1, Col 1 Row 1, Col 2
Row 2, Col 1 Row 2, Col 2

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

[ Back | Home | Next ]