Page Layout Using Tables vs CSS

Page Layout Using Tables vs CSS

Today I’m using Dreamweaver to demonstrate how site layout used to be done using complex nested tables versus today where we use cascading style sheets. I started creating websites in the late 1990s and back then you didn’t have cascading style sheets to work with.

You had a very limited version of html and really the alignment choices you had in html were limited to…and I’m going to show you here we have Seamus and he’s left, right, or center. Now the original web pages were kind of ugly because most of the original pages were created by programmers because to create a webpage you had to learn to hand-code.

We first started getting WYSIWYG — What You See Is What You Get — tools in the late 1990s. Back in 1997, my favorite was Word 1997 which did great html for the time; I would not use Word today. Now having a limit of left, right, and center made for some kind of boring webpages.

Designers soon figured out that you could misuse tables to handle your design because instead of having left, right, or center — and you’ll see here I’ll actually take this table out — I’ve got a table here and I’ve merged a couple of styles (this is two merged styles) so this is where my logo go, this is where my Masthead would go, advertisements would typically go over here in this column, and this is all in a basic table.

I’ve combined a couple of columns here and combined a couple of rows here, but really I have a pretty sample table structure which could be the basic layout for a site. And the next thing is let’s say I move Seamus into here, Seamus can be aligned here left, center or right into a smaller space. Or I could further define where he was going to be by inserting another table and it could be something complex or it could be something simple.

We could do one row with 2 columns and left, right, or center in those 2 columns gets you a lot further. So you would be able to break down your site… Well let’s do a quick preview here — yeah, yeah, whatever. And I’ve left the borders in here to show you how it really works, but then our site design would be done with tables and typically you would actually set the border to zero.

And I only have 2 tables in here so it shouldn’t be taking long to find both of them, and here’s the other one and a border to zero and viola, you have a page design which is effective at doing page layout and it did a good job.

The problem is that it got really complex. If you went more than nesting one table inside the cell of another table because you could really keep doing this to infinity, so we could keep inserting table inside of table inside a cell of another table, so we could keep inserting tables inside the cells of other tables and that would make our code quickly get kind of ugly.

More importantly it didn’t work as soon as we became more ADA complaint and browsers for the blind that would read to them, it wouldn’t…all the table structure would get in the way. So what we’ve moved to is using a CSS layout because when you do CSS, you separate the style from the content. So while the style is actually a little more complicated in some ways in the table, you only have to write them once because with the CSS styles, you can put them on one external page, link to it, and it can format 3, 300, or 3,000 pages.

So it is…since you only have to do it once, it is more effective, it takes less time to download, and it makes pages faster to load. Plus if you look at the code here, we have all of the styles for the whole thing is up here at the top and this was done by Dreamweaver.

Well once the styles are over and those styles could format all of the pages in your site, then this is all of our content and its separate and it has multiple advantages. For instance; it’s better for ADA which is really a key responsibility of a designer; you have to be ADA complaint.

You have to make things accessible to people with disabilities; you must. It’s the legal requirement, especially if you’re working on a website that is in any way funded by the government.

Secondly, by separating the style from the content, you can use JavaScript and you can detect if your page is being accessed by a cell phone, a tablet, a desktop, a laptop; you can know how big your screen size is. You can pick a different style sheet or re-flow your styles according to the device that’s accessing it. It is something you could not do with tables. So why am I teaching your table layout? Well because table layout really started to go away around the mid…around 2005, 2006.

There are a lot of websites out there that have been around a long time that still exist in that table format. There’s a good chance you may have to take something that’s in an existing table structure and bring it into CSS styles. So that’s why we do one really basic table layout so you can see how it worked.

That way if you ever run into it, you know what you’re looking at and you can figure out how the style structure is arranged, bring in div’s to replace them, and you can style it correctly in CSS. So I do teach you how to make a table-based site but I don’t want you to do it professionally.

Ideally you use CSS for everything. But I want you to know what you’re looking at if you ever run into one of them because websites were designed that way for over a decade.

Leave a Comment