| Web design - tables |
|
GENERAL
consistency
|
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.
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>
</td>
<td width=50>
</td>
<td width=400 valign=top align=left>
</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.
|