HTML and CSS Reference
In-Depth Information
FIGURE 13.2
Table-based
layout can be
very convoluted.
Tables for layout are problematic for a number of reasons. HTML purists argue against
tables on principle: The
<table>
tag is meant to identify data in rows and columns of
information and is not intended for page layout. Accessibility mavens will tell you that
screen readers employed by visually impaired users struggle with table layout.
Table-based layouts are often harder to maintain than CSS-based layouts, requiring
extensive rewriting of HTML tags to make simple changes. Later this lesson, you'll see
how a few CSS rules can easily move entire sections around without touching the HTML
document at all.
CSS-based layouts make it easier to maintain your HTML pages without cluttering them
up with
<tr>
and
<td>
tags and make for simpler transitions to new layouts by just
swapping in a new style sheet. Your web pages laid out with CSS will be smaller (and
thus load more quickly) than table-based pages. You can write web pages with the main
content first in the HTML source and the navigation and footer information after, making
your page more friendly to screen readers and search engines.
13
Writing HTML with Structure
The first step to laying out a page is to start with well-written HTML that is divided into
sections for styling. This is commonly done with
<div>
tags that have
id
attributes set on
them, corresponding to the different sections of the page.
