Questions? Feedback? powered by Olark live chat software

Designing tables

The following article provides advice and examples for improving the design of HTML "Table layouts"

The standard HTML table design is very basic and common. It features a 3 pixel 3D grey border.

Example of a Standard table design:
Code Colour Options Price
 ZX123  Dark blue  $40.00
 ZX124  Red $46.00
 ZX125  Green  $38.00

Some Ideas for improving the standard table layout as follows...

Coloured header
Code Colour Options Price
 ZX123  Dark blue  $40.00
 ZX124  Red $46.00
 ZX125  Green  $38.00

Coloured table background with white outlines
Code Colour Options Price
 ZX123  Dark blue  $40.00
 ZX124  Red $46.00
 ZX125  Green  $38.00
Cell padding = 1
Border size= 0
Background colour = grey


Setting table widths

This a common problem to have a table hanging out the side of the design. This is due to the table width being too wide and extending outside the set website design. This means users are likely to have to scroll horizontally, not to mention breaks the design.

The problems with a pixel width table setting:
  1. It is not easy to relocate tables in different areas of your site with different dimensions. IE. if you want the same table to display in your left hand column this will not work. Or you later decide to relocate to your left hand column.
  2. You may wish to change the layout of your website in the future. I.e a design change which means the table dimensions no longer fit your website design. You will need to go back and reset the dimensions. If the widths is a % based width it will do this automatically.
To ensure that this does not happen to you. or to fix the problem. you should always set your table widths in %.
  1. This means the global table properties should be set to 100% - "Right click on the table "Table properties"
  2. The total % width of each column in your table adds to 100%. For example a 2column table should add to 100 %, so 80:20 or 50:50 or 70:30. - "Right click cell properties" You might need to do this for every cell in the column. You can edit all the cells in a column at once by selecting all the cells.
Important note. You should always avoid dragging the table columns to set a size as this will automatically reset your table to be in pixels.