| Publish and Be... | |
|
...Tabular! |
The ALIGN= attribute, as used with <IMG tags, is also used with tables. However its effect depends on which table-building tag it's applied to. The CELLPADDING= and CELLSPACING= attributes introduce margins inside and between table cells.
Aligning a table against other
page content - the ALIGN= attribute on the <TABLE> tag.
 |
| The Royal Crescent, Bath's finest example of Georgian holiday-home building. Interestingly, these buildings often began life without kitchens, since their occupants were expected to dine out. Kitchens were added later, perhaps because the servants got hungry... |
A table is a floating container, and can be aligned against other page content just like an image. To make a table float, add an ALIGN=LEFT, ALIGN=CENTER or ALIGN=RIGHT attribute to its <TABLE> tag.
This table is left-aligned, allowing this text (and any other content, such as images and forms) to flow down its right-hand side.
Here's the HTML:
<table border="1" width="160px" align="left">
To see another example of using floating tables, click here.
Aligning content within table
cells - the ALIGN= attribute on the <TD>
tag.
When used in a <TD> (table cell)
tag, the ALIGN= attribute controls the way
the cell's contents are aligned within the cell. The options are LEFT,
CENTER and RIGHT. Below are
examples of the three options.
Hi! I'm left-aligned text, preceded by an inline image. |
Hi! I'm centred (or 'centered') text, preceded by an inline image. |
Hi! I'm right-aligned text, preceded by an inline image. |
| <td align="left"> | <td align="center"> | <td align="right"> |
Padding your cells.
No, a padded cell isn't a special container for really crazy content! Adding a CELLPADDING= attribute to a table introduces a margin inside the table's cells, between the gridlines (if any) and the content. The CELLPADDING= attribute can only be used with the <TABLE> tag (not individual <TD>s), and affects all the cells in the table.
Here's an example of the padding effect:
| Padding adds an internal margin to each cell. | |
| No padding - <TABLE> | |
| Padding adds an internal margin to each cell. | |
| <TABLE cellpadding="8"> | |
Spaced-out cells.
Cell spacing is similar to padding, the difference being that it adds gaps between the cell boundaries, rather than inside the cells. The CELLSPACING= attribute is used on the <TABLE> tag, and affects the whole table. Here's an example of the effect:
| Spacing adds margins between cells. | |
| No spacing - <TABLE> | |
| Spacing adds margins between cells. | |
| <TABLE cellspacing="8"> | |
.... and you can, of course, use cell padding and spacing together:
| Padding and spacing combined means plenty of space in your table!. | |
| <TABLE cellpadding="8" cellspacing="8"> | |