HTML tables,
a tutorial by example

Extensions to the <TABLE> tag, supported by Netscape, include BORDER, CELLPADDING, CELLSPACING, and WIDTH. You can assign a number to BORDER to specify the width, in pixels, of the outside table border. You can also assign a number to CELLPADDING defining the space (in pixels) between the cell contents and the cell borders, while CELLSPACING defines the space between the cells (the width of the borders).

Finally, the WIDTH attribute sets the width of the entire table. This can be expressed as an absolute number (in pixels) or as a percentage width of the entire display.

This page starts (section A) with a series of tables which demonstrate the available options. Then (section B) each table is shown together with the HTML source code which produces it.

Click on the label of any table to go to its counterpart in the other section.


Section A: examples

Example 1: plain (no borders)
Item A1 Item A2 Item A3
Item B1 Item B2 (this is B3)
Item C1 -C2- *C3*
Item number D1 Item D2 Item D3

 

Example 2: with border
Item A1 Item A2 Item A3
Item B1 Item B2 (this is B3)
Item C1 -C2- *C3*
Item number D1 Item D2 Item D3

 

 

Example 3: with cellpadding
Item A1 Item A2 Item A3
Item B1 Item B2 (this is B3)
Item C1 -C2- *C3*
Item number D1 Item D2 Item D3

 

 

Example 4: with border and cellpadding
Item A1 Item A2 Item A3
Item B1 Item B2 (this is B3)
Item C1 -C2- *C3*
Item number D1 Item D2 Item D3

 

 

Example 5: with ``header cells''
Item A1 Item A2 Item A3
Item B1 Item B2 (this is B3)
Item C1 -C2- *C3*
Item number D1 Item D2 Item D3

 

 

Example 6: Overriding cell style defaults
Item A1 Item A2 Item A3
Item B1 Item B2 (this is B3)
Item C1 -C2- *C3*
Item number D1 Item D2 Item D3

 

 

Example 7: empty cells
Item A2 Item A3
Item B1 Item B2
Item C1 -C2-
Item number D1  

 

 

Example 8: colspan
Items A1, A2 Item A3
Item B1 Item B2 (this is B3)
Item C1 Items C2 and C3
The items labelled D1, D2, and D3

 

 

Example 9: rowspan
Item A1 Item A2 Items A3,
B3,
C3
Item B1 Item B2
Items C1 and D1 -C2-
Item D2 Item D3

 

 

Example 10: colspan and rowspan
Items A1,
B1
Items A2, A3
Items B2, B3
Item C1 C2,D2 *C3*
Item number D1 Item D3

 

 

Example 11: tables within a table
A1a1 A1a2
A1b1 A1b2
A2 A3
B1 B2 B3
C1
A1a1 A1a2
A1b1 A1b2
C3

 

 

Example 12: <pre>preformatting</pre>


 $ 10.98  $305.20  $ 29.95  $ 3.16
   11.05   291.80    39.95    0.87
   12.77   290.10    19.95    0.23
   23.51   301.40     9.95    0.79
    7.39   306.90    99.95    1.50
   20.16   295.30    79.95    0.90

 

 

Example 13: the WIDTH attribute
width=50% width=35% XXX
A B C
D E F


Section B: the HTML source code

Example 1: plain (no borders)

Item A1 Item A2 Item A3
Item B1 Item B2 (this is B3)
Item C1 -C2- *C3*
Item number D1 Item D2 Item D3

 
The contents of each cell are surrounded by
the pair of tags <td> and </td>.

Each row of cells (listed in left-to-right order)
is surrounded by the tags
<tr> and </tr>.

The entire table, consisting of one or more rows,
is surrounded by the tags
<table> and </table>.

|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<table>
   <tr>
      <td>Item A1</td>
      <td>Item A2</td>
      <td>Item A3</td>
   </tr>
   <tr>
      <td>Item B1</td>
      <td>Item B2</td>
      <td>(this is B3)</td>
   </tr>
   <tr>
      <td>Item C1</td>
      <td>-C2-</td>
      <td>*C3*</td>
   </tr>
   <tr>
      <td>Item number D1</td>
      <td>Item D2</td>
      <td>Item D3</td>
   </tr>
</table>


Example 2: with border

Item A1 Item A2 Item A3
Item B1 Item B2 (this is B3)
Item C1 -C2- *C3*
Item number D1 Item D2 Item D3

|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<table border=3>
   <tr>
      <td>Item A1</td>
      <td>Item A2</td>
      <td>Item A3</td>
   </tr>
   <tr>
      <td>Item B1</td>
      <td>Item B2</td>
      <td>(this is B3)</td>
   </tr>
   <tr>
      <td>Item C1</td>
      <td>-C2-</td>
      <td>*C3*</td>
   </tr>
   <tr>
      <td>Item number D1</td>
      <td>Item D2</td>
      <td>Item D3</td>
   </tr>
</table>


Example 3: with cellpadding

Item A1 Item A2 Item A3
Item B1 Item B2 (this is B3)
Item C1 -C2- *C3*
Item number D1 Item D2 Item D3

|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<table cellpadding=5>
   <tr>
      <td>Item A1</td>
      <td>Item A2</td>
      <td>Item A3</td>
   </tr>
   <tr>
      <td>Item B1</td>
      <td>Item B2</td>
      <td>(this is B3)</td>
   </tr>
   <tr>
      <td>Item C1</td>
      <td>-C2-</td>
      <td>*C3*</td>
   </tr>
   <tr>
      <td>Item number D1</td>
      <td>Item D2</td>
      <td>Item D3</td>
   </tr>
</table>


Example 4: with border and cellpadding

Item A1 Item A2 Item A3
Item B1 Item B2 (this is B3)
Item C1 -C2- *C3*
Item number D1 Item D2 Item D3

|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<table border=3 cellpadding=5>
   <tr>
      <td>Item A1</td>
      <td>Item A2</td>
      <td>Item A3</td>
   </tr>
   <tr>
      <td>Item B1</td>
      <td>Item B2</td>
      <td>(this is B3)</td>
   </tr>
   <tr>
      <td>Item C1</td>
      <td>-C2-</td>
      <td>*C3*</td>
   </tr>
   <tr>
      <td>Item number D1</td>
      <td>Item D2</td>
      <td>Item D3</td>
   </tr>
</table>


Example 5: with ``header cells''

Item A1 Item A2 Item A3
Item B1 Item B2 (this is B3)
Item C1 -C2- *C3*
Item number D1 Item D2 Item D3

text in <td>``data cells''</td> is (by
default) in plain text, and left-justified;

text in <th>``header cells''</th> is (by
default) in boldface, and centered

|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<table border=3 cellpadding=5>
   <tr>
      <th>Item A1</th>
      <th>Item A2</th>
      <th>Item A3</th>
   </tr>
   <tr>
      <td>Item B1</td>
      <td>Item B2</td>
      <td>(this is B3)</td>
   </tr>
   <tr>
      <td>Item C1</td>
      <td>-C2-</td>
      <td>*C3*</td>
   </tr>
   <tr>
      <td>Item number D1</td>
      <td>Item D2</td>
      <td>Item D3</td>
   </tr>
</table>


Example 6: Overriding the defaults
for <td> and <th>

Item A1 Item A2 Item A3
Item B1 Item B2 (this is B3)
Item C1 -C2- *C3*
Item number D1 Item D2 Item D3

Cell style default values can be overridden
with the ALIGN= option in the <td> and
<th> tags, and by using the usual
<b>boldface</b> and <i>italics</i> tags.
(Note that border=7 in this example!)

|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<table border=7 cellpadding=5>
   <tr>
      <th align=right>Item A1</th>
      <th>Item <i>A2</i></th>
      <th>Item A3</th>
   </tr>
   <tr>
      <td>Item B1</td>
      <td>Item B2</td>
      <td>(this is B3)</td>
   </tr>
   <tr>
      <td align=center>Item C1</td>
      <td>-C2-</td>
      <td>*C3*</td>
   </tr>
   <tr>
      <td>Item <b>number D1</b></td>
      <td>Item D2</td>
      <td align=right>Item D3</td>
   </tr>


Example 7: empty cells

Item A2 Item A3
Item B1 Item B2
Item C1 -C2-
Item number D1  

Empty cells don't even get a border
-- unless you use the special character
&nbsp; (nonbreaking space)
as a placeholder in the cell.

|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<table border=3 cellpadding=5>
   <tr>
      <td> </td>
      <td>Item A2</td>
      <td>Item A3</td>
   </tr>
   <tr>
      <td>Item B1</td>
      <td>Item B2</td>
      <td> </td>
   </tr>
   <tr>
      <td>Item C1</td>
      <td>-C2-</td>
      <td> </td>
   </tr>
   <tr>
      <td>Item number D1 </td>
      <td> </td>
      <td> &nbsp; </td>
   </tr>
</table>


Example 8: colspan

Items A1, A2 Item A3
Item B1 Item B2 (this is B3)
Item C1 Items C2 and C3
The items labelled D1, D2, and D3

Using the option colspan=2
inside a <td> or <th> tag
makes the cell as wide as 2
``normal'' cells. The value of
colspan can be any number
up to the full number of
columns in the table.

|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<table border=3 cellpadding=5>
   <tr>
      <td colspan=2>Items A1, A2</td>
      <td>Item A3</td>
   </tr>
   <tr>
      <td>Item B1</td>
      <td>Item B2</td>
      <td>(this is B3)</td>
   </tr>
   <tr>
      <td>Item C1</td>
      <th colspan=2>Items C2 and C3</th>
   </tr>
   <tr>
      <td colspan=3>The items labelled
		D1, D2, and D3</td>
   </tr>
</table>


Example 9: rowspan

Item A1 Item A2 Items A3,
B3,
C3
Item B1 Item B2
Items C1 and D1 -C2-
Item D2 Item D3

Using the option rowspan=2
inside a <td> or <th> tag
makes the cell as tall as 2
``normal'' cells. The value of
rowspan can be any number
up to the full number of
rows in the table.

|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<table border=3 cellpadding=5>
   <tr>
      <td>Item A1</td>
      <td>Item A2</td>
      <th rowspan=3>Items A3, <br>
               B3, <br> C3 </th>
   </tr>
   <tr>
      <td>Item B1</td>
      <td>Item B2</td>
   </tr>
   <tr>
      <td rowspan=2>Items C1 and D1</td>
      <td>-C2-</td>
   </tr>
   <tr>
      <td>Item D2</td>
      <td>Item D3</td>
   </tr>
</table>


Example 10: colspan and rowspan

Items A1,
B1
Items A2, A3
Items B2, B3
Item C1 C2,D2 *C3*
Item number D1 Item D3

You can mix colspan and rowspan
in the same table, but be careful to
eliminate ``redundant'' cells.

|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<table border=3 cellpadding=5>
   <tr>
      <td rowspan=2>Items A1,<br>B1</td>
      <td colspan=2>Items A2, A3</td>
   </tr>
   <tr>
      <th colspan=2>Items B2, B3</th>
   </tr>
   <tr>
      <th>Item C1</th>
      <td rowspan=2> C2,D2 </td>
      <td>*C3*</td>
   </tr>
   <tr>
      <td>Item number D1</td>
      <td>Item D3</td>
   </tr>
</table>


Example 11: tables within a table

A1a1 A1a2
A1b1 A1b2
A2 A3
B1 B2 B3
C1
A1a1 A1a2
A1b1 A1b2
C3

 

The contents of a cell
may be another table.

|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<table border=3 cellpadding=5>
   <tr>
      <td><table border>
        <tr> <td>A1a1</td>
        <td>A1a2</td> </tr>
        <tr> <td>A1b1</td>
        <td>A1b2</td> </tr>
        </table></td>
      <td>A2</td>
      <td>A3</td>
   </tr>
   <tr>
      <td>B1</td>
      <td>B2</td>
      <td>B3</td>
   </tr>
   <tr>
      <td>C1</td>
      <td><table cellpadding=4>
        <tr> <td>A1a1</td>
        <td>A1a2</td> </tr>
        <tr> <td>A1b1</td>
        <td>A1b2</td> </tr>
        </table></td>
      <td>C3</td>
   </tr>
</table>


Example 12: <pre>preformatting</pre>


 $ 10.98  $305.20  $ 29.95  $ 3.16
   11.05   291.80    39.95    0.87
   12.77   290.10    19.95    0.23
   23.51   301.40     9.95    0.79
    7.39   306.90    99.95    1.50
   20.16   295.30    79.95    0.90

Of course, one need not use the <table> tag
at all if the the plain text is already
properly aligned, using a fixed-width font;
enclose the preformatted text in
<pre> and </pre> tags.

|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<pre>
 $ 10.98  $305.20  $ 29.95  $ 3.16
   11.05   291.80    39.95    0.87
   12.77   290.10    19.95    0.23
   23.51   301.40     9.95    0.79
    7.39   306.90    99.95    1.50
   20.16   295.30    79.95    0.90
</pre>


Example 13: the WIDTH attribute

50% 35% XXX
A B C
D E F

 

<Table Width=75%> specifies a table 75% of the full width of the Netscape window.

<TH Width=50%> (or TD) specifies that the cell be 50% of the full table width.

|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<table width=75%
  border=3
  cellpadding=2>
<tr>
 <TH WIDTH=50%>
	50%</TH>
 <TH WIDTH=35%>
	35%</TH>
 <TH> XXX </TH>
</tr>
<tr>
  <td>A</td>
  <td>B</td>
  <td>C</td>
</tr>
<tr>
  <td>D</td>
  <th><i>E</i></th>
  <td>F</td>
</tr>
</table>


prepared by Bruce.Fast@Colorado.EDU