http://www.chrispearson.org/pages/programming/html/LayoutTables/tablelayout02.asp
20h07
Monday, 1. December 2008
I
wouldn't claim that using tables will solve every layout
problem on every page on every web site. But a very wide
variety of designs can be deployed using tables, producing
a
highly-controllable,
predictable, relative layout that will resize and re-arrange
itself to fit a user's browser window.
I
guess I should just repeat that the W3C - World Wide
Web Consortium - recommendation is to use CSS
style sheets (see the
link
below and discussion
at www.w3.org) but
that doesn't allow for users who haven't kept up with
browser technologies. Your choice
is between being pedantic (but ultimately right!) and
creating a web page that works . . . |
| Designing
with tables |
|
|
| To
see what I mean about resizing at its simplest level, click
on the image to the right and - once the page has loaded
- resize the window in various way and maximise it to demonstrate
how a simple, single-celled table adapts to the window
size. Looks
like a fair start! Let's
take a look at the properties of HTML tables, to see
what it is that we have to work with.
|
|
 |
 |
There
are often several ways to achieve the same result in HTML:
The two important criteria are to get the result you're
after and to post valid HTML. (Once you're happy with the
way a page looks, try validating it at http://validator.w3.org/) |
The
images for the first two examples are simple transparent
GIFs, the red colour is the background to the cell containing
the image.
The only difference in the page of example 1, above, which
resizes and the one below - which doesn't - it the presence
or absence of the table's width property. Click on the
non-resizable example, try resizing its window then look
at the code below. |
 |
|
SOME
BACKGROUND ON <table>
This link reviews
the valid attributes of a <table> tag
and looks at the issues of using tables as a layout aid |
| Resizable example |
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle">
<img src="Example01.gif" width="300" height="60" />
</td>
</tr>
</table>
|
| |
Non-resizable example |
| |
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle">
<img src="Example01.gif" width="300" height="60" />
< /td>
</tr>
</table> |
|
|
|
|
copyright ©2000
-
2008 Chris Pearson
