« Q & A page
« tech pages
|
Q: How do I use style sheets instead of tables?
by Mike Slocombe
Q: I use style sheets a lot for text
formatting, but don't understand how to use them for tables. Can they
cover cell spacing and padding? What about defining the number of rows
and columns?
Steve Norris
A: Tables weren't designed as graphic page layout tools, although arty authors
have been using them for years, often employing time -honoured bodges like the 'invisible table trick' (www.killersites.com).
Style sheets promise to banish tables forever, giving you more control
over layout by separating presentation from content, and serving up a
more accessible site in the bargain. Here's an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>test</title>
<style type="text/css">
.leftcol {
background-color : #FFFF00;
left : 40px;
position : absolute;
top : 10px;
width : 100px;
}
</style>
</head>
<body>
<DIV class="leftcol">
Yo! A yellow 100 pixel wide column!
</DIV>
</body>
</html>
In this example, we've created a class called 'leftcol' in the style sheet. The DIV tag calls the leftcol class and creates a yellow box, 100 pixels wide, positioned 10 pixels from the top and 40 pixels
to the left of the page. Easy.
As ever, implementation of CSS is bedevilled by all manner of kray-zee Netscape/IE browser quirks and anomalies, so be sure to test your pages on as many different browsers and operating systems as possible.
More info: CSS layout templates
Jan 2004
|
