Creating Tables

example of an HTML table

A table is a grid of cells that may have visible or invisible borders to align text and images. Tables offer the facility to lock the relative position of objects on a web page. HTML code does not have a command equivalent to a TAB key, so you need to create a table to hold the text in place. For example a common everyday use of a table is a timetable, where the columns and rows represent the times and days.

Tables can be used to hold the content of an entire page, like this page, although the layout of this page is controlled using Cascading Style Sheets. You could use frames pages for page layout, but the code is more complicated.

A Simple Table

This is a simple table, with narrow borders.

You can create a table with invisible borders, this way the objects appear to be locked in space!

Tables can contain Text, Images or other Tables!

You can also alter the border colour and width, and the background colour of the cells.

These commands will create a simple table, like the one above:

<table>

This lets the browser know you are creating a table. The following attributes modify the <table> tag.

border="3"

This makes the border visible. You can specify the width of the border width in pixels. See the note on pixels. If you leave out this parameter the default is "1".

cellspacing="3"

This sets the size of the gap between the cells. If you leave out this parameter the default is "2".

cellpadding="5"

This sets the internal margin of the cell. This will stop text from reaching the edge of the cell. If you leave out this parameter the default is "1".

width="580"

The total width of the table in pixels. Most computer screens will usually display at least 600 pixels wide. You could specify the table dimensions as a percentage of the space available, for example width="90%".

height="200"

This attribute defines the height of the table in pixels. It is not an absolute value, if the table has to be higher for the contents to fit this value will be ignored.


<tr>

This starts the first Table Row.

<td>

This starts the first Table Division (column). The next three attributes modify the <td> tag.

width="40%"

This sets the width of this division as a percentage of the total width. You can specify the dimensions in pixels by just using the numerical value, e.g.: width="232". Make sure your column widths add up to the total width available or you may get unpredictable results.

height="100"

This defines the height of the cell. It is not an absolute value, if the cell has to be higher for the contents to fit this value will be ignored.

valign="top"

This aligns objects in this cell of the table conventionally, to the top. You could specify "middle" or "bottom"


</td>

This is the end of this table division. All text and images must be placed before this tag to appear in the first row, first column.


<td width="60%" valign="top">

This sets the width of the second division of the table and the alignment.

</td>

This ends the second column of the first row.

</tr>

This ends the first table row.

<tr>

This starts the second table row.

<td width="40%" valign="top">

These commands start the second row first column.

</td>

So this tag ends the second row first column.

<td width="60%" valign="top">

Same row, new column.

</td>

The end of the second column of the second row.

</tr>

This tag closes the last table row.


</table>

So this lets the browser know that the table is complete.

  • If you use percentages the table will change width relative to the screen size it is viewed on. Find out more about using percentages or absolute values.

The code for the simple table above looks like:

<table border="1" cellspacing="1" cellpadding="7" width="580">
  <tr>
    <td width="40%" valign="top">
    <p>This is a simple table, with narrow borders.</p></td>
    <td width="60%" valign="top">
    <p>You can create a table with invisible borders, this way the objects appear to be locked in space!</p></td>
  </tr>
  <tr>
    <td width="40%" valign="top">
    <p>Tables can contain Text, Images or other Tables!</p></td>
    <td width"60%" valign="top">
    <p>You can also alter the border colour and width, and the background colour of the cells.</p></td>
  </tr>
</table>

You can specify the colour of the border by putting the bordercolor="#..." attribute in the <table> tag, specifying the colour using the normal colour conventions.

You can specify the colour of the table background by putting the bgcolor="#..." attribute in the <table> tag, specifying the colour in hexadecimal. If you want you can specify the background colour of individual cells by putting the bgcolor="#..." attribute in the <td> tag.

Backgrounds

You can use an image as the background to a table, but the result is different depending on what browser you are using. If you specify background="image_name.gif" in the <table> tag (where the width and height of the image are the same as the table) Microsoft Internet Explorer will overlay the table on the whole image. However Netscape Navigator will put the image in each cell of the table, this will mean it will be too small for all of it to be seen. You can still successfully put background="image_name.gif" in the <td> tag of any cell, and the image will appear in that cell, or tiled if the cell is larger than the image.

Example

This is a table with three columns and two rows, but the border attribute is set at "0" so the outline is hidden.

The text in each cell of the table can be formatted just like any other text.

Cells in a table can have a coloured background.

This cell has an image as a background.

The image of the bike on the right seems to be floating ...

image of Harley motorbike

... but it is placed in a cell of the table.