Tables


4.1 Simple Tables

Tables are created using three tags: <table>, <tr> and <td>.

Here's an example of coding and the result: (view source)

Color Hex notation Color Hex notation Color Hex notation Color Hex notation
black #000000 white #FFFFFF red #FF0000 green #00FF00
blue #0000FF yellow #FFFF00 aqua #00FFFF violet #FF00FF

The <th> table header tag can be used in place of any <td> tag. This applies bold and centering to the cell. To add a caption to the top of a table, use a <caption> tag after the header. You should also subdivide the sections of the table using <thead>,<tfoot> and <tbody> tags.

HTML colors
Color Hex notation Color Hex notation Color Hex notation Color Hex notation
black #000000 white #FFFFFF red #ff0000 green #00FF00
blue #0000FF yellow #FFFF00 aqua #00FFFF violet #FF00FF

4.2 Table Formatting

There are several parameters which can be used to adjust the overall appearance of a table. The parameters border, cellspacing and cellpadding control the width of the border, the space between cells and the padding around the inside of each cell. Specify the number of pixels for each parameter: (view source)

HTML colors
Color Hex notation Color Hex notation Color Hex notation Color Hex notation
black #000000 white #FFFFFF red #FF0000 green #00FF00
blue #0000FF yellow #FFFF00 aqua #00FFFF violet #FF00FF

Using the align parameter within the <table> tag has the same effect as if the table is an image. (See the image alignment section)

Alignment for individual cells can be done using align and valign (vertical align) parameters.
Unfortunately, you are required to specify alignment for each cell individually. Your best bet is to use cut and paste to get your tags set up quickly. This table shows parameters that you can use: (view source)

Values of align and valign
align=left
valign=top
align=center
valign=top
align=right
valign=top
align=left
valign=middle
align=center
valign=middle
align=right
valign=middle
align=left
valign=bottom
align=center
valign=bottom
align=right
valign=bottom

The table will automatically adjust to the size of the content in the cells. Alternately, the table's height and width properties can be set explicitly. You may specify the value in pixels or as a percentage of the browser window width in the format <table width="0-100%">

The bgcolor property can be set with the <table> tag, the <tr> tag or the <td> tag: (view source)

HTML colors
Color Hex notation Color Hex notation Color Hex notation Color Hex notation
black #000000 white #FFFFFF red #FF0000 green #00FF00
blue #0000FF yellow #FFFF00 aqua #00FFFF violet #FF00FF

Bordercolor, frame and rules parameters can also be used to tweak the appearance of a table: (view source)

Bordercolor, Frame and Rules parameters
frame="box"
1 2 3
4 5 6
7 8 9
frame="above"
1 2 3
4 5 6
7 8 9
frame="below"
1 2 3
4 5 6
7 8 9
frame="hsides"
1 2 3
4 5 6
7 8 9
frame="lhs"
1 2 3
4 5 6
7 8 9
frame="rhs"
1 2 3
4 5 6
7 8 9
frame="vsides"
1 2 3
4 5 6
7 8 9
frame="void"
1 2 3
4 5 6
7 8 9
rules="all"
1 2 3
4 5 6
7 8 9
rules="rows"
1 2 3
4 5 6
7 8 9
rules="cols"
1 2 3
4 5 6
7 8 9
rules="none"
1 2 3
4 5 6
7 8 9

4.3 Formatting Pages

Tables can be used for far more than formatting a grid of information. Tables can be used to format an entire web page. Think of your web page as a newspaper page. It can be organized into rows, columns and cells exactly the way that you would like.

Before your can format a page, you need to be able to use the colspan and rowspan parameters. These parameters indicate that a cell will span more than one column or row. With these tools you can set up a table in any pattern you like: (view source)

Colspan and Rowspan
1x1 1x1 1x1 1x1 1x1
1x2 1x3
3x1 1x1 1x1 1x1 1x1
1x1 1x1 1x1 1x1
1x1 1x1 1x1 1x1

Another concept that is important to understand is nesting tables within tables. A web page may be thought of as a simple table, with more complicated tables within it.

The Main Table

Navigation links

  • link
  • link
  • link
  • link
  • link
  • link
HTML colors
Color Hex notation Color Hex notation Color Hex notation Color Hex notation
black #000000 white #FFFFFF red #FF0000 green #00FF00
blue #0000FF yellow #FFFF00 aqua #00FFFF violet #FF00FF

When using tables to organize a page, be sure to use comment lines and spacing to separate the sections of your code. Otherwise it will be difficult to locate the various areas of your page.