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 |
| 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>
Additional Resources:
Editorial Notes
Table Attributes
Introduction to Web Design | Table of Contents
Table Row Attributes
|
