Featured Templates
Home
HTML and CSS
Tutorials
Advanced Formatting
Added: Oct 03, 2005 Rating: Less than 3 votes yet
Level: Beginner Software:
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 |
| 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
- Okay, now take about 15 minutes to play with some basic tables on your personal web page.
More HTML and CSS: Most Popular Materials | Fresh Materials
| More HTML Tutorials at Markuptutorials.com
10 Random HTML and CSS Tutorials :
10 Random Markuptutorials.com Materials: