eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
Resources
 ::   Tutorials
 ::   Presentations
Perl & CGI tutorials
 ::   Intro to Perl/CGI and HTML Forms
 ::   Intro to Windows Perl
 ::   Intro to Perl 5
 ::   Intro to Perl
 ::   Intro to Perl Taint mode
 ::   Sherlock Holmes and the Case of the Broken CGI Script
 ::   Writing COM Components in Perl

Java tutorials
 ::   Intro to Java
 ::   Cross Browser Java

Misc technical tutorials
 ::   Intro to The Web Application Development Environment
 ::   Introduction to XML
 ::   Intro to Web Design
 ::   Intro to Web Security
 ::   Databases for Web Developers
 ::   UNIX for Web Developers
 ::   Intro to Adobe Photoshop
 ::   Web Programming 101
 ::   Introduction to Microsoft DNA

Misc non-technical tutorials
 ::   Misc Technopreneurship Docs
 ::   What is a Webmaster?
 ::   What is the open source business model?
 ::   Technical writing
 ::   Small and mid-sized businesses on the Web

Offsite tutorials
 ::   ISAPI Perl Primer
 ::   Serving up web server basics
 ::   Introduction to Java (Parts 1 and 2) in Slovak

 

Introducton to Web Design
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 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>

Previous Page | Next Page