<TD> Table Cell Elements

The commands that can go inside <TD> are:

ALIGN - Controls whether the data inside a cell is aligned on the LEFT, RIGHT, or CENTER. Default is LEFT.

			
<table border="1" width="50%">
<tr>
<td>Table Row</td>
<td>Table Row</td>
</tr>
<tr>
<td align="right">Table Row</td>
<td>Table Row</td>
</tr>
</table>

VALIGN - Controls whether the data inside a cell is aligned on the TOP, BOTTOM, BASELINE, or CENTER. Default is CENTER.

		
<table border="1" width="50%">
<tr>
<td>Table<br>Row</td>
<td>Table Row</td>
</tr>
<tr>
<td>Table<br>Row</td>
<td valign="bottom">Table Row</td>
</tr>
</table>

WIDTH - Controls the width of the cell, in pixels or percentage.

		
<table border="1" width="70%">
<tr>
<td>Table Row</td>
<td>Table Row</td>
</tr>
<tr>
<td>Table Row</td>
<td width="80%">Table Row</td>
</tr>
</table>

HEIGHT - Controls the height of the cell, in pixels or percentage.

		
<table border="1" width="50%"> 
<tr>
<td>Table Row</td>
<td>Table Row</td>
</tr>
<tr>
<td>Table Row</td>
<td height="40">Table Row</td>
</tr>
</table>

NOWRAP - Controls the cell so that any data does not wrap to fit the width of the cell.

		
<table border="1" width="50%">
<tr>
<td>Table Row</td>
<td>Table Row</td>
</tr>
<tr>
<td>Table Row</td>
<td nowrap>Controls the cell so that any data does not wrap to fit the width of the cell.</td>

</tr>
</table>

BGCOLOR - Specifies the background color of the cell in Hex or RGB triplet.

		
<table border="1" width="50%">
<tr>
<td>Table Row</td>
<td>Table Row</td>
</tr>
<tr>
<td>Table Row</td>
<td bgcolor="gray">Table Row</td>
</tr>
</table>

Column and Row Spanning - <COLSPAN> <ROWSPAN>

Spanning can be one of the most confusing Table elements (it also was for me personally). The example below will be pretty complex, so look at the Table source closely. The example is using a Border of 1, Cellpadding of 5, and Width of 100%. The Table also has 5 rows and 5 columns.

The commands are:

ROWSPAN - Controls how many rows the cell spans. Default is 1.

COLSPAN - Controls how many columns the cell spans. Default is 1.

<table border="1" cellpadding="5"
width="100%">
<tr>
<td align="center" colspan="5">
Bands I listened to Monday through Friday</td>
</tr>
<tr>
<td>Soundgarden</td>
<td>Nine Inch Nails</td>
<td>House of Pain</td>
<td rowspan="2">LL Cool J</td>
<td>311</td>
</tr>
<tr>
<td>Rush</td>
<td>White Zombie</td>
<td>Quad City DJ's</td>
<td>R.E.M.</td>
</tr>
<tr>
<td colspan="2">Pearl Jam</td>
<td>Cypress Hill</td>
<td>Beck</td>
<td rowspan="2">Superdrag</td>
</tr>
<tr>
<td>Metallica</td>
<td>Sponge</td>
<td colspan="2">Fun Lovin' Criminals</td>
</tr>
<tr>
<td>Nada Surf</td>
<td>Hole</td>
<td>KMFDM</td>
<td>Gravity Kills</td>
<td>Filter</td>
</tr>
</table>

Table Headers <TH></TH> can be substituted anywhere <TD></TD> is. They act exactly the same and can be used as <TD> is, except the Default is bold and centered.

		
<table border="1" width="50%">
<tr>
<th width="50%">Table Header</th>
<th width="50%">Table Header</th>
</tr>
<tr>
<td width="50%">Table Cell</td>
<td width="50%">Table Cell</td>
</tr>
</table>