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 Attributes  
  • As you can see, the basic table is horridly bland.

  • Fortunately, the <TABLE> tag comes with several attributes to make it look nicer.

  • The attributes are shown in the table below:

ATTRIBUTE DESCRIPTION
ALIGN Specifies how text will wrap around the table. This works the same as the ALIGN parameter for images. Valid values include RIGHT or LEFT
BGCOLOR Colors the table background just as it would when used with the <BODY> tag.
BORDER Specifies the pixel width of the border that divides table cells and the table itself. This table is set to BORDER = "1".
CELLPADDING Specifies the amount of white space between the borders of a table and the actual data in the cell. The default is "1"
CELLSPACING Specifies the amount of space inserted between table cells. The default is "2"
HEIGHT Specifies the height of the table in absolute pixels or as a percentage of the available space.
WIDTH Specifies the width of the table in absolute pixels or as a percentage of the available space

Tables by Example

  • Let's take a look at a few examples....

  • Here is a basic table with no border.
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>

<TR>
<TH>Column One Header</TH>
<TH>Column Two Header</TH>
</TR>

<TR>
<TD>Row One/Column One</TD>
<TD>Row One/Column Two</TD>
</TR>

<TR>
<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>
</TR>
</TABLE>
  • Here is the same table with a border of 4.
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 = "4">

<TR>
<TH>Column One Header</TH>
<TH>Column Two Header</TH>
</TR>

<TR>
<TD>Row One/Column One</TD>
<TD>Row One/Column Two</TD>
</TR>

<TR>
<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>
</TR>
</TABLE>
  • Here is the same table with a border of 4 and a CELLPADDING of 10.
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 = "4" CELLPADDING = "10">

<TR>
<TH>Column One Header</TH>
<TH>Column Two Header</TH>
</TR>

<TR>
<TD>Row One/Column One</TD>
<TD>Row One/Column Two</TD>
</TR>

<TR>
<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>
</TR>
</TABLE>
  • Here is the same table with a border of 4, a CELLPADDING of 10, and a CELLSPACING of 10.
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 = "4" CELLPADDING = "10"
            CELLSPACING = "10">

<TR>
<TH>Column One Header</TH>
<TH>Column Two Header</TH>
</TR>

<TR>
<TD>Row One/Column One</TD>
<TD>Row One/Column Two</TD>
</TR>

<TR>
<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>
</TR>
</TABLE>
  • Here is the same table with a border of 4 and 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 = "4" BGCOLOR = 'YELLOW">

<TR>
<TH>Column One Header</TH>
<TH>Column Two Header</TH>
</TR>

<TR>
<TD>Row One/Column One</TD>
<TD>Row One/Column Two</TD>
</TR>

<TR>
<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>
</TR>
</TABLE>
  • Here is the same table with a pixel width of 100.
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 = "4" WIDTH = "100">

<TR>
<TH>Column One Header</TH>
<TH>Column Two Header</TH>
</TR>

<TR>
<TD>Row One/Column One</TD>
<TD>Row One/Column Two</TD>
</TR>

<TR>
<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>
</TR>
</TABLE>
  • Here is the same table with a border of 4 and a pixel width of 80%.
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 = "4" WIDTH = "80%">

<TR>
<TH>Column One Header</TH>
<TH>Column Two Header</TH>
</TR>

<TR>
<TD>Row One/Column One</TD>
<TD>Row One/Column Two</TD>
</TR>

<TR>
<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>
</TR>
</TABLE>

Previous Page | Next Page