Pro HTML5 and CSS3 Design Patterns

CHAPTER 8 ■ POSITIONING: INDENTED, OFFSET, AND ALIGNED

Aligned and Offset Static Table

Problem You want to align a shrinkwrapped, stretched, or sized table without removing it from the
normal flow.

Solution The table is the only element in the normal flow that can shrinkwrap to fit the width of its
content or be sized to a specific width. Block elements can’t be shrinkwrapped to their width
unless they’re positioned or floated. Inline elements can’t be sized unless they’re positioned
or floated.
Because a table can be shrinkwrapped, sized, and stretched, it’s the most versatile element. It
can also be aligned to the left, right, or center while it’s shrinkwrapped or sized.
To align a table to the left, use margin-left:0 and margin-right:auto.
To align a table to the right, use margin-left:auto and margin-right:0.
To align a table to the center, use margin-left:auto and margin-right:auto.
To offset a table, change the margin to a nonzero value. A positive value offsets toward the
center, and a negative offsets away from the center.

HTML Pattern

CSS Patterns Left-aligned Shrinkwrapped Static Table
SELECTOR { position:static; width:auto; margin-left:0; margin-right:auto; }

Centered Shrinkwrapped Static Table

SELECTOR { position:static; width:auto; margin-left:auto; margin-right:auto; }

Right-aligned Shrinkwrapped Static Table

SELECTOR { position:static; width:auto; margin-left:auto; margin-right:0; }

Stretched Static Table

SELECTOR { position:static; width:100%; margin-left:0; margin-right:0; }

Left-aligned Sized Static Table

SELECTOR { position:static; width:+VALUE; margin-left:0; margin-right:auto; }

Centered Sized Static Table

SELECTOR { position:static; width:+VALUE; margin-left:auto; margin-right:auto; }

Right-aligned Sized Static Table

SELECTOR { position:static; width:+VALUE; margin-left:auto; margin-right:0; }

Location This pattern applies to table elements.

Related to Sized, Shrinkwrapped, Stretched (Chapter 5); Left Aligned, Left Offset, Right Aligned, Right
Offset, Center Aligned, Center Offset (Chapter 9); Table (Chapter 15)