HTML and CSS Reference
In-Depth Information
Tables have long been used in web design to lay out a web page. However, this misuse of
<table>
markup introduces a plethora of complications, from accessibility concerns to
complexity problems. Using CSS for layout can clean up your HTML code and produce
flexible designs that can be updated easily to new styles.
Laying out a page with CSS starts with adding sections to the HTML, using
<div>
s with
ID selectors. These are then arranged in vertical columns, through the use of either posi-
tioning rules or the
float
property. With CSS layouts, it's not difficult to reorder and
reshape the page simply by changing the style sheet.
The workshop contains a Q&A section, quiz questions, and activities to help reinforce
what you've learned in this lesson. If you get stuck, the answers to the quiz can be found
after the questions.
Q&A
Q Is it ever okay to use tables for layout?
A
Never, ever, ever! Well, almost. CSS layouts generally are more efficient and ver-
satile than
<table>
-based code, but if you are careful to test your layout tables in a
browser such as Lynx to make sure that the site is usable without tables, you can
probably get away with it. Tables aren't awful for laying out a page, and CSS can
be tricky when you're dealing with grid-based designs. In general, though, you're
better off using CSS whenever you can.
Q Which are better measurements for layouts, pixels or percentages?
A
Some web designers, especially those from a print background or who have picky
clients to please, swear by pixels. With some patience, you can get close to pixel-
perfect designs in CSS. Other designers like percentage measurements, which scale
with the size of the text window. There's no clear-cut advantage to any approach,
however; all have their pros and cons. You can experiment with a variety of mea-
surement types, and don't be afraid to mix and match them sensibly on your site—
for example, designating column widths in percentages but also setting pixel-based
min-width
and
max-width
values.
