Tables

¡@

Note that tags used in one cell do not carry over to other cells. Tags from outside the table do not apply within the table.

Tag Attribute Function
<table>...</table> Creates a table that can contain any number of rows(<tr> tags)
border="..." table borders in pixels
cellspacing="..." amount of space between cells in the table
cellpadding="..." amount of space in pixels between the edges of the cell and its content
width="..." width of table in pixels or as a percentage of page width
height="..." height of table in pixels
bgcolor="..." Background color of all cells in the table that do not contain their own background or bgcolor attribute
background="..." Background image to tile within all cells in the table that do not contain their own background or bgcolor attribute (IE3 or later only)
<tr>...</tr> Defines a table row that can contain any number of cells(<td> tags)
align="..." The horizontal alignment of the contents of the cells within this row. Possible values are left, right, and center
valign="..." The vertical alignment of the contents of the cells within this row. Possible values are top, middle, bottom, and baseline
bgcolor="..." Background color of all cells in the row that do not contain their own background or bgcolor attribute
background="..." Background image to tile within all cells in the row that do not contain their own background or bgcolor attributes (IE3 or later only)
<td>...</td> Defines a table data cell(<td> tags)
align="..." The horizontal alignment of the contents of the cell. Possible values are keft, right, and center
valign="..." The vertical alignment of the contents of the cell. Possible values are top, middle, and bottom
bgcolor="..." Background color of the cell
background="..." Background image to tile within the cell.
rowspan="..." The number of rows this cell will span.
colspan="..." The number of columns this cell will span.
width="..." width of this column of cells, in pixels or as a percentage of page width
<th>...</th> Defines a table heading cell.(Takes all the same attributes as <td>)

Return to top.

Table within a table cell

This is a 2 column table with text in one column and the subtable in the other column. The vertical alignment of the text in this table data cell is top.
Tag Attribute
Tag Attribute
Tag Attribute

Return to top.

Advanced Layout with Tables

Start with a table with 4 columns wide and 3 rows high.

This is the 1st table cell in the 1st row. It is made to span 3 rows and becomes a column on the left This is the 2nd table cell in the 1st row. It is made to span 3 columns. The 3rd and the 4th table cells in the 1st row are then deleted.
The 1st table cell in the 2nd row is deleted. This is the 2nd table cell in the 2nd row. This is the 3rd table cell in the 2nd row. This is the 4th table cell in the 2nd row. It is made to span 2 rows and becomes a column on the lower right corner.
There is only one table data cell in the 3rd row. It is made to span 2 columns. You can take this as the 2nd table data cell in the 3rd row. The 1st, 3rd and 4th cells are all deleted.

Return to top.

Another Layout with Tables

This is a simple one row 2 column table with text in the 1st table data cell. Another simple one-celled subtable in nested in the 2nd table data cell. The vertical alignment of the text in this table data cell is top.
This is a one celled table nested in a 2 column table. By controlling the width of this table data cell, you can create a side bar of text to the left of your web page.

Return to top.

Here is Another Layout with Tables

This is a one cell table

The text is confined to the middle
400 pixels of the screen.
Extra wide margin is provided.

¦^¨ìXHTML and XML¯Á¤Þºô­¶

Hosted by www.Geocities.ws

1