With multiple cell tables we can place anything anywhere on a
page. I always have a sketch or a pretty good idea of
what the layout will be, it's far easier to build from scratch than
to modify a table.
Cell spacing:
Cell spacing is the amount of space (in pixels) between cells, I
never use cell spacing.
Cell padding:
Cellpadding is the amount of space (in pixels) inside a cell from
the border. I use cell padding to keep the text away from a
border.
Cell spacing and cell padding are defined for the entire table and
not each individual cell.
The table above is set to, cell padding = 10 pixels, this is the
space from the cell border into where the content is. This
table also has cell spacing set to 10 pixels, that is the area
between cells.
Table alignment:
A table can be aligned, <center><right> by default it will align
left. There are other ways to align tables but for now we will
stick to the basics.
Cell content alignment:
We have more control of the contents within a cell than we do for an
entire table. We can horizontally align the contents with,
align="left", align="center", align="right. We can also align
vertically with, valign="top", valign="middle", valign="bottom".
There are more ways to align within a cell but these are the basic
alignments.
Two cell table:
And here is the code for the above table.
<center><table border="1" cellpadding="0" cellspacing="0"
bordercolor="#111111" width="90%">
<tr>
<td width="50%" align="center" valign="top">Cell A</td>
<td width="50%" align="left" valign="top" bgcolor="#C0C0C0">Cell
B</td>
</tr>
</table>
</center>
The table is <center> aligned on the page, has a table border of 1
pixel, cellpadding is 0 pixels, cellspacing is 0 pixels, bordercolor
of hex #111111 (black) and has a width of 90% of available space.
If this table were put on a blank HTML document it would cover 90%
horizontally of the viewers screen, but because this table is inside
of a cell on this page it can only occupy 90% of the cell width,
it's a nested table on this page, more about nested tables later.
<tr> first row of cells.
<td> first cell (cell A) has a width of 50% of the entire table,
contents of cell A are horizontally align= center, vertically
aligned, valign=top, data, close table data </td> this is the end of
cell A.
<td> second cell (cell B) has a width of 50% of the entire table,
contents of cell B are horizontally align= left. vertically aligned,
valign=top, and a background color of hex #C0C0C0, data, close table
data </td>.
Since this is also the end of the table row we close the table row
</tr>. There is only one table row so we close the table
</table> then we close the center tag </center>.
Clear as mud?
Vertical sizing:
Generally defining the vertical (height) is not necessary, tables
and cell will stretch to accommodate the contents. Lets
take a look at how it will stretch.
Cell A
See what happens
as we add
more content?
This cell grows to accommodate the new data but also as you
can see cell B is growing. All cells within the table
row will grow.
|
Cell B |
So, as you can see from the above example, planning is critical if
you want your layout to look nice.
If you understand the above two cell table then you understand
tables. All we have to do is add more table rows (<tr> or more
tables to get the desired look.
Multiple tables on a page and tables within cells (nested tables)
next.
Multiple tables, nested tables--->
Tozo
5-13-2003
|
