A Complete Guide to Web Design

Affecting Table Appearance 183

Tables

Affecting Table Appearance

Web Design in a Nutshell, eMatter Edition

Even if you don’t want a table to display with a border in your final design,
turning the border on during the design process can help in visualizing the table
structure; it is particularly useful for debugging problematic tables. Just remember
to turn it off again before uploading.

Positioning a Table on the Page

On current browsers (Navigator and IE versions 3.0 and higher), tables behave the
same as images when it comes to placing them in the flow of the page. Use the
alignattribute in the

tag to position the table against the left or right
margin and allow text to flow around it. Like images, you can specify a number of
pixels to hold clear to the left and right of the table using thehspaceattribute.
vspace holds space above and below the table.

Centering tables

The 4.0 browsers allow you to center a table on the page by setting thealign
attribute to equalcenter. Unlike left or right margin alignments, this setting does
not allow text to flow around the table.

Because this attribute is not universally supported, it is best to center a table using
HTML tags outside the table, such as

or

.

Aligning Text in Cells

By default, the text (or any element) in a data cell will be positioned flush left and
centered vertically within the available height of the cell, as shown in Figure 10-7.

Table header text (

tag affect all the table cells
(

) is generally displayed in bold text centered horizontally and vertically in the cell. You can override these defaults by using thealignand valign attributes at either the row or cell level. Row Settings Alignment settings specified within the
or	) within that row. This makes it easy to apply alignment changes across multiple cells. Figure 10-7: Default placement of data within a cell. Free download pdf Get our desktop app Company About Contact News Features Quick Start Desktop Editor Documentation Support Pricing Resources Tutorial Your Account Privacy & Policy / Terms © ISSUHUB. 2025. All rights reserved.