Wrapping Text around a Table

You can wrap text around a table in much the same way you can with images. While there are more sophisticated layout techniques, wrapping text around a table is helpful for keeping images together with captions in a long flow of text.

To wrap text around a table with (X)HTML:

1.

In the table tag, either type align="left" to align the table to the left of the screen while the text flows to the right, or type align="right" to align the table to the right of the browser window while the text flows on the left side of the table (Figure 16.23). Figure 16.23. I've added some text that the table can float in. When you align a table to the right, the text flows to the left. Notice also that in the markup, the table comes before the text that flows around it.

2.

After the closing </table> tag, type the text that should flow around the table.

To wrap text around a table with CSS:

1.	Make sure you've specified the width of the table.
2.	Add float: right or float: left to the table's style rule (Figure 16.24). Figure 16.24. You must specify a width when using the float property. Note that the new text is green and I colored the caption black. Figure 16.25. Since the table is floated to the right, the text wraps around the left side.

Tips

• For more details about floating elements, see pages 96 and 181. For more details on controlling where elements float, see pages 98 and 182.

• The right and left values for the align attribute have been deprecated, though they continue to enjoy broad support.