WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS
CSS Properties
Database
Design
Flash
HTML
HTML 4.01 Tags
JavaScript
.NET
PHP
Reference
Security
Site Management
Video
XML/RSS
WD Forums
 Client-Side
  Development

    HTML
    XML
    CSS
    Graphics
    JavaScript
    ASP
    Multimedia
    Web Video
    Accessibility
    Dreamweaver
    General
    Accessibility
    Dreamweaver
    Expression Web

    General

 Server-Side
  Development

    PHP
    Perl
    .NET
    Forum, Blog, Wiki & CMS
    SQL
    Java
    Others

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

 Etc.
    The Coffee Lounge
    Computer Issues
    Feedback




HTML Tutor - Getting Started
Part 3

By Michael Hayman

All About Tables

Tables are a very useful tool for giving a site a great look. The following will give you a hand in learning how to expose tables' great page layout potential.

<TABLE></TABLE>
This is what makes the table. It can include the following attributes:

  • BORDER="x" defines the width of the border surrounding the table
  • CELLPADDING="x" defines the space between the cell and it's contents
  • CELLSPACING="x" defines the space between each individual cell
  • HEIGHT="x" defines the height, in pixels, of the table itself
  • WIDTH="x" defines the width, in pixels, of the particualer frame
  • ALIGN="x" defines how the table will be displayed on the page (x = left/right/center)

Example:

<TABLE ALIGN="center" BORDER="1>" WIDTH="580" CELLPADDING="5" CELLSPACING="5">
</TABLE>

Now for the rows and data that define the table.

<TR>
Table Row - This tag is required because it tells the browser where a new row begins. It has the following options:

  • ALIGN="left/right/center" adjusts the text or graphics in the row
  • VALIGN="top/middle/bottom/baseline" stands for vertical align, controls position of table data from top to bottom
  • BGCOLOR="file.jpg" defines the background color for the cell
  • BORDERCOLOR defines the border color of the cell

Example:

<TR ALIGN="middle" VALIGN="top" BGCOLOR="#000000" BORDERCOLOR="#000080">
</TR>

<TD>
Table Data - This is what defines the cell itself. It includes:

  • ALIGN="left/right/center" adjusts the text or graphics in the row
  • VALIGN="top/middle/bottom/baseline" stands for vertical align, controls position of table data from top to bottom
  • BGCOLOR="file.jpg" defines the background color for the cell
  • BORDERCOLOR defines the border color of the cell
  • BACKGROUND="file.jpg" tiles an image as the background much like <BODY background="..."> does in the body tag
  • ROWSPAN="x" defines how many rows the cell will span as compared to other rows
  • COLSPAN="x" defines how many columns the cell will span
  • NOWRAP="x" allows the text to continue uninhibited by the table cells

Example:

<TD HEIGHT=300 WIDTH="300" ROWSPAN="2" COLSPAN="2" BGCOLOR="#000000" BORDERCOLOR="#000555" NOWRAP>
</TD>

<TH>
Table Header - It is just like <TD> but it allows everything to be centered within the cell.

Example:

<TH HEIGHT="300" WIDTH="300" ROWSPAN="2" COLSPAN="2" BGCOLOR="#000000" BORDERCOLOR="#000080" BACKGROUND="file.gif" NOWRAP>
</TH>

<CAPTION>
This allows the table to have a caption appended to it.

Example:

<TABLE WIDTH="300" CELLPADDING="5" CELLSPACING="5" BORDER="5" ALIGN="middle">
<TR>
<TD COLSPAN="3" ALIGN="middle" VALIGN="middle"> top row </TD>
</TR><TR>
<TD ALIGN="middle" VALIGN="middle"> Number 1 </TD>
<TD ALIGN="middle" VALIGN="middle" Number 2 </TD>
<TD ALIGN="middle" VALIGN="middle"> Number 3 </TD></TR>
<TR><TD COLSPAN="3" ALIGN="middle" VALIGN="middle"> bottom row </TD>
</TR>
</TABLE>
<CAPTION>Full table example</CAPTION>

This outputs:

Full table example
top row
Number 1 Number 2 Number 3
bottom row

[ < HTML Tutor: Part 2 (The Basics) ] [ HTML Tutor: Part 4 (Frames) > ]



HTML5 Development Center


Recent Articles