The Move from Tables to CSS in Web Development - dummies

The Move from Tables to CSS in Web Development

By Kathleen Taylor, Bud E. Smith

There’s a big part of web development history that younger web developers missed out on: the use of tables. Modern web pages use Cascading Style Sheets (CSS) to lay out web pages in a sensible fashion.

However, there are still a fair number of web pages out there based on tables. A lot of war stories from older colleagues still revolve around struggles with tables too, so it’s worth understanding a little bit about how the old way worked.

The original idea for HTML tables was to put a simple table in a document, like the box score for a baseball game. The column headers were in the top row — Inning, the numbers 1-9, and the letters R (for Runs), H (for Hits), and E (for Errors). There’s one row for each team: one for the Cyans, and another row for the Magentas. HTML includes tags to specify all of these elements, and they were used in early web pages for displaying information in table form.

However, web developers were frustrated by the way that HTML text and embedded graphics tend to just flow in one big column. They wanted — actually, they needed — narrow columns on the left or the right, with an area for text in the middle. They needed to specify areas for ads to appear, controlled by a separate server, and then linked into a specific spot on the web page.

And so tables started to be used to contain the entire contents of web pages. But you can imagine the problems that ensued. Tables weren’t at all precise, and they behaved differently in different browsers. And, as browsers were updated every couple of months, pages that used to work across all (or most) browsers would suddenly stop working in all (or most) browsers.

This lasted through most of the 1990s, as web publishers tried to do more and more with web pages, and ran up more and more often against the problems and limitations of tables. So Cascading Style Sheets, when they came along, were greatly welcomed. CSS provides a way to lay out web pages in an organized and intentional format.

However, it took CSS several years to settle down as well. But that’s another story.