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.

Example 13: the WIDTH attribute

width=50%	width=35%	XXX
A	B	C
D	E	F

<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