Back to Section Main
Table Examples
 pwp home  >   Reference Library  >   HTML Tutorials  >  Table Examples

On this page we will show you HTML coding examples of tables, and then show you how that code would display a table on your page. We will start with the code and example to create a basic table, and then add attributes and options in incremental steps to make the table increasingly fancier. Please note that BORDERCOLORLIGHT and BORDERCOLORDARK work only with the Prodigy browser and Microsoft's Internet Explorer.

You can copy and paste the HTML code from the boxes into your web page editor so that you can experiment with changing it.
A basic, no-frills 2 column by 2 row table.

A B
C D 
<TABLE>
  <TR>
    <TD>A</TD>
    <TD>A</TD>
  </TR>
  <TR>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
</TABLE>
The same table with a BORDER 8 pixels wide.

A B
C D 
<TABLE BORDER=8>
  <TR>
    <TD>A</TD>
    <TD>A</TD>
  </TR>
  <TR>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
</TABLE>
And now let's put more space (10 pixels) between the contents of the table cells and the borders of the cells with CELLPADDING.

A B
C D 
<TABLE BORDER=8 CELLPADDING=10>
  <TR>
    <TD>A</TD>
    <TD>A</TD>
  </TR>
  <TR>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
</TABLE>
Let's make the lines on the inside of the table 5 pixels wide by using CELLSPACING.

A B
C D 
<TABLE BORDER=8 CELLPADDING=10
  CELLSPACING=5>
  <TR>
    <TD>A</TD>
    <TD>A</TD>
  </TR>
  <TR>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
</TABLE>
Now let's add some background color to the table cells with BGCOLOR.

A B
C D 
<TABLE BORDER=8 CELLPADDING=10
  CELLSPACING=5 BGCOLOR="#ff0000">
  <TR>
    <TD>A</TD>
    <TD>A</TD>
  </TR>
  <TR>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
</TABLE>
And then let's use BGCOLOR to change the background colors of the cells in the bottom row.

A B
C D 
<TABLE BORDER=8 CELLPADDING=10
  CELLSPACING=5 BGCOLOR="#00ff00">
  <TR>
    <TD>A</TD>
    <TD>A</TD>
  </TR>
  <TR BGCOLOR="#ff0000">
    <TD>C</TD>
    <TD>D</TD>
  </TR>
</TABLE>
Or maybe you want to change the background color of only the upper right cell.

A B
C D 
<TABLE BORDER=8 CELLPADDING=10
  CELLSPACING=5 BGCOLOR="#ff0000">
  <TR>
    <TD>A</TD>
    <TD BGCOLOR="#00ff00">A</TD>
  </TR>
  <TR>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
</TABLE>
Now let's use BORDERCOLOR to make the border around the table a solid color.

A B
C D 
<TABLE BORDER=8 CELLPADDING=10
  CELLSPACING=5 BGCOLOR="#ff0000"
  BORDERCOLOR="#0000ff">
  <TR>
    <TD>A</TD>
    <TD BGCOLOR="#00ff00">A</TD>
  </TR>
  <TR>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
</TABLE>
Maybe instead of a solid colored border, the table would look better with a "shaded" (bicolor) border. We can do that by using BORDERCOLORLIGHT (top and left border) and BORDERCOLORDARK (bottom and right border)

A B
C D 
<TABLE BORDER=8 CELLPADDING=10
  CELLSPACING=5 BGCOLOR="#ff0000"
  BORDERCOLORLIGHT="#aqua"
  BORDERCOLORDARK="#0000ff">
  <TR>
    <TD>A</TD>
    <TD BGCOLOR="#00ff00">A</TD>
  </TR>
  <TR>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
</TABLE>
Now, using TH (table header), let's add some column headings. Note that, by default, column headings are centered and bold.

Column 1 Column 2
A B
C D 
<TABLE BORDER=8 CELLPADDING=10
  CELLSPACING=5 BGCOLOR="#ff0000"
  BORDERCOLORLIGHT="#aqua"
  BORDERCOLORDARK="#0000ff">
  <TR>
    <TH>Column 1</TH>
    <TH>Column 2</TH>
  </TR>
  <TR>
    <TD>A</TD>
    <TD BGCOLOR="#00ff00">A</TD>
  </TR>
  <TR>
    <TD>C</TD>
    <TD>D</TD>
  </TR>
</TABLE>
Let's assume that the text in the cells in column 2 should be aligned on the right margin instead of the left margin. We can change the horizontal alignment of a cell's contents by using the ALIGN attribute.

Column 1 Column 2
A This text is right aligned.
C And so is this. 
<TABLE BORDER=8 CELLPADDING=10
  CELLSPACING=5 BGCOLOR="#ff0000"
  BORDERCOLORLIGHT="#aqua"
  BORDERCOLORDARK="#0000ff">
  <TR>
    <TH>Column 1</TH>
    <TH>Column 2</TH>
  </TR>
  <TR>
    <TD>A</TD>
    <TD BGCOLOR="#00ff00"
    ALIGN="right">A</TD>
  </TR>
  <TR>
    <TD>C</TD>
    <TD ALIGN="right">D</TD>
  </TR>
</TABLE>
We can also change the horizontal alignment of the contents of a cell by using the VALIGN attribute. For example, let's make the upper left cell (A) be aligned at the top of the cell, and the lower left cell (C) aligned at the bottom of the cell.

Column 1 Column 2
Top This text is right aligned.
Bottom And so is this. 
<TABLE BORDER=8 CELLPADDING=10
  CELLSPACING=5 BGCOLOR="#ff0000"
  BORDERCOLORLIGHT="#aqua"
  BORDERCOLORDARK="#0000ff">
  <TR>
    <TH>Column 1</TH>
    <TH>Column 2</TH>
  </TR>
  <TR>
    <TD VALIGN="top">A</TD>
    <TD BGCOLOR="#00ff00"
      ALIGN="right">A</TD>
  </TR>
  <TR>
    <TD VALIGN="bottom">C</TD>
    <TD ALIGN="right">D</TD>
  </TR>
</TABLE>
Using COLSPAN, let's make the table have only one column heading that spans both columns of the table.

Heading Spans Both Columns
Top This text is right aligned.
Bottom And so is this. 
<TABLE BORDER=8 CELLPADDING=10
  CELLSPACING=5 BGCOLOR="#ff0000"
  BORDERCOLORLIGHT="#aqua"
  BORDERCOLORDARK="#0000ff">
  <TR>
    <TH COLSPAN=2>Heading Spans
      Both Columns</TH>
  </TR>
  <TR>
    <TD VALIGN="top">A</TD>
    <TD BGCOLOR="#00ff00"
    ALIGN="right">A</TD>
  </TR>
  <TR>
    <TD VALIGN="bottom">C</TD>
    <TD ALIGN="right">D</TD>
  </TR>
</TABLE>
Using ROWSPAN, we can make a cell in a table span multiple rows. For example, let's make cell "A" span two rows.

Heading Spans Both Columns
This cell spans the two right cells. This text is right aligned.
And so is this. 
<TABLE BORDER=8 CELLPADDING=10
  CELLSPACING=5 BGCOLOR="#ff0000"
  BORDERCOLORLIGHT="#aqua"
  BORDERCOLORDARK="#0000ff">
  <TR>
    <TH COLSPAN=2>Heading Spans
      Both Columns</TH>
  </TR>
  <TR>
    <TD VALIGN="top"
      ROWSPAN=2>A</TD>
    <TD BGCOLOR="#00ff00"
    ALIGN="right">A</TD>
  </TR>
  <TR>
    <TD ALIGN="right">D</TD>
  </TR>
</TABLE>
And finally, it's possible to include a table within a table. For example, let's put our original, basic 2 x 2 table and place it in the lower right cell.

Heading Spans Both Columns
This cell spans the two right cells. This text is right aligned.
A B
C D 
<TABLE BORDER=8 CELLPADDING=10
  CELLSPACING=5 BGCOLOR="#ff0000"
  BORDERCOLORLIGHT="#aqua"
  BORDERCOLORDARK="#0000ff">
  <TR>
    <TH COLSPAN=2>Heading Spans
      Both Columns</TH>
  </TR>
  <TR>
    <TD VALIGN="top"
      ROWSPAN=2>A</TD>
    <TD BGCOLOR="#00ff00"
    ALIGN="right">A</TD>
  </TR>
  <TR>
    <TD ALIGN="right">
      <TABLE>
        <TR>
          <TD>A</TD>
          <TD>A</TD>
        </TR>
        <TR>
          <TD>C</TD>
          <TD>D</TD>
        </TR>
      </TABLE>
    </TD>
  </TR>
</TABLE>



©1999-2001 Prodigy Communications Corporation | Privacy Policy | Trademark Notices
Jump to top of page