Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

Aligning Your Table Content 263

10

Table Alignment

By default, tables are displayed on a line by themselves along the left side of the page,
with any text above or below the table. However, you can use the float style property
to float tables along the left or right margins and wrap text alongside them the same way
you can with images.

float: left; aligns the table along the left margin, and all text following that table is
wrapped in the space between that table and the right side of the page. float: right;
does the same thing, with the table aligned to the right side of the page.

In the example shown in Figure 10.16, a table that spans 70% of the width of the page is
aligned to the left with the following code:

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 jam-
ming right up next to each other. That problem can be addressed by applying a margin to
the table using CSS.

As with images, you can use the line break element with the clear attribute to stop wrap-
ping text alongside a table. Centering tables is slightly more difficult. Instead of using the
float property, you need to set the margin-right and margin-left properties to auto.
As long as the table has an explicit width set, it will be positioned in the center of the
screen horizontally:

FIGURE 10.16
A table with text
alongside it.