Is tableless the best route for ALL sites?

[Spiral]

I've been thinking about converting my portfolio site over to a tableless design, (No real reason other than to stop the code nazis from bitching at me) but the more thought I put into it, the more I wonder if its really worth it for this type of site.

The site is obviously very bandwidth heavy already, and the current html/css coding works fine in all browsers (that I've tested in) will going tableless really make any difference? is it just for coders/designers to brag to each other?

I can see it if I wanted a totally scaleable site to allow users to pick their own color scheme and such, but I dont want that at all.

Is it worth it?

[chaka42]

it's worth if you want it to be ... with your particular site, i can see how it'll be easier to setup the css than the tables, but you already have them. i wouldn't worry about the code nazis, just tell them to take a hike. if your site was commercial i may suggest for you to make the transition, but since you're simply using for personal gain and demonstration, what's the point?

it really comes down to what you want to do.

now, all of the sites i've worked on lately have been developed without tables and utilizing css, but i deal with clients who need their sites to be accessible more often than not. if accessibility is a concern for you, than redo it.

[imaginemn]

Tables are ok as long as you don't have too many nested tables. And whatever you do, do not wrap your pages with 1 outer table. All the tables are created inside out. The nested tables are built but the display will not show until the last (outer) table is built. That is why some sites you see whit and all of a sudden bam the whole site shows up in 1 second.

Here is an example where the display is exacly the same but the code isn't.



imaginemn

[Ricoool]

and a good idea not to use row & col span in the same table, some browsers just mess that up

[DaveyBoy]

i do the nested tables thing too often, but well all the sites load fine, display fine, get into search engines and everything, so i really ain't gonna be too bothered with all this tableless stuff.

[imaginemn]

When speed and bandwidth is a major concern the little things like using CSS instead of font tags, removal of comments in the source code, minimal use of nested tables, and defining all of your height and width tags on images and tables are essential.

The less the browser has to think the better.

imaginemn

[docquesting]

So your saying when creating a web page instead of creating a main table then other tables inside that do it like this. Table for header table for nav menu to go in and then seperate tables for other content below?

[LazyJim]

Also include a summary="..." in tables so text-readers tell the users whether to skip the table (In the summary say what the table subject is e.g. site navigation).

Of course you should always use tables if you need to display tabulated data! in this case don't forget to use table headers for the header row etc.

[Spiral]

Originally Posted by docquesting

So your saying when creating a web page instead of creating a main table then other tables inside that do it like this. Table for header table for nav menu to go in and then seperate tables for other content below?

I'm talking about not using tables at all.



Thanks for all the info guys, very helpful stuff. I think I'll start trying out this tableless idea, It seems like it'd be a pretty simple transition.

[1-True-Love.com]

Question
What happens when your page is viewed without the stylesheet?

The tables will hold everything togther and it will still somewhat look like you intened the page to look.

[LazyJim]

If we keep using tables to hold the layout together then less people will feel the need to upgrade their browsers. We can't wait for 100% of people to have CSS suported browsers, and for a while now the vast majority have it.

[noob_0001]

Lazy Jim, The question is not if people have it in their browser, but how does your site look without the css driving the design? What will someone think if they download your page without the css and the page falls apart. Are you going to include the css in each and every document? Page bloat! Tables are the best! Tables with css are very nice and cut down on code

[Johan007]

Don’t worry about tables because even the top websites use them.

One of the major advantages of table is that content can expand to the browser window with greater control and without having to beet off all the IE bugs. See this page: http://www.mozilla.org/support/ now expand and contract the window will mess up the left navigation. Ok I know how to fix that but if you want another fixed columb it all becomes a pain.

Now imagine doing my homepage in Layers...www.futuremovies.co.uk it cant be done!

[greg]

i've been going tableless for a while. I just find it easier. you make one css script and it applies to the whole site(if you want it to) instead of having to go in and code tables for each and every page. I've found it saves a lot of time.

As far as if it is better or not performance wise, i can't tell much difference. load times are not really a concern anymore since over 50% of the population is on broadband now. you can do some decent tricks with css like applying borders to just certain sides and that is why i use it most of the time honestly.

[Jason]

Whats wrong with tables and web usability? Whats the alternative for lining things up?

[rtheodorow]

If you are worried about tables increasing your load time, I wouldn't worry. Image optimization will play a MUCH bigger factor in this...drop your unnecessary flash movies and you can keep all the tables you want

[imaginemn]

Why are tables bad

• Tables are usually more bytes of markup. (Longer to download, and more bytes of traffic for the host.)
• Tables are usually slower to layout for the browser. (Takes longer for the user to see anything on the page.)
• Tables usually prevent incremental rendering. (Takes longer for the user to see anything on the page.)
• Tables may require you to chop single, logical images into multiple ones. (This makes redesigns more difficult, and also increases page load time [more http requests and more total bytes].)
• Tables break text copying on some browsers. (That's annoying to the user.)
• Tables prevent certain layouts from working within them (like height:100% for child elements of <td>). (They limit what you can actually do in terms of layout.)
• Once you know CSS, table-based layouts usually take more time to implement. (A little effort up-front learning CSS pays off heavily in the end.)
• Tables are semantically incorrect markup for layout. (They describe the presentation, not the content.)
• Tables are not designed for those using screen readers. (Not only do you get the other benefits of CSS, you're also helping out the blind/partially-sighted. This is a Good Thing.)
• Tables lock you into the current design and make redesigns MUCH harder than semantic HTML+CSS.

Why are tables good.

• Great to use and appropriate with tabular data (the reason they were designed for). But should be kept to a minimal.

imaginemn

[greg]

Originally Posted by Jason

Whats wrong with tables and web usability? Whats the alternative for lining things up?

alternative is using css and more specificaly the <div> attribute. I suggest reading up on it some, it really makes life a lot easier

[evilregis]

Originally Posted by noob_0001

Lazy Jim, The question is not if people have it in their browser, but how does your site look without the css driving the design? What will someone think if they download your page without the css and the page falls apart. Are you going to include the css in each and every document? Page bloat! Tables are the best! Tables with css are very nice and cut down on code

If the page is done properly, it will degrade well. You include the CSS in the head using the link tags and they get cached. Loaded once. Reducing bloat. And noob, you couldn't be more wrong. Tables do nothing to cut down on code. They bloat it considerably.

A 350px box with a 1px black border and a light gray background with tables.

<table width="350" cellspacing="0" cellpadding="1" bgcolor="#000000">
    <tr>
        <td>
             <table width="100%" bgcolor="#dddddd">
                  <tr>
                       <td>
                             TEXT!
                       </td>
                  </tr>
          </table>
        </td>
    </tr>
</table>

That code, versus:

<div style="border:1px solid #000; width:350px; background:#ddd; padding:1px;">
TEXT!
</div>

And that CSS is bloated because it's inline. That would under normal circumstances be loaded once with a class added to the div.

Even adding a class/id to your table will do little to reduce its overall size.