Tables

Tables in html can be either text or graphical. Most of this discussion is on graphical tables.

Text Tables

A text table using only text characters in a monospaced font and then using the <pre> and </pre> tags. That is, you do all the work yourself. Plan the columns carefully and insert spaces between them as needed.

The monospaced font is needed so different characters will take up the same amount of space horizontally. The "preformatted" tags are needed so the browser will actually show us the multiple spaces rather than compress white space to just one one space.

There are obvious limitations to a text table, as we cannot use HTML inside a preformatted section: no links or styles, etc. Nonetheless, a text table can be easy to create.

Graphical tables

Tables have two-sided tags to denote the table and rows and columns with in it:

<table> - indicates the start of a table
<tr> - indicates a row in the table
<td> - indicates table data and marks the individual cells in a table

These fit together:

<table>
<tr>
<td> first row, first cell or column </td>
</tr>
</table>

You can also classify the rows into groups that indicates their purpose in the table.

html supports 3 types of row groups: table header, table body, and table footer:

<thead>
one or more table rows
</thead>
<tbody>
one or more table rows
</tbody>
<tfoot>
one or more table rows
</tfoot>

You can have 1 header (or none), 1 footer (or none), and 1 or more body row groups. This is really more important if you're getting external data or if you want to apply different styles to each group.

Table captions

You can have a caption for your table. By default this is centered over the table, but you can change it if you want. The format is:

<caption > Table caption </caption>

This must appear directly after the <table> tag.

You can arrange for the caption to be aligned various ways:<\p>

<caption align=”position”> Table caption </caption>

where position can be one of the following:

bottom – places it centered below the table
top – places it centered above the table
left – places it above the table to the left
right – places it above the table to the right

You can add a table summary that will be used for non-visual browsers:

<table summary=”Description of what the table has in it”>

Table borders

By default a table is displayed with no borders or interior grid lines, just the columns aligned. This may be difficult to read if there are many lines.

You add a border as follows:

<table border=”value”>

where value is the border width in pixels. A 0 means no border or gridlines.

Any other number makes the borders wider but does not affect the interior gridlines.

There are some ways to change the border color, but they are deprecated and you can use bordercolorlight and bordercolordark but they only work in IE.

You can modify the placement of the borders and gridlines by using "frames" and "rules". By default, if you have a border it is on all four sides and all the gridlines appear.

Modify the border placement with the frames attribute like this:

<table frame=”type”>

The rules attribute is for gridlines within the table:

<table rules=”type”>

Neither of these is likely to be supported in older browsers.

You can also set the "cell spacing" (the amount of space between cells) in a table:

<table cellspacing=”value”>

Where value is the size of cell spacing in pixels. If you have a border on your table this will also affect the appearance of the interior gridlines.

You can set the space between the cell text and the cell border by using "cell padding":

<table cellpadding=”value”>

where value is the size of the padding in pixels.

What else can you do?

You can set the width of the table. The default is generally set by the content. You set it as follows:

<table width=”value”>

where value is the width in either pixels or as a percent of the containing element. If the containing element is the body, you make the table fill the width of the page by setting it to 100%

Note – if you use a pixel value that is smaller than the actual size of the table, the browser will display it at the size needed for the content.

You can set the individual cell column width like this:

<td width=”value”>

or

<th width=”value”>

where value is either in pixels or percent of the table width. You only need to put the width on the first column and the remaining cells will use that width. Again, if the content of one of the column cells is greater than the pixel value, the column will use that as the width.

You can prevent a line from wrapping if you feel that is necessary by:

<td nowrap=”nowrap”>

or

<th nowrap=”nowrap”>

Return to main