Tables (Part 1)

Before the advent of CSS, most website layout was done using tables: even though the rendering of tables has traditionally be a source of annoying differences between the browsers, tables offer a very powerful way of controlling the layout of your pages. Now, though, most designers say that tables should only be used for the layout of tabular data and a combination of div tags and style rules (as discussed elsewhere on this site) should be used for the layout and positioning of page elements.

The table below shows a traditional use for this kind of layout (original data sourced from the Met Office).

Monthly Rainfall Across Scotland (mm)
Year
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
2006
109.1
85.2
137.0
107.9
117.0
74.9
70.5
96.6
149.2
195.9
240.8
262.2
2007
240.2
131.9
140.0
53.8
128.9
108.9
133.9
138.3
99.7
100.5
157.3
141.9
2008
275.6
160.6
165.5
97.5
29.6
110.1
108.9
167.6
105.8
242.2
140.3
133.5

This table has 13 columns and 4 rows, with the first row formatted as a header row. The colouring of the rows and sizing of text was added manually after the creation of the table. If you are used to working with tables in a word processor, Dreamweaver's tools will be very familiar to you.

Inserting a Table

As usual, Dreamweaver gives you a number of different ways of inserting a table into your page:

  1. From the Insert menu, select Table
  2. From the Common tab in the Insert toolbar, click on the Table icon
  3. Press Ctrl-Alt-T

Insert Table DialogAll three of these methods will bring up the insert table dialog shown on the right. The settings shown in this example are the ones used to create the rainfall table above.

The first part of the dialog specifies the initial size in terms of the number of Rows and Columns. However rows and columns can be added and deleted after the table has been created, if necessary.

The Table width can be specified as a percentage of its containing page element, or as an absolute measure in pixles. As this example is given as a percentage, it will resize as you resize your browser window. Try it!

The Border thickness specifies how thick the borders of the table will be drawn. If you specify a thickness of 0, then no border will be drawn.

The Cell padding and Cell spacing properties allow you to specify internal and external margins for the cells.

The second part of the dialog determines how any Header formatting should be applied. The settings are self explanatory. The rainfall table uses headers across the top of the table.

The final settings are for Accessibility. This example adds a Caption positioned (or Aligned) at the bottom of the table. No summary is provided. Note that if you do not specify these accessibility attributes when you create the table, you will need to edit in code view to add them later.

Modifying a Table

Once you have instered the table, it is possible to modify the properties of the whole table, a row or range of rows, a column or range of columns, or a cell or range of cells, depending on what you select. As you move the mouse around over a table in Dreamweaver, you will see the different selection possibilities.

Table PropertiesIf you select the whole table, then the properties window will be as shown on the right. This gives access to many of the properties specified when the table was created. The additional properties include its alignment on the page, and background and border colours. Notice the table icon on the left of the window, this shows that the whole table has been selected. This icon changes in response to the area of the table selected.

For example, if you select a row, the properties window looks like this:

Table Row PropertiesNotice the table icon on the left now shows that a row (or rows) has been selected. Notice also the inclusion of text formatting options to allow you to format the text in the rows.

The selection of columns or individual cells gives the same range of formatting options, with the table icon reflecting the type of table elements that have been selected.

Merging Cells

A very useful modification that can be made to a table is to merge some cells together. This is always the last thing that should be done to a table, as subsequently inserting or deleting rows, for example, can be very difficult once some cells have been merged. The example below shows the original table with a extra header row with merged cells.

Monthly Rainfall Across Scotland (mm)
Year
1st Quarter
2nd Quarter
3rd Quarter
4th Quarter
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
2006
109.1
85.2
137.0
107.9
117.0
74.9
70.5
96.6
149.2
195.9
240.8
262.2
2007
240.2
131.9
140.0
53.8
128.9
108.9
133.9
138.3
99.7
100.5
157.3
141.9
2008
275.6
160.6
165.5
97.5
29.6
110.1
108.9
167.6
105.8
242.2
140.3
133.5

The cell containing the word "Year" is composed of two cells merged together. These two cells are in the left-most cells in the first and second rows. Simiarly, each of the cells containing the "1st Quarter" etc, are composed of merging 3 cells together - in this case the 3 cells in the first row over the appropriate cells containing the month names in the second row.

Cell Merge ButtonMerging cells is done by selecting the adjacent cells that you wish you merge, and then clicking on the cell merge button in the Properties window, shown outlined in red in the figure on the right.

It is also possible to unmerge, or split, cells have previously been merged. This is done using the button adjacent to the merge button. This will ask you whether you wish to split the cell into rows or columns, and how many rows or columns you wish to create.

You should be careful when using these options as it is possible to quickly get a table into a mess which is very difficult to recover from.

Using Styles

Notice that the rows in the tables above have alternating colours to help with readability. On a small table, such as these examples, it is not much of an issue. However, on larger tables this kind of colouring can help a lot.

Of course you should use style rules to apply this kind of formatting. In these examples I have defined a rule called .tableRow which does nothing except specify a background colour. I then applied that rule to alternate rows in the tables. Using styles means that if I change my mind about which colour to use, I can simply change the rule definition, and all the rows will automatically change to reflect the updated rule.

For information about using styles, check here.

Further Reading

You can find more information about table layout on the following web pages:

And if you're ready for something a bit more advanced, the following article discusses using CSS to add style to your tables:

NextThe next page looks at using tables for layout, something I've already said is not a great idea...