Wendy Piersall of eMomsAtHome.com has launched her second
“How To” Group Research Project, where she invites her readers to contribute
“How To” articles across a wide range of blogging, web development,
entrepreneurship and internet marketing topics and awards prizes for the top
articles.
I was in the midst of wrapping up school during the first
one, but this time around I’m jumping in on beginning CSS! I’m sharing the topic with Lucy Nixon of
WebLucent.com; she’ll guide you through the "What is CSS?" phase and font formatting techniques, and I’m
giving you the rundown on how to build a table-free three-column page layout
with CSS! (Lucy's article focuses on WordPress users. Aside from the mechanics of using the WP interface, the CSS info is the same for everyone regardless of platform.)
In a rush? Download the final CSS and sample HTML.
Why Use CSS?
For several years, web designers relied on tables to create their columns and hold things like images in their proper places. Today, many still do. In some ways, tables are very intuitive to use—they stretch when they need to, and they keep items aligned in neat rows, columns, and grids.
So why use CSS instead? The tables method has some drawbacks:
- Mistakes are tricky to catch. Forget a closing <td> or <tr> and you can get very strange results. Additionally, when your entire page relies on a table to hold it together, unrelated parts of the page can have a major impact on each other. For me, the most frustrating of these was the tendency for a sliced-image heading to fall apart because something further down the page was a couple of pixels too wide.
- The code is ungainly and tedious to work with. Tables-based layouts can get very, very messy. In the old days, it was very easy to end up with 6 or 7 levels of tables nested within each other. (In other words, a cell of the outside table would contain a smaller table, which had another smaller table within one of its cells, and so on.) This made it very tedious to find the part of the page you needed to edit, make your edit, and then ensure that your change did not affect the numerous other tables that came into contact with that part of the page. Furthermore, if you didn’t have a CMS or includes, layout changes had to be made on every single page. With CSS layouts, the CSS file controls the positioning on all the pages, making it fast and easy to reposition something.
- File sizes are bigger. The same page layout can result in a file 3 to 7 times, or more, if it is done with tables instead of CSS. Additionally, once the CSS file is loaded and cached, the formatting for the layout does not need to be loaded again. An extra 15 or 20 kilobytes doesn’t sound like much in today’s broadband, multimedia-heavy environment, but if you run a high-traffic site, it can chip away at your bandwidth resources; if you have mobile users, every kilobyte counts when you’re sending it over the often-sluggish mobile networks.
- It’s not very accessible. Alternative devices, like screen readers, expect a table to hold tabular data, not align your navigation next to your text. They use this assumption to decide how to read a page. If your content is all in tables, the sequencing can become garbled and difficult to follow for someone using such a device.
So that’s the why and wherefore of CSS vs. tables. Hopefully, that’s enough motivation for you to learn a new trick or two. If you’re ready to bring your layouts into the 21st century, read on…
Upon finishing school, I relocated to Manhattan. My cell phone, however, still thinks I live in Rochester. As I am getting things started for my business, I decided it was time for a Manhattan number so I can get my new cards printed and put it on my website (currently under development). Last time I changed my number (a landline), they just ran a little recording saying "This number has been changed to....." Simple transition, right? I was especially hopeful since my provider claims a mysterious service called "EZ Move"...
