Home HTML and CSS Tutorials The Basics of HTML

The Basics of HTML

Author: Selena Sol More by this author

Added: Oct 10, 2005 Rating:

Level: All levels Software: Dreamweaver

Table Cell Attributes

Just as you can define attributes for the table globally, you can also set the attributes for individual table cells.
As we already mentioned, there are two tags that define table cells. These are <TH> for table headers and <TD> for table cells. These tags have a set of attributes that allow you to apply formatting to individual cells.
The attributes are defined in the following table.

ALIGN
Specifies the alignment of the text within the cell. Valid values can be LEFT, RIGHT, or CENTER

BGCOLOR
Specifies the background color for the table cell. It works just the same as the corresponding attribute for the <BODY> tag

COLSPAN
Specifies the number of columns that a single cell should span. The default column spans a single column.

HEIGHT
Specifies the height of the cell in absolute pixels or as a percentage of the total area. Note that all cells in that row will be sized to match this height.

NOWRAP
Specifies that the text within the cell should not be word-wrapped.

ROWSPAN
Specifies the number of rows the cell should span. The default is one.

VALIGN
Specifies the vertical alignment of text within the cell. Valid values are TOP, BOTTOM, or MIDDLE.

WIDTH
Specifies the width of the cell in absolute pixels or as a percentage of the total area. Note that all cells in that column will be sized to match this width.

Table Cell Attributes by Example

The usage of the attributes is best shown by example, so here are several examples showing what can be done with table cell attributes:
Here is a table with different colored cells.

Column One Header	Column Two Header
Row One/Column One	Row One/Column Two
Row Two/Column One	Row Two/Column Two

Here is the code for that table:

<TABLE BORDER = "1">

<TR>
<TH BGCOLOR = "RED">Column One Header</TH>
<TH BGCOLOR = "YELLOW">Column Two Header</TH>
</TR>

<TR>
<TD BGCOLOR = "BLUE">Row One/Column One</TD>
<TD BGCOLOR = "GREEN">Row One/Column Two</TD>
</TR>

<TR>
<TD BGCOLOR = "ORANGE">Row Two/Column One</TD>

<TD BGCOLOR = "PINK">Row Two/Column Two</TD>
</TR>
</TABLE>

This table demonstrates alignment.

Centered Header	Left-Aligned Header	Right-Aligned Header
Here is some text that is displayed in Row One/Column One and aligned to the top vertically	Here is some text that is displayed aligned to the bottom	This text is center-aligned
Aligned to the top vertically and to the right horizontally	bottom-aligned and left-aligned	True center alignment

Here is the code for that table:

<TABLE BORDER = "1">
<TR>
<TH ALIGN = "CENTER">Centered Header</TH>
<TH ALIGN = "LEFT">Left-Aligned Header</TH>

<TH ALIGN = "RIGHT">Right-Aligned Header</TH>
</TR>

<TR>
<TD VALIGN = "TOP">Here is some text that is
displayed in Row One/Column One and aligned to the top
vertically</TD>
<TD VALIGN = "BOTTOM">Here is some text that is
displayed aligned to the bottom</TD>

<TD VALIGN = "CENTER">This text is
center-aligned</TD>
</TR>

<TR>
<TD VALIGN = "TOP" ALIGN = "RIGHT">Aligned to the
top vertically and to the right horizontally</TD>
<TD VALIGN = "BOTTOM" ALIGN = "LEFT">bottom-aligned
and left-aligned</TD>

<TD VALIGN = "CENTER" ALIGN = "CENTER">True center
alignment</TD>
</TR>>

</TABLE>

Here is a table that demonstrates spanning.

Colspan of "3"			Normal Column
Colspan of "2"		Colspan of "2"
Rowspan of "2"	Normal Column	Normal Column	Normal Column
Rowspan of "2"	Normal Column	Normal Column	Normal Column

Here is the code for that table:

<TABLE BORDER = "1">

<TR>
<TH COLSPAN = "3">Colspan of "3"</TH>
<TH>Normal Column</TH>

</TR>

<TR>
<TD COLSPAN = "2">Colspan of "2"</TD>

<TD COLSPAN = "2">Colspan of "2"</TD>
</TR>

<TR>
<TD ROWSPAN = "2">Rowspan of "2"</TD>
<TD>Normal Column</TD>

<TD>Normal Column</TD>
<TD>Normal Column</TD>
</TR>

<TR>
<TD>Normal Column</TD>

<TD>Normal Column</TD>
<TD>Normal Column</TD>
</TR>

</TABLE>

Table Row Attributes

The <TR> tag allows you to apply a subset of the attributes that you can apply to table cells to entire table rows.
The attributes are defined in the following table.

ALIGN
Specifies the alignment of the text within the cells in the row. Valid values can be LEFT, RIGHT, or CENTER

BGCOLOR
Specifies the background color for the table cells in the row. It works just the same as the corresponding attribute for the <BODY> tag

VALIGN
Specifies the vertical alignment of text within the cells in the row. Valid values are TOP, BOTTOM, or CENTER.

Table Row Attributes by Example

The usage of the attributes is best shown by example, so here are several examples showing what can be done with table cell attributes:
Here is a table with different colored cells.

Center aligned header	Center aligned header
This row is right-aligned horizontally and bottom-aligned vertically	The whole row is yellow
This row is centered horizontally and top-aligned vertically	The whole row is orange

Here is the code for that table:

<TABLE BORDER = "1">
<TR ALIGN = "CENTER">
<TH>Center aligned header</TH>
<TH>Center aligned header</TH>
</TR>

<TR BGCOLOR = "YELLOW" VALIGN = "BOTTOM" ALIGN = "RIGHT">

<TD>This row is right-aligned
horizontally and bottom-aligned
<BR> vertically</TD>
<TD>The whole row is yellow</TD>
</TR>

<TR BGCOLOR = "ORANGE" VALIGN = "TOP" ALIGN = "CENTER">
<TD>This row is centered horizontally and
top-aligned

<BR>vertically</TD>
<TD>The whole row is orange</TD>
</TR>

</TABLE>

Exercise Nine