HTML and CSS Reference
In-Depth Information
As you can see from the screenshot, one problem with wrapping text around tables is
that HTML has no provision for creating margins that keep the text and the image from
jamming right up next to each other. That problem can be addressed by applying a mar-
gin to the table using CSS.
FIGURE 10.18
A table with text
alongside it.
10
As with images, you can use the line break element with the
clear
attribute to stop
wrapping text alongside a table. Centering tables is slightly more difficult. Most browsers
support the
align=“center”
attribute in
table
tags.
TIP
The CSS approach to flowing content around a table is to use the
float
property, as described in Lesson 7, “Formatting Text with
HTML and CSS.” So to align a table to the right and float content
around it, you could use a style declaration like this:
.sidetable { width: 300xp; float: right; margin: 15px; }
That makes the table 300 pixels wide, aligns it to the right, and
applies a 15 pixel margin to all four sides. To center a table on
the page, you can use a margin value of
auto
, as follows:
.centered { margin-left: auto; margin-right: auto; }
Cell Alignment
After you have your rows and cells in place inside your table and the table is properly
aligned on the page, you can align the data within each cell for the best effect, based on
what your table contains. Several options enable you to align the data within your cells
