weballey logo
 
left Web design - tables backnext right
homesearchsite mape-mail
GENERAL

APPROACH

BANDWIDTH

LAYOUT

consistency
layout
< HTML tables >
style sheets
frames
navigation
linking

GRAPHICS

      The layout of a page mostly consists of blocks. Blocks like images, pieces of text, menu's etc. In between you'll put margins, mostly horizontal or vertical areas of white. To acquire an overall consistency in the site, everything should have its own spot on a page. The width of columns should be the same on the entire page. Normally this width will vary with the size of your browser window.
    These things can be arranged quite well with the TABLE function. This HTML tag was originally intended to display for example financial data in tables, like a spreadsheet. In its plain form the HTML table is very flexible. It will adapt to anything you put inside it. Its lines and borders are clearly visible in older browsers.

Company Earnings 1996
period earnings (mln $) profits (mln $)
1st quarter 10.240 234
2nd quarter 23.180 430
3rd quarter 13.300 321
4th quarter 18.490 -/-143

Fig: a simple table

    You can adapt the table to your every wish. Columns may be wider and smaller, alignment may be specified. This way you get fixed margins and regular columns with a constant width. Lines can be made invisible. These properties make a table very useful for setting up the layout of your page. The pages on this site are made with the table below. The necessary HTML code is displayed inside the table. The lines will disappear if you specify 'border=0'.
 

   

<table WIDTH=575 border=1>
  <tr>
  <td width=150 valign=top>
    &nbsp;
  </td>
  <td width=50>
    &nbsp;
  </td>
  <td width=400 valign=top align=left>
    &nbsp;
  </td>
  </tr>
</table>

    Fig: table used for page layout

    This 'improper' use of the table makes it possible to make a fixed layout. If you show the lines by specifying 'border=1', it will be clearer if your text will be in the desired place. Also you can more easily spot errors in your table code. Be very carefull, errors in the code may render your whole page invisible in your browser. After finishing your page you turn off the lines by setting the border width to zero.
    Of course you can do a lot more with tables. A lot of 'design elements' on this site are done with them. The menu bar on the left side, the title block on top and even the main link bar below it. No graphics at all for the main page layout. If you're unfamiliar with the HTML needed for these tables, you may want to have a look at my tables tutorial. This will teach you everything you need to know to control your page layout.

bottom  
left Copyright © Gerben Hoekstra - All rights reserved backnext right