The Table-Data Tag
Opening tag : <TD>
Closing tag: </TD>
Purpose:
Defines a cell in a table - used alongside the TR tag to layout a table.
Attributes:
Abbr=string
- Gives a shortened version of the cells contents, in case the contents can't fit into the cell, or can't be displayed.
Absheight=#
- Specifies the absolute height of the cell in pixels.
Abswidth=#
- Specifies the absolute width of a cell in pixels.
Align=alignment
- Defines the horizontal alignment of the contents of the cell. Options are LEFT, RIGHT, CENTER or JUSTIFY.
Background=url
- Specifies the url of an image to use as the background of a cell.
Bgcolor=color
- Specifies a color for the cell.
Bordercolor=color
- Specifies the color of the border of the cell.
Bordercolordark=color
- Specifies one color of a border, in the case that it is 3d.
Bordercolorlight=color
- Specifies the other color of a border, in the case that it is 3d.
Colspan=#
- Number of columns this cell spans across.
Class=class
- Format the text in style of the specified class.
Dir=direction
- Useful for languages which should be read from right to left.
Event=Javascript
- Assigns some javascript to an event.
Gradangle=#
- Specifies an angle of gradient for the cell.
Gradcolor=color
- If a gradient is used, you can specify a color for it.
Height=#
- Specifies the height of the cell in pixels.
Id=name
- Assigns an ID to the cell, to allow it be referenced or manipulated by a script.
Lang=language
- Specifies the language of the text within the cell.
Nowrap
- Stops the text from wrapping to a new line.
Rowspan=#
- Specifies the number of rows for the cell to span across.
Style=style
- Applies a style to the cell, overwriting other styling instructions.
Title=title
- Specifies a title for the cell.
Valign=#
- Specifies the vertical alignment for the text in the cell. Choices are, BASELINE, BOTTOM, MIDDLE and TOP.
Width=#
- Specifies the width of the cell.
Example:
<Table>
<TR>
<TD> Width="50%"</TD>
<TD> Width="25%"</TD>
<TD> Width="25%"</TD>
</TR>
<TR>
<TD> Width="50%"</TD>
<TD> Width="25%"</TD>
<TD> Width="25%"</TD>
</TR>
</Table>
Related Tags:
<Caption></Caption> - Caption Tag.
<Col></Col> - Col Tag.
<Colgroup> - Colgroup Tag.
<Table></Table> - Table Tag.
Back to:
Alphabetical Guide
Guide By Type
Comments
Vertical Alignment
By default, items in a cell are vertically centered. This means that if the cell is 300 pixels tall containing a single word, that word will appear in the vertical center of the cell.
Using valign=(top/center/bottom/etc) you can make sure that the contents of the cell appear in the right place.
One simple example is when you have a 2 column table, where each column is a single cell.
<table>
<tr><td>"BIG IMAGE"</td>
<td>Word</td></tr>
</table>
In this example (if you could imagine a big image where it says "BIG IMAGE"), the word Word will be vertically centered unless you change the TD tag before the cell containing Word to be <td valign="top"> so that Word is neatly aligned to the top with the BIG IMAGE.
---Ralph van den Berg
visit RalphvandenBerg.com