| Publish and Be... |  |
 |
...Tabular! |
| Publish and Be... | |
|
...Tabular! |
Tables are floating containers, and can be aligned alongside flowing 'body' text just like images. This is a really easy way to create magazine-style 'boxouts' and captioned pictures which flow with the page's main content.
Tables can be captioned!
A table-defining code block can include a <CAPTION>...</CAPTION> tag pair. Whatever you put in between these tags is displayed above or below the table, and flows with it. The picture above is contained in a single-cell table (nested inside this one). Here's the HTML code for the single-cell table: <table border="1"> |
Tables defined with align=left and align=right attributes behave just like similarly-equipped <IMG.. tags. The table on the right has an align=right attribute, which places it on the right-hand side of the page, with this 'body' text (and any other content) flowing down its side.
You can't do this with other general-purpose containers such as DIVs and SPANs, and unlike Dynamic HTML techniques, tables work with browser versions going right back to NetScape Navigator 1.1. One up to the humble table!
Here's the HTML to define the floating table on the right:
<table border="1" align="right"
width="250"
bgcolor="#C6FEFF"
cellpadding="4">
<tr>
<td>
.... Contents of right-aligned table
(including
a nested, captioned table
- see
boxout!)
</td>
</tr>
</table>
Just like a right-aligned <IMG> tag, a right-aligned <TABLE> tag is
placed in front of the text (and any other content) to the right of which it's going to
float. If you view the source code of this document, you'll see that the HTML to define
the table and its contents comes immediately before the body text beginning "Tables
defined with align=left and align=right attributes..."
