eXtropia | Tutorials | Introduction to Web Design Day Three

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

Previous Page | Next Page