Adding Table Data

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.
 

Using tables for page layout......page 3

 

Proxima Design Copyright © 2000, 2001 Proxima Design Proxima Design
Back Home Links e-Mail