Page Layout: Tables
Tables also were not designed for layout per se (they were designed for
representing tabular data) but their layout properties are less of a
"side effect" than the above methods; they are fairly flexible but do
take some effort to master, and complicate your HTML code.
|
Suppose you want to create
margins.
There are various ways to do that
with tables, e.g.
|
<table><tr>
<th><table width=50><tr><th></th></tr></table></th>
<td>
Suppose you want to create
<a href="/Authoring/Style/Sheets/Margins/">margins</a>.
There are various ways to do that
with tables, e.g.
</td>
</tr></table>
|
Use of the empty table in the first column ensures that the HTML
validates under most if not all DTDs; explicit widths for columns is
not supported under the latest versions.
View the source of this page for another way.
|
Tables can also be used to create columnar layout as illustrated here.
Note that you need to make use of cellpadding to keep the columns from
colliding with each other.
|
You will usually need to experiment a lot to create the effect you
want. Often, you may find it better to change your ambitions rather
than insist on exactly your original conception. Flexibility and a
willingness to explore the design and solution spaces for simple
compromises will often get you much further than a stubborn insistance
on "what I want..".
<center>
<table width="85%" cellpadding=12>
<tr>
<th><Img src="/Icons/smile.gif" alt="Yes!"></th>
<th width=100> </th>
<th><Img src="/Icons/mr_yuk.gif" alt="No!"></th>
</tr></table>
</center>
Tables can be good for placing images relative to each other within the
browser window. Occasionally you will notice that browsers don't do
exactly what you thought you told them. Well, you should
realise that values in HTML attributes are usually only treated as
hints to the browser, which may have several other constraints to
satisfy.
Graphics-intensive tables can take a considerable time to download and
render. There are quite a few major sites whose download time suggests
that the designers have not tested with slower modems and computers.
The muscles controlling the eyes during reading, i.e. scanning left to
right (or vice versa) tire sooner when the angle subtended by the text
being read exceeds a certain threshold. This typically corresponds to a
few inches of text such as normally found in books and other printed
media. Browser windows are usually open to a much greater width.
So for text-heavy pages it's less strenuous to read if the text is
constrained to a few inches width. This can be done using
columns or margins, using
tables.
Page Layout: Hacks
Page Layout, Margins, Indenting, and Columns
Page Layout: Style Sheets
|
