HTML and CSS Reference
In-Depth Information
Chapter 9
Page Layout with CSS
Over the last eight chapters you've become familiar with all the HTML elements you'll need to build your
own web pages. Along the way you've picked up a healthy dose of CSS, learning how to give your content
a bit more style and learning a few useful effects and techniques. Most of the CSS tips we've shown you
so far have been on a relatively small scale, styling individual elements or limited aspects of your content.
In this chapter we're finally going to tackle the bigger picture and show you a few ways you can use CSS
to lay out your web pages.
In years past, before CSS was widely supported or adopted, web designers used HTML tables to lay out
their pages (and many still do, sadly). As you saw in Chapter 7, a table forms a natural grid making it
relatively trivial to arrange content into aligned rows and columns. But that was never the intended purpose
of tables in HTML. Tables are for tabular data, where all the information in a row is related in some way,
and all the information in a column is related in another way. The intersection of a row and a column in a
table forms a single point of data combining the meaning of its row and its column. That's how tables work,
that's what tables are for, and that's how tables are read.
Using a table to create arbitrary rows and columns for purely presentational purposes is an abuse of the
element's natural function. It's equivalent to using the
blockquote
element to artificially indent content that
isn't a quotation at all—another crime many web designers committed before they learned CSS. A layout
table repurposes and misappropriates a browser's standard display of one element to achieve a visual
effect for a completely different kind of content. It's the epitome of presentational markup, using HTML only
for how it looks and completely ignoring what it means.
Layout tables also tend to require a lot of extraneous markup, enforce their own rules for how you order
your content, and can seriously hinder accessibility for people who use screen readers or use a keyboard
