CSS, tables, development, wine down main street

When developing a web site,  there are two primary ways to incorporate the design with the other content of the site: use tables, or create classes through CSS. There are lots of people out there who like to debate about the benefits and drawbacks of each by noting page loading times, site maintenance and ease of use. However, they both have their place.

First, let’s start with a couple of definitions. Tables are sets of columns and rows (think Excel) where each table cell can hold content, or another table. CSS, or cascading style sheets, consist of a list of rules to hold content in place, where “div” tags usually hold the bulk of the content.

Tables can get cumbersome and the actual HTML of a page can get ugly pretty quickly. When you have three nested tables, it’s hard to know which way is up when you add more content to the site. Tables were originally created for tabular data, and still work very well to keep tabular data in its place. For me, tables are the down and dirty way to get things done. However, because of the structure of tables, updating a site can become a bear.

Styling content using CSS does look cleaner. Code isn’t as long. This small difference doesn’t make a lot of difference to the end user, but the outcome is often cleaner. It can also make updating content a lot easier in the long run.

Enter Wine Down Main Street. We update this site each year with the new wines, tasting stations and participating restaurants. Up until now, these pages have all been built in tables. To keep everything in alphabetical order, when a new item was added to any of these pages, every table cell after the one added had to be moved. This made changes to the site tedious.

This year, I decided to make a little change since I am the one who gets to make all the updates. The three pages above are now controlled by div tags in a CSS. This makes adding new wines, restaurants and tasting stations a breeze. Instead of moving each cell down with each addition, I just insert one line of code that adds another div to the list and everything else adjusts accordingly.

There are some types of content where tables make more sense, but I’m so thankful for div tags and style sheets on Wine Down Main Street! That wine will taste smell sweeter this year to me!