[ernestlwl]

Hello Web-designers,

Since the world today is obsessed with loading speeds. I need professional opinion to address my question.
I heard very negative responses when HTML tables are used for layout or are nested. However, does it mean they are slower in every situation compared to CSS + DIVs?

1. HTML Tables

<table width="1024">
	<tr> <td width="800">Topic Title</td> <td width="224">Topic Author</td> </tr>
	<tr> <td>The Tales of the Tides</td> <td>Jackson Helix</td> </tr>
</table>

2. DIV + CSS

<style>
	.title
	{ 
		float: left;
		width: 800px;
	}
	.author
	{ 
		float: left;
		width: 224px;
	}
</style>

<div class="title">Topic Title</div> <div class="author">Topic Author</div>
<div class="title">The Tales of the Tides</div> <div class="author">Jackson Helix</div>

Simple question, which webpage loads faster in this situation?
Or perhaps would Span load even faster than Divs?

Thank you

[BetaWar]

Well, there are a few different things to keep in mind when it comes to loading speeds. First, when you have a ton of content being loaded it may take more time for the user to receive it (not the page content, but the number of characters -- bytes -- being received).

So, talking about byte count, the second page would load slower.

However, you also need to take into account that tables can't begin rendering without being completely received, because the table width may change depending on what content is put in it. Additionally, you can't render the next row until the previous one is rendered (otherwise you will either go too large or too small - both cases will cause the page to look off).

In general, tables are good for tabular content. If you don't have tabular content (something that makes sense to put in a table - such as book and author information) then you probably shouldn't be using a table.

You also need to think about connection speeds for pages. Mobile browsers likely have slower connection speeds.

Hopefully that makes sense.

[Shane Hudson]

Lets be honest here... it does not matter if tables are faster (which I am certain they are not). Tables are for tabular data (ie. like a spreadsheet), not layouts.

If you think the world is obsessed with loading speeds, you will also know everybody is obsessed with semantics.

This post has been edited by Shane Hudson: 04 February 2012 - 01:04 PM

[ernestlwl]

BetaWar, on 04 February 2012 - 11:50 AM, said:

Well, there are a few different things to keep in mind when it comes to loading speeds. First, when you have a ton of content being loaded it may take more time for the user to receive it (not the page content, but the number of characters -- bytes -- being received).

So, talking about byte count, the second page would load slower.

However, you also need to take into account that tables can't begin rendering without being completely received, because the table width may change depending on what content is put in it. Additionally, you can't render the next row until the previous one is rendered (otherwise you will either go too large or too small - both cases will cause the page to look off).

In general, tables are good for tabular content. If you don't have tabular content (something that makes sense to put in a table - such as book and author information) then you probably shouldn't be using a table.

You also need to think about connection speeds for pages. Mobile browsers likely have slower connection speeds.

Hopefully that makes sense.

I see, this is very helpful info. Thank you very much.
So do you think if I'd attempt to present massive amounts of tabular data by using pure divs and css, it's going to be slower as opposed to being faster?

[Lemur]

Semantics and correctness: Don't dare use tables for anything other than tabular data. Period.

Speed and flexibility: Divs by a long shot for layouts. Tables for data.

Trying to hack together divs for tabular data is equally as stupid as trying to hack tables together for layouts. Each have their uses.

[Dormilich]

additionally, CSS stored in external files can be cached. that doesn’t help on the first load, but on the second.

[Lemur]

More detailed then I suppose.

The sheer advantages of CSS in layouts are numerous. External CSS style sheets can be used to define multiple pages, are easily editable, give extreme flexibility, and with a good html/div template template it can be used to completely redesign a page based on a single template.

It's a beauty really, combine with php to make CSS even more dynamic and you'll have an incredible power to use.

[e_i_pi]

Great the good old tables vs divs argument. At the risk of being flamebait...

I'm not convinced either way, but in my experience, there are times when the hard and fast rule of "thou shalt not use tables for layout" seems extraordinarily draconian. In my application, I need to do a certain layout, and I tried it with divs, and I tried it with tables. With tables, it took me maybe 2 minutes. With divs, it took about three hours, and the amount of nestiing I had to do caused the div parent-child structure to be as intricate and convoluted as a table anyhow. I went with tables, because it mwant that going back and changing it in future would be less time consuming.

The underlying issue of why this took so long is that different browsers rendered the div content differently. Trying to get pixel perfect results across all major browsers is extremely painful when you use the proper techniques. Sometimes you have to compromise given the environment that's inflicted upon you.

[Lemur]

I'm of the opinion that yes, tables are faster the first time around and for primary. The problem then?

What happens when you need to modify the layout of multiple pages, you have no IDE, and you need to move something a few pixels? If you try that with tables you have a full days work ahead of you, but with CSS it's open and change one or two settings.

More work initially and doing work properly will save you innumerable hours in the long run. I've tried things both ways and I'd whimper a tad every time someone wanted a table redesigned.

On CSS design vs Table design as I work now It's not really much of a fair comparison to me. Granted that if I had stuck with tables I would be better about it, so I tried doing a site that way for kicks and it's a complete nightmare to do anything with, so I switched it all to CSS and changed it over.

To me it's not an issue of opinion, unless you count >IE6 in the mix, it's a matter of proper time investment and work.

[e_i_pi]

Oh I'm not talking about laying out a whole site with tables, that's madness. But there are some instances still where I prefer tables to floated divs, generally where I want the width of the container to be determined by the contents, or more specifically in forms.

A good example would be this, c/o Wikipedia:


This is remarkably easy to do with tables, but I've seen arguments stating that this is not strictly a table, so you should use a labyrinth of divs to lay it out. To me it is table - the headers are in the first column, with the exception of the final textbox, which is spanned over two columns to allow for more room.

In a case such as this, I am far more inclined to believe that production and maintenance is much easier by using a table.

[Lemur]

I'd have to agree on that account, I apologize for taking you out of context there. Forms are quite a pain to get to work properly, and I'd have to think of a viable method of getting divs to work without some serious pain.

I'd like to say that there's a way to do it, but nothing springs to mind, so I'll get to researching that a bit.

[e_i_pi]

The only way I know of involves javascript post-loading, by measuring the widest input label, and setting the width every other label based off that. To me that isn't a neat solution, it's a hack.

You could always use a fixed width on the labels and the input element column, but then you're nailed in to that width, regardless of what the labels are. When you're working wth dynamic form content, you're going to run into problems when a form label has a width greater than your defined width.

100% width for the wrapper is also not a solution, at least not in my situation, as the form is wrapped by a draggable popup-style absolute positioned div. If I set it to 100% width, it takes up the whole width of the screen. I came up with one solution where it didn't - at least it didn't in FF, Opera, Safari and Chrome. Of course in IE, rendering was not standard and the div ended up consuming the entire screen width again

[ernestlwl]

e_i_pi, on 05 February 2012 - 07:49 PM, said:

The only way I know of involves javascript post-loading, by measuring the widest input label, and setting the width every other label based off that. To me that isn't a neat solution, it's a hack.

You could always use a fixed width on the labels and the input element column, but then you're nailed in to that width, regardless of what the labels are. When you're working wth dynamic form content, you're going to run into problems when a form label has a width greater than your defined width.

100% width for the wrapper is also not a solution, at least not in my situation, as the form is wrapped by a draggable popup-style absolute positioned div. If I set it to 100% width, it takes up the whole width of the screen. I came up with one solution where it didn't - at least it didn't in FF, Opera, Safari and Chrome. Of course in IE, rendering was not standard and the div ended up consuming the entire screen width again

Would YOU use divs or tables to make a FORUM?

[Dormilich]

ernestlwl, on 08 February 2012 - 09:15 AM, said:

Would YOU use divs or tables to make a FORUM?

I would use both.

[ernestlwl]

Dormilich, on 08 February 2012 - 01:17 AM, said:

ernestlwl, on 08 February 2012 - 09:15 AM, said:

Would YOU use divs or tables to make a FORUM?

I would use both.

I have a really poor internet connection from where I'm from, so I'm required to write very efficient code.

Is this considered 'semantic' to write a newtopic.php code?

<form method="post" action="">
            <table width="100%" border="2">
            	<tr><td width="20%"> A </td><td width="80%"> B </td></tr>
                <tr><td align="right"> Topic Title: </td><td> <input type="text"> (max 50 characters) </td></tr>
                <tr><td align="right"> Description: </td><td> <input type="text"> (max 140 characters) </td></tr>
                <tr><td align="right"> Catagory: </td><td> 
               		<select>
                    <option value='' selected> --- Choose One! --- </option>
                    <option value='1'> 1. something </option> 
                    <option value='2'> 2. something </option> 
                	</select></td></tr>
                <tr><td align="right"> Your Text: </td><td> <textarea style="width:600px; height:250px;"></textarea> </td></tr>
                <tr><td align="right" colspan="2"> <input type="submit"> </td></tr>
            </table>
            </form>

I've officially used a table as a layout for a form. Is this considered bad?
Would you rather make all of those with div tags?