Do you find this website helpful?
Help us by making a donation.
All donations go back to promote ebay stores.


Cash Register, POS, Credit Card Printer Ink Ribbons



Tables with multiple cells:

Multiple cells, cell spacing, cell padding, content alignment.


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.

Cell A Cell B

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:


Cell A Cell B

And here is the code for the above table.

<center><table border="1" cellpadding="0" cellspacing="0" bordercolor="#111111" width="90%">
<td width="50%" align="center" valign="top">Cell A</td>
<td width="50%" align="left" valign="top" bgcolor="#C0C0C0">Cell B</td>

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--->




Home | HTML Tutorials | HTML Editor | Templates |  Resources | E-mail
 Copyright 2004 - 2008 xample.net


More help sites

Need Help?


Lesley Feeney