HTML Reference

Tables

Tables provide an easy way to display tabulated information. Previously there was no choice but to use <pre> (which provides a non-proportional font), now HTML authors have the choice. The main (only?) advantage of <pre> over tables is that <pre> is simpler (there's no mucking around with all the various table tags) and in consequence the source information looks the same as the displayed information, this makes it ideal for information that changes often - who wants the hassle of tabulating information that changes daily...

Despite the above, tables are relatively simple and look great! They can be used to highlight a word, or they can be used to display numerous columns and rows. They can either have a border or none at all!

The tags used in Tables are listed below. All the tags have both start and end tags, though the end tags can normally be left off. The exception is the table tag itself, the end tag must be included to tell the browser that the table is finished! Also, some browsers insert an extra blank line in the last row of a table if the final end row tag </tr> is not included.

Tables [Tables in Netscape 1.1]

Tag	Notes	Syntax
Table	The table tags encloses the table. It can have a whole bunch of attributes including a border. The following attributes can be used with the table tag: border, cellpadding, cellspacing, width (see the next page for details).	`<table> ... </table>`
Row	A table is made of one or more rows of information!!! This tag signals the beginning of a new row. The following attributes can be used with the row tag: align, valign.	`<tr> . . . </tr>`
Header	The header tag <th> is similar to the data tag <td> the main difference is that the text in the tag is centred and made bold. Note that <th> can be used anywhere that <td> is used (even in the middle of a row). The following attributes can be used with the header tag: align, colspan, nowrap, rowspan, valign, width.	`<th> . . . </th>`
Data	The data tag is used to enclose the information in the table! The following attributes can be used with the data tag: align, colspan, nowrap, rowspan, valign, width.	`<td> . . . </td>`
Caption	The caption appears above or below the table, depending on the presence of any alignment attributes inside the start caption tag. The following attributes can be used with the caption tag: align.	`<caption> . . . </caption>`

Tables Attributes [Tables in Netscape 1.1]

Align	With <caption> align is either top or bottom. With <tr>, <th> and <td> align is left, center or right.	`align=top\|bottom align=left\|center\|right`
Bgcolor	Use with the <table>, <tr>, <th> and <td> tags. It sets the background colour for the specified part of the table.	`bgcolor=#RRGGBB where #RRGGBB is the colour.`
Border	Use with the <table> tag. It provides a 3D look table. By default there is no border.	`border=XX where XX is the border width.`
Cellpadding	Use with the <table> tag. It controls the space between the border and data in a cell. The default is 1.	`cellpadding=XX where XX is the padding width.`
Cellspacing	Use with the <table> tag. Whereas border is the width of the outside border, cellspacing is the width of the inside borders (though if cellspacing is greater than border the table's border becomes equal to the cellspacing).	`cellspacing=XX where XX is the spacing width.`
Colspan	Use with <th> and <td>; it is used to define how many columns the cell spans!! Strange effects can be had by intersecting a multi-column cell with a multi-row cell - so be careful!	`colspan=XX where XX is the number of columns.`
Nowrap	Use with <th> and <td>; nowrap is similar to <nobr>, except it effects the whole cell. When a cell has the nowrap attribute all the text in the cell will be placed on one line - except where <br> is used to explicitly break the line. Be careful with this!	`nowrap for example: <th nowrap>`
Rowspan	Use with <th> and <td>; it is used to define how many rows the cell spans!!	`rowspan=YY where YY is the number of rows.`
Valign	Use with <tr>, <th> or <td>. Valign controls the vertical placement of data within a cell (or row of cells).	`valign=top\|middle\| bottom\|baseline for example: <tr valign=top>`
Width	When used with the <table> tag, it sets the width of the table; when used with <th> or <td> it sets the width of the cell. Don't use the absolute value unless there's no other choice because you have no control over the screen size of the browser window.	`width=value\|percent for example: <table width=500> <table width=75%>`

Examples

Example 1
In this first example, the table has two columns. The second column is much more narrow than the first because there are fewer words in the second column. The browser will adjust the width of the column to fit the text!

<table width=600
        border=1>

        <tr><!--
        ---------------------------------------- -->

        <th>Heading 1</th>

        <th>Heading 2</th>

        <tr><!--
        ---------------------------------------- -->

        <td>Information in column 1.

        <p>

        This information will wrap onto a number of lines...

        if that's necessary to fit all the
        information.</td>

        <td>Information in column 2.

        <p>

        Just like the first column!</td>

        </tr>

        </table>

Heading 1	Heading 2
Information in column 1. This information will wrap onto a number of lines... if that's necessary to fit all the information.	Information in column 2. Just like the first column!

Example 2
This example shows the minimum you might put in a table. You need the <table> tag and then the <tr> and <td> tags (or the <th> tag as shown below). Note that the "table" can be centred using the <center> tag.

<div align=center>

        <table border=10>

        <tr>

        <th><font
        size=6>Tables</font></th>

        </tr>

        </table>

        </div>

Tables

Example 3
In this example the "headers" are placed in the first column of each row - this is to reinforce the fact that <th> tags can be placed anywhere in a table...

<table width=600
        border=1>

        <tr><!--
        ---------------------------------------- -->

        <th>Header for Row 1</th>

        <td>Column 2, Row 1.

        <p>

        This information will wrap onto a number of lines...

        if that's necessary to fit all the
        information.</td>

        <tr><!--
        ---------------------------------------- -->

        <th> Header for Row 2</th>

        <td>Column 2, Row 2.

        <p>

        Just like the first row!</td>

        <tr> </table>

Header for Row 1	Column 2, Row 1. This information will wrap onto a number of lines... if that's necessary to fit all the information.
Header for Row 2	Column 2, Row 2. Just like the first row!

Example 4
In the example below, specified column widths are used with character formatting to produce a strong effect.

<table width=600>

        <tr><!--
        ---------------------------------------- -->

        <td colspan=2><font
        size=5><b>Coordinate
        Systems</b></font>

        <hr noshade></td>

        </tr>

        <tr><!--
        ---------------------------------------- -->

        <td width=30% align=right>

        <font size=2><i>AutoCAD is a three
        dimensional CAD system, so you can enter XYZ values
        instead of the XY values shown
        here.</i></font></td>

        

        <td width=70%>When specifying positions you can use
        Cartesian or Polar Coordinates. Cartesian coordinates are
        simply a X value, a comma, and a Y value, for example:
        <nobr><b><code>
        11,11</code></b>.</nobr> Polar
        coordinates are a Distance followed by a &lt; symbol
        and an angle, for example:
        <b><code>10&lt;25</code></b>.
        Angles are measured in degrees, with <nobr>0 =
        East</nobr> and <nobr>90 =
        North</nobr>. Any of these numbers can have decimal
        values.</td>

        </tr>

        </table>

Coordinate Systems
AutoCAD is a three dimensional CAD system, so you can enter XYZ values instead of the XY values shown here.	When specifying positions you can use Cartesian or Polar Coordinates. Cartesian coordinates are simply a X value, a comma, and a Y value, for example: `11,11`. Polar coordinates are a Distance followed by a < symbol and an angle, for example: `10<25`. Angles are measured in degrees, with 0 = East and 90 = North. Any of these numbers can have decimal values.

from "AutoCAD R13 for Windows - Introduction"

Example 5
This next example shows some how of the colspan and rowspan attributes can be used. Though these attributes don’t always seem to perform as expected, they can be made to work if some care is taken!

Note the empty <td> tag in the fourth row of the table; because the tag is empty that cell in the table is shown as unfilled - without the "sunk-in" effect. If you want to include the "sunk-in" effect then include a no-breaking space   as shown in row 5.

<table width=600
        border=1>

        <tr><!--
        ---------------------------------------- 1 -->

        <td colspan=2>Row 1, Columns 1 and 2</td>

        <td rowspan=2>Row 1 and 2, Column 3</td>

        </tr>

        <tr><!--
        ---------------------------------------- 2 -->

        <td>Row 2, Column 1</td>

        <td>Row 2, Column 2</td>

        </tr>

        <tr><!--
        ---------------------------------------- 3 -->

        <td rowspan=2>Row 3 and 4, Column 1</td>

        <td>Row 3, Column 2</td>

        <td>Row 3, Column 3</td>

        </tr>

        <tr><!--
        ---------------------------------------- 4 -->

        <td></td>

        <td>Row 4, Column 2</td>

        </tr>

        <tr><!--
        ---------------------------------------- 5 -->

        <td>Row 5, Column 1</td>

        <td>Row 5, Column 2</td>

        <td>&nbsp;</td>

        </tr>

        </table>

Row 1, Columns 1 and 2		Row 1 and 2, Column 3
Row 2, Column 1	Row 2, Column 2	Row 1 and 2, Column 3
Row 3 and 4, Column 1	Row 3, Column 2	Row 3, Column 3
Row 3 and 4, Column 1		Row 4, Column 2
Row 5, Column 1	Row 5, Column 2

Go to next section: Client-side Image Maps or return to the Contents page.
Last Updated: 06 November 1998