Guide to HTML
Creating Tables

Basics | Borders | Cell padding | Cell spacing | Headers | Line wrap inside cell | Colspan | Rowspan | Vertical cell alignment | Horizontal cell alignment | Table alignment | Table dimensions | Caption | Colors | Tips & tricks

Basic Table

A simple table may look like this:

123
102030
100200300

There are a few basic rules for the definition of tables.

Each table is surrounded in the source code by codes to denote the begin and the end of the table:

<table>
...
...
...
</table>

Each of the rows is surrounded by the "table row" codes: <tr>...</tr>.

Each of the cells is surrounded by the "table data" codes: <td>...</td>.

If we put 1 and 1 together, we create the following source code for a fairly simple, basic table:

Example:

Source:

<table border=2>
  <tr><td>1</td>   <td>2</td>   <td>3</td>  </tr>
  <tr><td>10</td>  <td>20</td>  <td>30</td> </tr>
  <tr><td>100</td> <td>200</td> <td>300</td></tr>
</table>

Result:

1 2 3
10 20 30
100 200 300

The number of rows in the table is equal to the number of tr elements. The number of columns is equal to the largest number of td element within a row.

Note:

Top


Borders

Syntax:

<table [border="value"]>

The <table> code accepts various attributes. One of them is border. With this, you control the width of the border lines, just specify the number of pixels. With a value of 0, there will be no borders.

Example:

Small border with border="1"

123
102030
100200300

Somewhat thicker lines with border="5"

123
102030
100200300

Or extraordinary with border="15"

123
102030
100200300

Top


Cellpadding

Syntax:

<table [cellpadding="value"]>

By adding the cellpadding attribute in the <table> code, you can change the space between the cell contents and the cell borders. Just specify the number of pixels.

Example:

cellpadding="1"

123
102030
100200300

cellpadding="5"

123
102030
100200300

cellpadding="15"

123
102030
100200300

Top


Cellspacing

Syntax:

<table [cellspacing="value"]>

By adding the cellspacing attribute in the <table> code, you can change the width of the lines between the cells. Just specify the number of pixels.

Example:

cellspacing="1"

123
102030
100200300

cellspacing="5"

123
102030
100200300

cellspacing="15"

123
102030
100200300

Top


Headers

A table is not a real table if there are no headers, right? You can define table headers by using the "table header" codes: <th>...</th>.

If we take the standard table from the first example and put headers in it, it looks like this:

Example:

Source:

<table border="2">
  <tr><th>First</th> <th>Second</th> <th>Third</th></tr>
  <tr><td>1</td>      <td>2</td>       <td>3</td>      </tr>
  <tr><td>10</td>     <td>20</td>      <td>30</td>     </tr>
  <tr><td>100</td>    <td>200</td>     <td>300</td>    </tr>
</table>

Result:

FirstSecondThird
123
102030
100200300

You can also use headers at the side of the table, instead of on top of the table. Just change the above source code a little bit.

Example:

Source:

<table border="2">
  <tr>
    <th>First</th>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <th>Second</th>
    <td>10</td>
    <td>20</td>
    <td>30</td>
  </tr>
  <tr>
    <th>Third</th>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>

Result:

First123
Second102030
Third100200300

Note:

Top


Line Wrap Inside Cell

The browser will automatically adjust the table width by taking the longest cell in each row. When the data in a cell exceeds the line boundaries -- depending on the screen width or the width attribute -- the browser will automatically wrap the remainder of the line onto the next line in the same cell. You can also force a new line in a cell (i.e. dividing the cell content over more than one line) by including a line break code <br>. Just like you would do in normal text. See also the <br> code in the HTML codes section.

Example:

Source:

<table>
  <tr> <td>...</td> <td>...<br>...</td> </tr>
  <tr> <td>...</td> <td>...<br>...</td> </tr>
</table>

Make sure you put the break code inside the <td> code.

You can prevent the data in a cell to be broken by specifying the nowrap attribute in the <th> or <td> code.

Top


Collspan

Syntax:

<[th|td] [colspan="value"]>

You can also divide the contents of the cell over more than one column, using the colspan attribute in the <td> code.

Example:

Source:

<table border="2">
  <tr>
    <th>First</th>
    <th>Second</th>
    <th>Third</th>
  </tr>
  <tr align="right">
    <td colspan="2">1</td>
    <td>3</td>
  </tr>
  <tr align="right">
    <td>10</td>
    <td>20</td>
    <td>30</td>
  </tr>
  <tr align="right">
    <td>100</td>
    <td colspan="2">200</td>
  </tr>
</table>

Result:

First Second Third
1 3
10 20 30
100 200

You can use the same code for the table headers.

Example:

Source:

<table border="2">
  <tr>
    <th colspan="2">First</th>
    <th colspan="2">Second</th>
  </tr>
  <tr align="right">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr align="right">
    <td>10</td>
    <td>20</td>
    <td>30</td>
    <td>40</td>
  </tr>
  <tr align="right">
    <td>100</td>
    <td>200</td>
    <td>300</td>
    <td>400</td>
  </tr>
</table>

Result:

FirstSecond
1234
10203040
100200300400

Top


Rowspan

Syntax:

<[th|td] [rowspan="value"]>

You can also divide the cell contents over more than one row, using the rowspan attribute in the <td> code.

Example:

Source:

<table border="2">
  <tr>
    <th>First</th>
    <th>Second</th>
    <th>Third</th>
  </tr>
  <tr align="right">
    <td rowspan="2">1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr align="right">
    <td>20</td>
    <td>30</td>
  </tr>
  <tr align="right">
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>

Result:

First Second Third
1 2 3
20 30
100 200 300

And of course, you can use the same for the headers. Let's take a look at the table with the headers at the side of the table.

Example:

Source:

<table border="2">
  <tr>
    <th rowspan="2">First</th>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>10</td>
    <td>20</td>
    <td>30</td>
  </tr>
  <tr>
    <th>Third</th>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>

Result:

First123
102030
Third100200300

Top


Vertical Cell Alignment

Syntax:

<td [valign="top|middle|bottom"]>

When using the rowspan attribute, the cell or header will be vertically centered. You can change this by adding the valign=top|middle|bottom attribute.

Example: valign="top"

Source:

<table border="2">
  <tr>
    <th>First</th>
    <th>Second</th>
    <th>Third</th>
  </tr>
  <tr align="right">
    <td rowspan="2" valign="top">1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr align="right">
    <td>20</td>
    <td>30</td>
  </tr>
  <tr align="right">
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>

Result:

FirstSecondThird
123
2030
100200300

Example: valign="bottom"

Source:

<table border="2">
  <tr>
    <th>First</th>
    <th>Second</th>
    <th>Third</th>
  </tr>
  <tr align="right">
    <td rowspan="2" valign="bottom">1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr align="right">
    <td>20</td>
    <td>30</td>
  </tr>
  <tr align="right">
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>

Result:

FirstSecondThird
123
2030
100200300

Top


Horizontal Cell Alignment

Syntax:

<[tr|th|td] [align="left|center|right"]>

You can align the contents of a table row or individual cells by using the alignment attribute in the <tr> table row tag, <th> header tag, or <td> cell tag. If you do not specify the alignment attribute, table cells will be left justified and headers will be centered by default.

Example:

Source:

<table border="2">
  <tr>
    <th>Example column 1</th>
    <th>Example column 2</th>
  </tr>
  <tr align="left">
    <td<Left</td>
    <td>Left</td>
  </tr>
  <tr align="center">
    <td<Center</td>
    <td>Center</td>
  </tr>
  <tr align="right">
    <td<Right</td>
    <td>Right</td>
  </tr>
  <tr>
    <td align="left">Left</td>
    <td align="right">Right</td>
  <tr>
    <td align="center">Center</td>
    <td align="center">Center</td>
  </tr>
  <tr>
    <td align="right">Right</td>
    <td align="left">Left</td>
  </tr>
</table>

Result:

Example column 1 Example column 2
Left Left
Center Center
Right Right
Left Right
Center Center
Right Left

The first 3 rows are aligned by using the alignment attribute in the <tr> tags, while the cells of the last 3 rows are aligned individually by using the alignment attribute in the <td> tags. What applies for cells also applies for <th> headers.

Top


Table Alignment

Syntax:

<table [align="left|center|right"]>

A table's horizontal placement relative to the left and right margins can be specified with the align attribute. By default, the table will be left-aligned.

A table can also be centered on screen using <center> or <div> tags. See div and center.

Top


Table Dimensions

Syntax:

<table [width="value|value%"] [height="value|value%"]>

Your browser will calculate the dimensions of the table automatically. However, you can specify its height or width explicitly by adding width and/or height attributes to the <table> tag.

The value provided can be the absolute number of pixels or a percentage relative to the screen dimensions.

Example: Width="200", Height="200"

123
102030
100200300

The table width and height are both specified as an absolute value, independent of the screen dimensions.

Example: Width="50%", Height="30%"

123
102030
100200300

The table width and height are specified relative to the screen dimensions. You can also use a combination of both methods.

Note:

Top


Caption

Syntax:

<caption [align=top|bottom]>...</caption>

A table can be named using the <caption>...</caption> code. It may come either immediately after the opening code or immediately before the closing code.

There is one attribute: align=top|bottom to put the caption either at the top or at the bottom of the table. The caption will be placed "outside" the borders. The default location is top.

Example:

Source:

<table border="2">
  <caption align="top">
    The title of the table goes here...
  </caption>
  <tr><td>1</td>   <td>2</td>   <td>3</td>  </tr>
  <tr><td>10</td>  <td>20</td>  <td>30</td> </tr>
  <tr><td>100</td> <td>200</td> <td>300</td></tr>
</table>

Result:

The title of the table goes here...
1 2 3
10 20 30
100200300

Note how the browser will center and wrap the caption automatically.

The name of the table should be put "outside" the borders, i.e. outside the table, otherwise it will not be immediately clear that we're dealing with the name of the table. Of course you can fool anyone and "mis-use" one of the table rows for this purpose. You can define an additional header row or an additional data row and use this row to put the title in.

Just make sure to use the colspan attribute in the <th> or <td> code to "reserve" the maximum number of columns so the title spans the entire table width.

Example:

Source:

<table border="2">
  <tr>
    <th colspan="5">Title goes here</th>
  <tr>
    <th>First column</th>
    <th>Second column</th>
    <th>Third column</th>
    <th>Fourth column</th>
    <th>Fifth column</th>
  <tr align="right">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  <tr align="right">
    <td>10</td>
    <td>20</td>
    <td>30</td>
    <td>40</td>
    <td>50</td>
  <tr align="right">
    <td>100</td>
    <td>200</td>
    <td>300</td>
    <td>400</td>
    <td>500</td>
</table>

Result:

Title goes here
First columnSecond columnThird columnFourth columnFifth column
12345
1020304050
100200300400500

In this example, an additional header row definition is inserted, but you could also use an additional data row. In that case, change the th in td. When using a data row, you should be aware of two things:

  1. The cell content (i.e. "title") will not show up as boldfaced text, but as plain text, because it is considered a data row by your browser.
  2. The cell content (i.e. "title") will not be centered by default. To center the "title", use the align=center attribute.

Got it? Right. You can also complicate things a little further. You will notice that a colspan of 5 makes the title span the entire table width. You can also use just three of five cells, leaving the first and fifth cell blank. This gives an entirely different effect.

Example:

Source:

<table border="2">
  <tr>
    <th></th>
    <th colspan="3">Title goes here</th>
    <th></th>
  <tr>
    <th>First column</th>
    <th>Second column</th>
    <th>Third column</th>
    <th>Fourth column</th>
    <th>Fifth column</th>
  <tr align="right">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  <tr align="right">
    <td>10</td>
    <td>20</td>
    <td>30</td>
    <td>40</td>
    <td>50</td>
  <tr align="right">
    <td>100</td>
    <td>200</td>
    <td>300</td>
    <td>400</td>
    <td>500</td>
</table>

Result:

Title goes here
First columnSecond columnThird columnFourth columnFifth column
12345
1020304050
100200300400500

You can also justify the title left or right.

Note:

Top


Color

Syntax:

<tr|th|td [bgcolor="color"]>

You can change the background color for one or more cells by using the bgcolor attribute in either the tag for a row, a header, or a cell.

Example:

Source:

<table border="2">
  <tr bgcolor="#eeeecc">
    <th>Left</th>
    <th>Middle</th>
    <th>Right</th>
  </tr>
  <tr>
    <td>Aaaaa</td>
    <td>Ddddd</td>
    <td>Ggggg</td>
  </tr>
  <tr>
    <td>Bbbbb</td>
    <td>Eeeee</td>
    <td bgcolor="#aaddaa">Hhhhh</td>
  </tr>
  <tr>
    <td>Ccccc</td>
    <td>Fffff</td>
    <td bgcolor="#111111"><font color="#ffff0">Ggggg</font></td>
  </tr>
</table>

Result:

Left MiddleRight
AaaaaDdddd Ggggg
BbbbbEeeee Hhhhh
CccccFffff Ggggg

All table headers have the same background color #eeeecc by using the bgcolor attribute in the table row tag. The other cells are adjusted individually by using the bgcolor attribute in individual cells.

To change a cell's foreground color, use the regular font changing code <font>.

Top


Tips

Don't:

You cannot omit the table row codes <tr>. A table can not directly contain <td>'s, it contains <tr>'s which contain <td>'s.

Tip:

Though it is not according to the rules of syntax stated elsewhere in this document, you can omit the closing codes </th>, </td>, and </tr>. However, they are required when nesting tables -- i.e. defining a table inside a table, or to be more precise: to define a table inside a cell.

Example:

Source:

<table border="2" cellpadding="5">
  <tr><th>One</th><th>Two</th></tr>
  <tr>
    <td>1</td><td><table border=1>
                    <tr><td>a</td><td>b</td></tr>
                    <tr><td>c</td><td>d</td></tr>
                  </table>
              </td>
  </tr>
  <tr><td>2</td><td>3</td></tr>
</table>

Result:

OneTwo
1
ab
cd
23

(Note that the cellpadding attribute is just there for reasons of aesthetics.)

The closing tags for table cells and rows are also required when using line break codes <br> in table cells. Without closing tags for cells and rows, the line breaks would be placed directly inside the <table>...</table>, which is not allowed.

Tip:

You can use all physical and logical style codes in cells. However, do not use headers <h>...</h> in cells, it is a mis-use of headers. Use the font size codes instead.

Tip:

With some browsers (Netscape, for instance), when a cell contains no data the outlines will not be drawn. To prevent this, use an invisible non break space code inside the cell: &nbsp;.

Example:

Empty cell vs. non-break space
Empty cell
AaaaaDddddGgggg
Bbbbb
CccccFffffIiiii
Non-break space
AaaaaDddddGgggg
Bbbbb  
CccccFffffIiiii

Tip:

The above effect of 2 tables side by side has been accomplished by defining those 2 tables inside another table (=bold).

Example:

Source:

<table border="0">
  <tr>
  <table border="2">
    (Contents of left table go here)
  </table>
  </tr>
  <tr>
  <table border="2">
    (Contents of right table go here)
  </table>
  </tr>
</table>

This can come in handy when you want to position two images side by side.

Tip:

You can use anchors inside cells and therefore link the cell content to another document or image -- either local or remote -- or to another site. You could use this to build some sort of on-line help screen. See the <a> code in the HTML codes section for more information about anchors.

Tip:

If you are using an external image as background wallpaper, perhaps this trick is useful to you. Define the color you want your table borders to be as the general background color of your document, using the <body bgcolor="#RRGGBB">. Your borders will now have the same color as the background color you are using. What happens is that your document will load, the background color will be changed to the one you specified, the background image will appear and the background will "shine through".

This effect is noticeable with a border width greater than 1. With the default attribute border (which equals border="0") or border="1" the effect may not be noticeable.

You should always be aware, however, that users sometimes disable the auto-image-load feature. If the background image is not in their browser's cache, it will not be loaded and the background color you specified will be used instead of the image. Therefore, you should always choose a color that makes it possible to read the table's contents without the wallpaper image.



Paragraph separator