Website Help, Tables

Welcome to the tables help section. This page will give you an overview, as well as examples, on how to use the different table tags and attributes. Also, don't forget to check out the following complimentary table documentation:

* Tables Tutorial
* Tables Quick Reference

**Quick Jump**
Alignment Background Color- BGCOLOR Background Image- BACKGROUND Border- BORDER Border Color- BORDERCOLOR Cell Padding- CELLPADDING Cell Spacing- CELLSPACING Column Span- COLSPAN Row Span- ROWSPAN Header- TH Non-Wrapping Cells- NOWRAP Vertical Align- VALIGN Width and Height- WIDTH/HEIGHT

Alignment

Description

ALIGN allows you to horizontal align data within a table cell. It works on entire rows, or an individual table cell.

Syntax

<TR ALIGN="X">
<TD ALIGN="X">
<TH ALIGN="X">
** X represent LEFT, MIDDLE, or RIGHT.

Examples

Example 1- Center entire row

A	B
Random Data	Random Data
More Random Data	More Random Data

<TABLE BORDER="1">
  <TR ALIGN="CENTER">
    <TD>A</TD>
    <TD>B</TD>
  </TR>
  <TR>
    <TD>Random Data</TD>
    <TD>Random Data</TD>
  </TR>
  <TR>
    <TD>More Random Data</TD>
    <TD>More Random Data</TD>
  </TR>
</TABLE>

Example 2- Only 1 centered table cell

A	B
Random Data	Random Data
More Random Data	More Random Data

<TABLE BORDER="1">
  <TR>
    <TD ALIGN="CENTER">A</TD>
    <TD>B</TD>
  </TR>
  <TR>
    <TD>Random Data</TD>
    <TD>Random Data</TD>
  </TR>
  <TR>
    <TD>More Random Data</TD>
    <TD>More Random Data</TD>
  </TR>
</TABLE>

Example 3- Entire row centered but some cells override
A B

Random Data Random Data

More Random Data More Random Data
<TABLE BORDER="1">
  <TR ALIGN="CENTER">
    <TD ALIGN="RIGHT">A</TD>
    <TD>B</TD>
  </TR>
  <TR>
    <TD>Random Data</TD>
    <TD>Random Data</TD>
  </TR>
  <TR>
    <TD>More Random Data</TD>
    <TD>More Random Data</TD>
  </TR>
</TABLE>

Background Color- BGCOLOR

Description

The BGCOLOR attribute allows you to set colors for your tables, cells, or rows.

Syntax

<TABLE BGCOLOR="X">
<TR BGCOLOR="X">
<TD BGCOLOR="X">
<TH BGCOLOR="X">
** X is the corresponding hex color code.

Examples

Example 1- Within <TABLE>

A	B	C	D
E	F	G	H

<TABLE BORDER="1" BGCOLOR="#FF3300">
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
  <TR>
    <TD>E</TD>
    <TD>F</TD>
    <TD>G</TD>
    <TD>H</TD>
  </TR>
</TABLE>

Example 2- Within <TR>

A	B	C	D
E	F	G	H

<TABLE BORDER="1">
  <TR BGCOLOR="#FF3300">
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
  <TR BGCOLOR="#3300FF">
    <TD>E</TD>
    <TD>F</TD>
    <TD>G</TD>
    <TD>H</TD>
  </TR>
</TABLE>

Example 3- Within <TD> and <TH>

A	B	C	D
E	F	G	H

<TABLE BORDER="0">
  <TR>
    <TD BGCOLOR="#FF3300">A</TD>
    <TD BGCOLOR="#9900FF">B</TD>
    <TD BGCOLOR="#99CC99">C</TD>
    <TD BGCOLOR="#FFFF66">D</TD>
  </TR>
  <TR>
    <TD BGCOLOR="#990033">E</TD>
    <TD BGCOLOR="#00FF33">F</TD>
    <TD BGCOLOR="#FFFFFF">G</TD>
    <TD BGCOLOR="#000000">H</TD>
  </TR>
</TABLE>

Background Image- BACKGROUND

Description

The BACKGROUND attribute is used to place background images in your tables.

Syntax

<TABLE BACKGROUND="X"> Where X is the image you want set as the background.
<TD BACKGROUND="X"> Where X is the image you want set as the background.
<TH BACKGROUND="X"> Where X is the image you want set as the background.

Examples

Example 1- Within <TABLE>

A	B	C	D
E	F	G	H

<TABLE BORDER="0" BACKGROUND="background.jpg" CELLPADDING="10">
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
  <TR>
    <TD>E</TD>
    <TD>F</TD>
    <TD>G</TD>
    <TD>H</TD>
  </TR>
</TABLE>

Example 2- Within <TD>

A	B	C	D
E	F	G	H

<TABLE BORDER="1" CELLPADDING="10">
  <TR>
    <TD BACKGROUND="background.jpg">A</TD>
    <TD>B</TD>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
  <TR>
    <TD>E</TD>
    <TD>F</TD>
    <TD>G</TD>
    <TD BACKGROUND="background.jpg">H</TD>
  </TR>
</TABLE>

Example 3- Within <TH>

A	B	C	D
E	F	G	H

<TABLE BORDER="1" CELLPADDING="10">
  <TR>
    <TH BACKGROUND="background.jpg">A</TD>
    <TD>B</TD>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
  <TR>
    <TD>E</TD>
    <TD>F</TD>
    <TD>G</TD>
    <TH BACKGROUND="background.jpg">H</TD>
  </TR>
</TABLE>

Border- BORDER

Description

The TABLE attribute BORDER allows you to show or hide a border around a table. The size of the border can be increased up to the available screen space.

Syntax

<TABLE BORDER="X"> Where X is the size from 0 to available screen space.

Examples

Border of 0

A	B	C	D
E	F	G	H

<TABLE BORDER="0">
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
  <TR>
    <TD>E</TD>
    <TD>F</TD>
    <TD>G</TD>
    <TD>H</TD>
  </TR>
</TABLE>

Border of 1

A	B	C	D
E	F	G	H

<TABLE BORDER="1">
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
  <TR>
    <TD>E</TD>
    <TD>F</TD>
    <TD>G</TD>
    <TD>H</TD>
  </TR>
</TABLE>

Border of 5

A	B	C	D
E	F	G	H

<TABLE BORDER="5">
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
  <TR>
    <TD>E</TD>
    <TD>F</TD>
    <TD>G</TD>
    <TD>H</TD>
  </TR>
</TABLE>

Border Color- BORDERCOLOR

Description

The BORDERCOLOR, BORDERCOLORDARK, and BORDERCOLORLIGHT attributes let you set the colors of your border. Please note that these are not compatible with all web browsers, in particular, Netscape.

Syntax

<TABLE BORDERCOLOR="X">
<TR BORDERCOLOR="X">
<TD BORDERCOLOR="X">
<TABLE BORDERCOLORLIGHT="X" BORDERCOLORDARK="X">
<TR BORDERCOLORLIGHT="X" BORDERCOLORDARK="X">
<TD BORDERCOLORLIGHT="X" BORDERCOLORDARK="X">
** X represent the colors corresponding hex code.
*** All 3 attributes can be used together if needed

Examples

Example 1- BORDERCOLOR for Entire Table

A	B	C	D
E	F	G	H

<TABLE BORDER="1" BORDERCOLOR="#FF3300" CELLPADDING="20">
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
  <TR>
    <TD>E</TD>
    <TD>F</TD>
    <TD>G</TD>
    <TD>H</TD>
  </TR>
</TABLE>

Example 2- BORDERCOLOR for Table and Individual Cells

A	B	C	D
E	F	G	H

<TABLE BORDER="1" BORDERCOLOR="#FFFF00" CELLPADDING="20">
  <TR>
    <TD BORDERCOLOR="#FF3300">A</TD>
    <TD>B</TD>
    <TD BORDERCOLOR="#99FF99">C</TD>
    <TD>D</TD>
  </TR>
  <TR>
    <TD>E</TD>
    <TD BORDERCOLOR="#3300FF">F</TD>
    <TD>G</TD>
    <TD BORDERCOLOR="#FF9966">H</TD>
  </TR>
</TABLE>

Example 3- BORDERCOLOR for Entire Rows

A	B	C	D
E	F	G	H

<TABLE BORDER="1" BORDERCOLOR="#FFFF00" CELLPADDING="20">
  <TR  BORDERCOLOR="#FF3300">
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
  <TR BORDERCOLOR="#99FF99">
    <TD>E</TD>
    <TD>F</TD>
    <TD>G</TD>
    <TD>H</TD>
  </TR>
</TABLE>

Example 4- BORDERCOLORLIGHT, BORDERCOLORDARK, and BORDERCOLOR

A	B	C	D
E	F	G	H

<TABLE BORDER="1" CELLPADDING="20" 
BORDERCOLORDARK="#3300FF" BORDERCOLORLIGHT="#99FF66">
  <TR>
    <TD BORDERCOLOR="#FF3300">A</TD>
    <TD>B</TD>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
  <TR>
    <TD>E</TD>
    <TD>F</TD>
    <TD>G</TD>
    <TD>H</TD>
  </TR>
</TABLE>

Cell Padding- CELLPADDING

Description

CELLPADDING is the amount of space (or padding) between the cell border and the cell contents.

Syntax

<TABLE CELLPADDING="X">
** X represent number to pad.

Examples

Example 1- No cell padding

A	B	C
D	E	F

<TABLE BORDER="1" CELLPADDING="0">
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
  </TR>
  <TR>
    <TD>D</TD>
    <TD>E</TD>
    <TD>F</TD>
  </TR>
</TABLE>

Example 2- Cell padding of 10

A	B	C
D	E	F

<TABLE BORDER="1" CELLPADDING="10">
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
  </TR>
  <TR>
    <TD>D</TD>
    <TD>E</TD>
    <TD>F</TD>
  </TR>
</TABLE>

Example 3- Cell padding of 50

A	B	C
D	E	F

<TABLE BORDER="1" CELLPADDING="50">
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
  </TR>
  <TR>
    <TD>D</TD>
    <TD>E</TD>
    <TD>F</TD>
  </TR>
</TABLE>

Cell Spacing- CELLSPACING

Description

CELLSPACING is the amount of space between cells.

Syntax

<TABLE CELLSPACING="X">
** X represent number to space.

Examples

Example 1- No cell spacing

A	B	C
D	E	F

<TABLE BORDER="1" CELLSPACING="0">
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
  </TR>
  <TR>
    <TD>D</TD>
    <TD>E</TD>
    <TD>F</TD>
  </TR>
</TABLE>

Example 2- Cell spacing of 10

A	B	C
D	E	F

<TABLE BORDER="1" CELLSPACING="10">
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
  </TR>
  <TR>
    <TD>D</TD>
    <TD>E</TD>
    <TD>F</TD>
  </TR>
</TABLE>

Example 3- Cell spacing of 50

A	B	C
D	E	F

<TABLE BORDER="1" CELLSPACING="50">
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
  </TR>
  <TR>
    <TD>D</TD>
    <TD>E</TD>
    <TD>F</TD>
  </TR>
</TABLE>

Column Span- COLSPAN

Description

COLSPAN enables you to span cells across multiple columns.

Syntax

<TD COLSPAN="X">
<TH COLSPAN="X">
** X represent number of rows to span.

Examples

Example 1- Span 1 cell 2 columns

A		B
C	D	E

<TABLE BORDER="1">
  <TR>
    <TD COLSPAN="2">A</TD>
    <TD>B</TD>
  </TR>
  <TR>
    <TD>C</TD>
    <TD>D</TD>
    <TD>E</TD>
  </TR>
</TABLE>

Example 2- Span 2 cells 2 columns

Group 1		Group 2
Name	State	Name	State
John Doe	Colorado	Bob Doe	Indiana
Jane Doe	Las Vegas	Rich Doe	Washington

<TABLE BORDER="1">
  <TR>
    <TH COLSPAN="2">Group 1</TH>
    <TH COLSPAN="2">Group 2</TH>
  </TR>
  <TR>
    <TH>Name</TH>
    <TH>State</TH>
    <TH>Name</TH>
    <TH>State</TH>
  </TR>
  <TR>
    <TD>John Doe</TD>
    <TD>Colorado</TD>
    <TD>Bob Doe</TD>
    <TD>Indiana</TD>
  </TR>
  <TR>
    <TD>Jane Doe</TD>
    <TD>Las Vegas</TD>
    <TD>Rich Doe</TD>
    <TD>Washington</TD>
  </TR>
</TABLE>

Row Span- ROWSPAN

Description

ROWSPAN enables you to span a cell to multiple rows.

Syntax

<TD ROWSPAN="X">
<TH ROWSPAN="X">
** X represent number of rows to span.

Examples

Example 1- Span 2 rows

A	B	C
A	D	E

<TABLE BORDER="1">
  <TR>
    <TD ROWSPAN="2">A</TD>
    <TD>B</TD>
    <TD>C</TD>
  </TR>
  <TR>
    <TD>D</TD>
    <TD>E</TD>
  </TR>
</TABLE>

Example 2- Span 2 rows but 1 normal row

Num	Name	State
1	John Doe	Colorado
1	Jane Doe	Nevada
2	Bob Doe	Indiana

<TABLE BORDER="1">
  <TR>
    <TH>Num</TH>
    <TH>Name</TH>
    <TH>State</TH>
  </TR>
  <TR>
    <TH ROWSPAN="2">1</TH>
    <TD>John Doe</TD>
    <TD>Colorado</TD>
  </TR>
  <TR>
    <TD>Jane Doe</TD>
    <TD>Nevada</TD>
  </TR>
  <TR>
    <TH>2</TH>
    <TD>Bob Doe</TD>
    <TD>Indiana</TD>
  </TR>
</TABLE>

Header- TH

Description

The <TH> tag lets you add headers to your rows or columns. If you use the <TH> tag it will make the contents of the cell BOLD and CENTERED.

Syntax

<TH>DATA</TH>
** DATA is the contents of your cell.

Examples

Example 1- Column Header

Name	State
John Doe	Colorado
Jane Doe	Nevada
Bob Doe	Indiana

<TABLE BORDER="1">
  <TR>
    <TH>Name</TH>
    <TH>State</TH>
  </TR>
  <TR>
    <TD>John Doe</TD>
    <TD>Colorado</TD>
  </TR>
  <TR>
    <TD>Jane Doe</TD>
    <TD>Nevada</TD>
  </TR>
  <TR>
    <TD>Bob Doe</TD>
    <TD>Indiana</TD>
  </TR>
</TABLE>

Example 2- Row Header

1	John Doe	Colorado
2	Jane Doe	Nevada
3	Bob Doe	Indiana

<TABLE BORDER="1">
  <TR>
    <TH>1</TH>
    <TD>John Doe</TD>
    <TD>Colorado</TD>
  </TR>
  <TR>
    <TH>2</TH>
    <TD>Jane Doe</TD>
    <TD>Nevada</TD>
  </TR>
  <TR>
    <TH>3</TH>
    <TD>Bob Doe</TD>
    <TD>Indiana</TD>
  </TR>
</TABLE>

Example 3- Row and Column Header

Num	Name	State
1	John Doe	Colorado
2	Jane Doe	Nevada
3	Bob Doe	Indiana

<TABLE BORDER="1">
  <TR>
    <TH>Num</TH>
    <TH>Name</TH>
    <TH>State</TH>
  </TR>
  <TR>
    <TH>1</TH>
    <TD>John Doe</TD>
    <TD>Colorado</TD>
  </TR>
  <TR>
    <TH>2</TH>
    <TD>Jane Doe</TD>
    <TD>Nevada</TD>
  </TR>
  <TR>
    <TH>3</TH>
    <TD>Bob Doe</TD>
    <TD>Indiana</TD>
  </TR>
</TABLE>

Non-Wrapping Cells- NOWRAP

Description

NOWRAP prevents your table cells from wrapping.

Syntax

<TD NOWRAP>
<TH NOWRAP>

Examples

Example 1- Without NOWRAP

THIS IS A TEST	B	C	D
E	F	G	H

<TABLE BORDER="1" WIDTH="15">
  <TR>
    <TD>THIS IS A TEST</TD>
    <TD>B</TD>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
  <TR>
    <TD>E</TD>
    <TD>F</TD>
    <TD>G</TD>
    <TD>H</TD>
  </TR>
</TABLE>

Example 2- Using NOWRAP

THIS IS A TEST	B	C	D
E	F	G	H

<TABLE BORDER="1" WIDTH="15">
  <TR>
    <TD NOWRAP>THIS IS A TEST</TD>
    <TD>B</TD>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
  <TR>
    <TD>E</TD>
    <TD>F</TD>
    <TD>G</TD>
    <TD>H</TD>
  </TR>
</TABLE>

Vertical Align- VALIGN

Description

VALIGN enables you to vertically align the data in a cell.

Syntax

<TR VALIGN="X">
<TD VALIGN="X">
<TH VALIGN="X">
** X represent TOP, MIDDLE, BOTTOM.

Examples

Example 1- Combination using all methods

A	B	C	D
Aligned to the TOP	Aligned to the MIDDLE	Aligned to the BOTTOM	Some Random Data
Aligned to the TOP	Aligned to the MIDDLE	Aligned to the BOTTOM	Some Random Data

<TABLE BORDER="1">
  <TR>
    <TH>A</TH>
    <TH>B</TH>
    <TH>C</TH>
    <TH>D</TH>
  </TR>
  <TR VALIGN="TOP">
    <TD>Aligned to the TOP</TD>
    <TD VALIGN="MIDDLE">Aligned to the MIDDLE</TD>
    <TD VALIGN="BOTTOM">Aligned to the BOTTOM</TD>
    <TD>Some
Random
Data</TD>
  </TR>
  <TR>
    <TD VALIGN="TOP">Aligned to the TOP</TD>
    <TD VALIGN="MIDDLE">Aligned to the MIDDLE</TD>
    <TD VALIGN="BOTTOM">Aligned to the BOTTOM</TD>
    <TD>Some<BR>Random<BR>Data</TD>
  </TR>
</TABLE>

Width and Height- WIDTH/HEIGHT

Description

Using the WIDTH and HEIGHT table attributes will allow you to set the size of your tables. The WIDTH and HEIGHT can be set using the number of pixels or a percentage of the screen. Keep in mind that 72 pixels equals approximately 1 inch.

Syntax

<TABLE WIDTH="X">
<TABLE HEIGHT="X">

Examples

Example 1- Table width at 100%
A B C D

E F G H
<TABLE BORDER="1" WIDTH="100%">
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
  <TR>
    <TD>E</TD>
    <TD>F</TD>
    <TD>G</TD>
    <TD>H</TD>
  </TR>
</TABLE>
NOTE- The representation here is incorrect. To format this page properly I am using nested tables. If you are using percentages within nested tables it will be that percentage within the table cell you are working on. To further your understanding of nested tables, please see the documentation covering that topic.

Example 2- Width at 50%
A B C D

E F G H
<TABLE BORDER="1" WIDTH="50%">
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
  <TR>
    <TD>E</TD>
    <TD>F</TD>
    <TD>G</TD>
    <TD>H</TD>
  </TR>
</TABLE>
NOTE- The representation here is incorrect. To format this page properly I am using nested tables. If you are using percentages within nested tables it will be that percentage within the table cell you are working on. To further your understanding of nested tables, please see the documentation covering that topic.

Example 3- Width at 216 pixels

A	B	C	D
E	F	G	H

<TABLE BORDER="1" WIDTH="216">
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
  <TR>
    <TD>E</TD>
    <TD>F</TD>
    <TD>G</TD>
    <TD>H</TD>
  </TR>
</TABLE>

Example 4- Width and HEIGHT at 500 pixels

A	B	C	D
E	F	G	H

<TABLE BORDER="1" WIDTH="500" HEIGHT="500">
  <TR>
    <TD>A</TD>
    <TD>B</TD>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
  <TR>
    <TD>E</TD>
    <TD>F</TD>
    <TD>G</TD>
    <TD>H</TD>
  </TR>
</TABLE>

Data Pit Stop Help

Alignment

Background Color- BGCOLOR

Background Image- BACKGROUND

Border- BORDER

Border Color- BORDERCOLOR

Cell Padding- CELLPADDING

Cell Spacing- CELLSPACING

Column Span- COLSPAN

Row Span- ROWSPAN

Header- TH

Non-Wrapping Cells- NOWRAP

Vertical Align- VALIGN

Width and Height- WIDTH/HEIGHT