HOME > Tables

WEB DESIGN: BASICS

TABLES

The <TABLE></TABLE> tag allows you to layout information in columns and rows. The basic elements of a table are:

<TABLE></TABLE> - Beginning and end of the table
<TR></TR> - Table Row
<TH></TH> - Table Header Cell (automatically bolds and centers the data it surrounds)
<TD></TD> - Table Cell (Table Data)
<CAPTION></CAPTION> - Caption for the table

Whatever attributes you declare within the <TABLE></TABLE> tag, applies to the entire table. Whatever attributes you declare within the <TR></TR> tag applies to the entire row. Whatever attributes you declare in the <TD></TD> or <TH></TH> tags applies to that particular cell.

EXAMPLE 1

<HTML>

<HEAD>

<TITLE>Simple Table</TITLE>

</HEAD>

<H1 ALIGN=CENTER>Simple Table</H1>

<TABLE>

<CAPTION>% of 1997 Employment in farm and farm-related jobs</CAPTION>

<TR>

          <TH>Variable</TH>
          <TH>State</TH>
          <TH>Metro</TH>
          <TH>Nonmetro</TH>

</TR>

<TR>

          <TD>Production</TD>
          <TD>17.3</TD>
          <TD>15.1</TD>
          <TD>23.3</TD>

</TR>

<TR>

          <TD>Farm Inputs </TD>
          <TD>3.4</TD>
          <TD>2.4</TD>
          <TD>6.2</TD>

</TR>

<TR>

          <TD>Processing & Marketing</TD>
          <TD>1.4</TD>
          <TD>1.3</TD>
          <TD>1.8</TD>

</TR>

<TR>

          <TD>Wholesale & Retail Trade</TD>
          <TD>10.4</TD>
          <TD>10.2</TD>
          <TD>11.0</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Some of the <TABLE></TABLE> attributes:

ALIGN - aligns the entire table left/right/center
BACKGROUND - displays a background image behind the entire table
BGCOLOR - displays a background color behind the entire table
BORDER - displays a border around every cell in the table
CELLPADDING - puts pixel padding within each cell
CELLSPACING - puts pixel padding between each cell
SUMMARY - text description of the table
WIDTH - width of the entire table in pixels or percentages

One of the <CAPTION></CAPTION> attributes is ALIGN: aligns the caption above or below the table (top/bottom)

EXAMPLE 2

<HTML>

<HEAD>

<TITLE>Simple Table</TITLE>

</HEAD>

<H1 ALIGN=CENTER>Simple Table</H1>

<CAPTION ALIGN="bottom">% of 1997 Employment in farm and farm-related jobs</CAPTION>

<TR>

          <TH>Variable</TH>
          <TH>State</TH>
          <TH>Metro</TH>
          <TH>Nonmetro</TH>

</TR>

<TR>

          <TD>Production</TD>
          <TD>17.3</TD>
          <TD>15.1</TD>
          <TD>23.3</TD>

</TR>

<TR>

          <TD>Farm Inputs </TD>
          <TD>3.4</TD>
          <TD>2.4</TD>
          <TD>6.2</TD>

</TR>

<TR>

          <TD>Processing & Marketing</TD>
          <TD>1.4</TD>
          <TD>1.3</TD>
          <TD>1.8</TD>

</TR>

<TR>

          <TD>Wholesale & Retail Trade</TD>
          <TD>10.4</TD>
          <TD>10.2</TD>
          <TD>11.0</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Some of the <TR></TR> attributes:

ALIGN - aligns the contents of the entire row left/right/center
BGCOLOR - displays a background color behind the entire row
VALIGN - vertically aligns the contents of the row top/middle/bottom
WIDTH - width of the entire row in pixels or percentages

EXAMPLE 3

<HTML>

<HEAD>

<TITLE>Simple Table</TITLE>

</HEAD>

<H1 ALIGN=CENTER>Simple Table</H1>

<CAPTION>% of 1997 Employment in farm and farm-related jobs</CAPTION>

          <TH><FONT COLOR="#FFFFFF">Variable</FONT></TH>
          <TH><FONT COLOR="#FFFFFF">State</FONT></TH>
          <TH><FONT COLOR="#FFFFFF">Metro</FONT></TH>
          <TH><FONT COLOR="#FFFFFF">Nonmetro</FONT></TH>

</TR>

<TR>

          <TD>Production</TD>
          <TD>17.3</TD>
          <TD>15.1</TD>
          <TD>23.3</TD>

</TR>

          <TD>Farm Inputs </TD>
          <TD>3.4</TD>
          <TD>2.4</TD>
          <TD>6.2</TD>

</TR>

<TR>

          <TD>Processing & Marketing</TD>
          <TD>1.4</TD>
          <TD>1.3</TD>
          <TD>1.8</TD>

</TR>

          <TD>Wholesale & Retail Trade</TD>
          <TD>10.4</TD>
          <TD>10.2</TD>
          <TD>11.0</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Some of the <TD></TD> and <TH></TH> attributes:

ALIGN - aligns the contents of the current cell left/right/center
BGCOLOR - displays a background color behind the current cell
NOWRAP - tells the browser not to wrap the text around the cell
VALIGN - vertically aligns the contents of the current cell top/middle/bottom
WIDTH - width of the current cell in pixels or percentages

EXAMPLE 4

<HTML>

<HEAD>

<TITLE>Simple Table</TITLE>

</HEAD>

<H1 ALIGN=CENTER>Simple Table</H1>

<CAPTION>% of 1997 Employment in farm and farm-related jobs</CAPTION>

</TR>

<TR>

          <TD>Production</TD>
          <TD ALIGN="right" BGCOLOR="#FFFFCC">17.3</TD>
          <TD ALIGN="right" BGCOLOR="#FFFFFF">15.1</TD>
          <TD ALIGN="right" BGCOLOR="#FFFFCC">23.3</TD>

</TR>

          <TD ALIGN="right">Farm Inputs </TD>
          <TD ALIGN="right" BGCOLOR="#FFFFCC">3.4</TD>
          <TD ALIGN="right" BGCOLOR="#FFFFFF">2.4</TD>
          <TD ALIGN="right" BGCOLOR="#FFFFCC">6.2</TD>

</TR>

<TR>

          <TD NOWRAP>Processing & Marketing</TD>
          <TD ALIGN="right" BGCOLOR="#FFFFCC">1.4</TD>
          <TD ALIGN="right" BGCOLOR="#FFFFFF">1.3</TD>
          <TD ALIGN="right" BGCOLOR="#FFFFCC">1.8</TD>

</TR>

          <TD NOWRAP>Wholesale & Retail Trade</TD>
          <TD ALIGN="right" BGCOLOR="#FFFFCC">10.4</TD>
          <TD ALIGN="right" BGCOLOR="#FFFFFF">10.2</TD>
          <TD ALIGN="right" BGCOLOR="#FFFFCC">11.0</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Something to ponder...any HTML codes that you can put in between <BODY></BODY> tags, can go into <TD></TD> and <TH></TH> tags as well. So you can have images, text enhancements, horizontal rules, links, lists, paragraphs, headers, and yes, even a table can be placed within a table cell!

Have fun!

WEB DESIGN: Basics � Last Modified: 5/1/02