A Complete Guide to Web Design

Basic Table Structure 177

Tables

Basic Table Structure

Web Design in a Nutshell, eMatter Edition

The HTML 4.0 Specification proposal discourages the use of tables for page layout,
favoring Cascading Style Sheets with absolute positioning instead. But until style
sheets are more universally and consistently supported by the browsers in current
use, tables remain a designer’s most reliable tool for constructing complex page
layouts.

Basic Table Structure

At their most basic, tables are made up cells, arranged into rows and columns.
You can control display characteristics for the whole table level, the row level, and
for individual cells (there are currently no supported methods for controlling
columns as a group).

Rows and Cells

The bare minimum tags for describing a table are

. The
following HTML shows the basic structure for a four-cell table:

Text Alignment

Tables are often used to clean up the

display of text by creating effects

common to print, such as columns,

hanging indents, and extra white

space.

Page Template

Many web designers use a large table

as a container to give structure to a

page. One common configuration is to

create narrow columns for navigational

items as shown in this example. A

template for a two-column table

follows in the “Templates” section of

this chapter.

Multipart Image Container

Tables can be used to hold together a

large graphic that has been divided

into separate sections to accommodate

animations, rollovers, etc. In the

example at right, the border was

turned on to reveal the individual

sections. Holding images together with

tables is discussed at the end of this

chapter.

Table Usage Illustration

A Complete Guide to Web Design

Get our desktop app

Company

Features

Documentation

Resources