Pro HTML5 and CSS3 Design Patterns

CHAPTER 8 ■ POSITIONING: INDENTED, OFFSET, AND ALIGNED

Aligned and Offset Static Table

HTML

<h1>Aligned Static Table</h1>

<div class="parent">

<table class="l-wrap"><tr><td>Left-aligned Shrinkwrapped Table</td></tr></table>

<table class="c-wrap"><tr><td>Centered Shrinkwrapped Table</td></tr></table>

<table class="r-wrap"><tr><td>Right-offset Shrinkwrapped Table</td></tr></table>

<table class="stretched"><tr><td>Stretched Table</td></tr></table>

<table class="r-sized"><tr><td>Right-aligned Sized Table</td></tr></table>

<table class="c-sized"><tr><td>Centered Sized Table</td></tr></table>

<table class="l-sized"><tr><td>Left-offset Sized Table</td></tr></table>

</div>

CSS

.l-wrap { width:auto; margin-left:0; margin-right:auto; } .c-wrap { width:auto; margin-

left:auto; margin-right:auto;} .r-wrap { width:auto; margin-left:auto; margin-right:20px; }

.stretched { width:100%; margin-left:0; margin-right:0; }

.r-sized { width:350px; margin-left:auto; margin-right:0; text-align:right; } .c-sized {

width:350px; margin-left:auto; margin-right:auto; text-align:center; } .l-sized { width:350px;

margin-left:20px; margin-right:auto; text-align:left; }

/* Nonessential rules are not shown. */