Are Tables Really Totally Obsolete?

Get Started
1

Hi all,

I put a site I’m building up for review and got this comment:

:frowning: Don’t use layout tables … I am no designer by any means but I know it is a big nono to use tables for layouts on the web nowadays.

I understand Table-less CSS layouts are the new approach, but is it really a “big nono” to still use tables? I’m not aware that the W3C is going to phase out recognition of that coding or anything.

(I want my next project to be table-less, but this particular one is being billed “by the job”. Does it makes sense to still use tables sometimes if that’s what you’re used to and can do faster?)

2

Tables aren’t going to be phased out, because tables have great uses - displaying a grid of data, for example.

However, using them for design is like using a pile of books with a torch on top for a lamppost. It does the job, but there are large drawbacks.

I think, as long as you learn how to write semantic HTML/CSS without tables etc, you can continue using tables on your current project. Whilst it is almost forbidden in the 21st century, redoing everything is just going to waste your time.

1 Like
3

Tables are not obsolete. They have perfectly valid use in marking up naturally tabular content. If you have tabular content then a table is not only the right way to mark it up, but the only right way to mark it up.

BUT tables for layout of the pages major elements, that’s obsolete. It is more than obsolete it is an abomination.

If the difference between these two things is not clear to you, then you need to upgrade your understanding and skills around the use of html/css right away.

4

Well… crap.

I imagine “abomination” is putting it a bit strongly, but I get your points.

Actually, since I have this site basically built and “figured out”, it may be good to at least try to rebuild it with CSS and make that my learning project. (I did take a class in table-less CSS design, but you know how it is: if you don’t implement what you’ve learned right away, you forget it all.)

I do have notes though, and access to copious online info such as this site. If y’all have gone through that transition yourselves, please point me to any favorite sites to help with that! :cool:

5

Which was why I put it strongly.

Actually, since I have this site basically built and “figured out”, it may be good to at least try to rebuild it with CSS and make that my learning project. (I did take a class in table-less CSS design, but you know how it is: if you don’t implement what you’ve learned right away, you forget it all.)
Why would you go to all the trouble of taking such a course, and presumably studying the concepts to pass it, and then not apply that knowledge? I mean it’s your life to waste if you really want to of course, but why waste it that way when you could have been having fun?

I disagree with re-building an old site to learn CSS. Better to start right from the ground up with the new methods of semantic html as a foundation. Even if you get rid of the tables you likely won’t have a semantically well designed site and so CSS will just frustrate you and you won’t learn much. You’ll probably just replace table cells with divs, which would be equally bad.

If you are going to change your approach to page design you should change it all the way to the right methods.

If you don’t get what I mean by “semantic” markup you should stop right there and go and relearn you’re whole approach to code writing. Otherwise you’ll just be wasting a lot of time for little return.

6

There are two types of tables so far as web pages are concerned.

HTML tables consist of <table><thead><colspan><tr><th><td> tags etc to define tabular data that appears in yur web page.

CSS tables consist of display:table, display:table-row, and display:table-cell etc are intended to be used to control the layout of part of your web page where you want that part of the page to be laid out as if it were in a table. This is the modern equivalent to the way HTML tables used to be used for doing page layout. The only problem with using this method to lay out the page is that it doesn’t work in Internet Explorer 7 and earlier.

Both types of table are valid if used for the purpose for which they are intended.

7

I see. I probably misstated my question; what I meant to say was “Are table-based web layouts really obsolete?” But you guys have been nice and clear with your answers.

I don’t know what the backgrounds of the SitePoint Gurus/Evangelists are (CS degrees, lots of programming, etc…)
Me, I was an art major in college (graduated '92—obviously pre-www) and originally a print designer.
I was trained in web design exclusively via HTML coding: I went for a year coding web pages at work with the ColdFusion Code View — never any WYSIWYG editor. (We did use CSS files for type styling; this was around 2001.)

So thank you, Jake and Felgall, for your nicely-worded advice. :cool:

And pardon the hell out of me, Ed.

8

All you need to become a good web developer is motivation to learn. The rest comes with experience :slight_smile:

The first habit you need to get out of when designing using CSS rather than tables is thinking about the design when writing up the HTML.

With table-based design you have to think about what is going where. An example could be:


<table>
    <tr>
        <td colspan=3>Your Site Title</td>
    </tr>
   <tr>
        <td>
            <table>
                <tr><td><a  href="/">Home</a></td></tr>
                <tr><td><a  href="/">About</a></td></tr>
                <tr><td><a  href="/">Etc</a></td></tr>
            </table>
        </td>
        <td> ...content... </td>
        <td> ...ads...</td>
    </tr>
    <tr>
       <td colspan=3> ... footer ... </td>
    </tr>
</table>

You are thinking about the placement of items in the page, in two dimensions (up->down, left->right).

When coding a non-table-based design, think about things in one dimension, don’t worry about where they go!


<body>
    <h1>Your Site title</h1>
    <ul class="Menu">
                <li><a  href="/">Home</a></li>
                <li><a  href="/">About</a></li>
                <li><a  href="/">Etc</a></li>
    </ul>
    <div class="Content">
        ...content...
    </div>
    <div class="Ads">
         ...ads
    </div>
    <p>Footer</p>
</body>

Think about things as in the order it would be presented in, but not thinking about its physical placement in the page. You then add CSS to place those items etc.

If you can get out of the 2d-way of thinking and into the 1-d way of thinking whilst coding the HTML, and start leaving the styling to CSS, your CSS journey will be much simpler!

9

Hi LauraGigs,

table-based layouts are obsolete. There are people who argue that it’s easier to code everything into a table. That was the method used way back when you wanted some control over how content was laid out in a HTML document. It allowed for “some” flexibility in creating different layouts and visual variety.

But that was a workaround. Now we have the means (CSS) to structure our content and layout our HTML documents. CSS can be tricky and it may all seem like a giant cryptic jungle for you at first, but the pay-off in the end will reimburse you for the headaches and pain you’ll undoubtedly be going though, should you take up the task of learning CSS and HTML. :slight_smile:

10

I’d recommend finding one good book on CSS and walking through it step by step. There are lots of different ways to lay out content with CSS, and often people choose the wrong one (such as absolute positioning for major page items). That’s why I think it’s better to learn from a book rather than random online articles.

11

:rofl: Nicely put Laura. I think Ed may have let his personal crusade get in the way of his manners there.

12

As kohoutek said, tables are obsolete for layout because that method was always a workaround. The point of web standards is to optimize each aspect of web design. Tables may (I don’t think so, but some do) make layout easier, but they force you to jumble up the content in non-meaningful ways, which also makes them less efficient, less accessible, and potentially quite unfriendly to devices other than desktop computers.

Some people still get angry when tables are shunned for layout, but they are missing the bigger picture. Even though separation of content, layout and behavior is not a perfect system, it is a really important subject.

13

There are also a number of things that can’t be done with an HTML table based layout.

  1. You can’t set up different page layouts to suit different media so you end up with the same layout for huge projection screens and small mobile phone screens.
  2. You can’t have the content rearrange itself to fit the available width so anything wider than 544px gets chopped off for webTV and anything wider than 748px gets chopped off when printing.
  3. You can’t have elements that overlap where one is partly over another.
14

I also feel sorry for people having to slice up images to fit into myriad table cells. Seems a ghastly task to me.

15

When I first decided to learn CSS (some years ago), I started at htmldog.com. It worked for me, I’ve never looked back.

16

A normal visitor won’t see the difference if you made it up with tables… only webbies like us do if they sniff in your code.

There’s no problem with table designs for visitors. Only for yourself.
If you want to maintain a website later on, changing your design etc… it’s more easy with css designs than with tables.

I’ve been making sites with tables for years before. But to make lots of changes, it’s quite a lot more work, certainly if you work with lots of pages.
CSS is easier later on, if your design is made up.
But on the other hand, to learn CSS and get rid of all the problems with browser compatibility, it takes a while aswel… Don’t try to make it too complex in the beginning with css, so you’re not getting stuck in browser problems.

17

They will if your tables don’t fit their browser viewport.

For example if they are using webTV and your page cannot rearrange itself to fit a 544 pixel width then they can’t see the right edge of the page since webTV has a fixed 544 pixel width and no horizontal scrollbar.

The same applies if they try to print and the page can’t rearrange itself to fit a 748 pixel width.

18

Another point not mentioned thusfar is that table layouts consume more bandwith than css based layouts.

See this intervieuw about the new ESPN website for example. They switched from a table layout to a CSS layout and save 2 terabytes (!!) of datatriffic per day.

19

I expect they save many years worth of time on each rearrangement of their page template as well. So instead of one change needing say 50 people working for six months to change all the pages they can have one person do it in ten minutes instead.

20

Spot on.

If all of the design is in a single CSS file, and that same file is used throughout the whole site, a change to the file is a change to the site. The benefits, as outlined above, are indescribably massive.