What is a table without content. All the content of a table goes into cells.
Cells are created with the <TD> element. But before defining cells,
you will need to define rows in that you want the cells to be put in.
If you don't define rows, each cell will be its own row. Rows are created with
the <TR> element. The <TR> element does not need an end tag. It is
up to you whether you want to put an end tag or not. The <TR> element has
the following attributes:
align This attribute has the these values:
right, left, center, justify, char.
valign This attribute has the these values:
top, middle, bottom, baseline.
char This attribute indicates the character used for
character alignment. The default value is decimal point.
Table rows contain cells. Cells can be either cell data or cell headers.
The difference between them is that the browser displays cell headers
in bold.
The <TD> element
All data in a table is inserted with this element. The end tag is optional,
but if you use it for page layout, it is recommended to put an end tag
to avoid blank space between cells. The <TD> element and the <TH> element share the
same attributes:
width This is the width of a cell in pixels.
height This is the height of a cell in pixels.
align This attribute is used to align the content of a cell.
It has the following values: right, left, center, justify, char.
valign Same as align but with these values:
top, middle, bottom, baseline.
bgcolor To change the color of the cell, you can use this attribute.
(bgcolor="0000FF" makes the cell blue)
colspan Indicates the number of columns this cell spans.
The default value is 1.
rowspan Indicates the number of rows this cell spans.
The default value is 1.
This all may look complicated, but will go through all of this by showing you some examples:
<table align="center" width=200 cellpadding="2" cellspacing="3" border="2">
<caption>Example</caption>
<tr>
<th colspan="3">This is a very long header</th>
</tr>
<tr>
<td>This is one normal cell</td>
<td>One more cell</td>
<td rowspan="2">You can do wonders in HTML</td>
</tr>
<tr>
<td bgcolor="0000FF">Let's make it blue</td>
<td bgcolor="yellow">Or yellow</td>
</tr>
</table>
Example
This is a very long header |
This is one normal cell |
One more cell |
You can do wonders in HTML |
Let's make it blue |
Or yellow |
If you want see some more examples
then check the "Using tables for page layout" section.