Web Programming at ITM

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.

ATTRIBUTE	DESCRIPTION
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 value of colspan is 1. A value of zero means the cell will span all columns from the current column to the last 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 value of rowspan is one. A value of zero means that the cell spans all rows from the current row to the last row.
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 = "MIDDLE">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 = "MIDDLE" 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.

ATTRIBUTE	DESCRIPTION
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>

In-Depth Info about Tables

Lesson 4