What's the correct way for a cross-browser HTML layout?

Question

I just read codes of a web product that is supposed to support multiple modern browser(including FireFox 3.X, Safari 3.X and IE7+, but not including IE6-). The HTML code uses div instead of table to create table-like effects. Actually, the div's are organized like this:

   <div>
         <div>
              <div style="float:left" id="header1">...</div>
              <div style="float:left">...</div>
              <div style="float:left">...</div>
         </div>
         <div>
              <div style="float:left" id="header2">...</div>
              <div style="float:left">...</div>
              <div style="float:left">...</div>
         </div>

There is a piece of onload JavaScript code to read all "headerX" elements, calculate their max offsetWidth. Then assign the max offsetWidth to each of them. In this way, the div is well aligned to be like table.

Actually, I don't think this is a good way to go, but I'm told that the product is designed this way to make it cross-browser supported, because table behaves different in different browsers.

I'm not convinced. So, the question. Besides the approach mentioned above, is there any better to make table-like layout for all popular browsers?

Answer 1

I know this doesn't answer your question, but try to avoid table layouts, and learn how to write cross-browser compatible CSS to position the content of your page.

See what's possible with CSS layouts at csszengarden

Answer 2

The HTML code uses div instead of table to create table-like effects.

This is a common misconception - the old way that many people used to do their layouts were with tables, so they were actually using table instead of div for div-like effects. :)

Answer 3

What you're doing is called div-soup. Read up on semantic HTML and the CSS property display.

Also, if the data is tabular, there's nothing wrong with using a table. To get identical layouts across different browsers, you might have to set the CSS-property border-collapse: collapse or the HTML attribute cellspacing="0"

Answer 4

I think it's impossible.

Note however that if the height of the row is known you can define your table via first column - first row, second row, ... second column - ....

Answer 5

There are not many cases where you HAVE to use JavaScript for formatting/design. Only exception I can recall right now is reformatting the page when user resizes the window.

This sort of thing can be 100% done with plain HTML + CSS. It may need conditional stylesheet for IE6 and mobile platforms, but every single web I made so far had the same stylesheet for IE7 and FF3 and worked ok with DIVs instead of tables. You just need to think, google, and improvise (in this order ;).

However, I do not think this particular case can be achieved without a DIV for each table, row, and cell which means you will be doing pretty much the same thing as with <table>, <tr> and <td>. Displaying tabular data in tables is semantically fine so if you really need it as a table, not as a web layout, just save yourself the trouble and use the HTML table markup.

Answer 6

Even I was having similar thoughts about using tables for layout for long time. But later I figured lot of popular websites are using div based layouts. So I think that is the way to do it nowadays. You dont have to build one from scratch. There are lot of css frameworks available on web which can be used easily. Please find the list below.

http://developer.yahoo.com/yui/
http://code.google.com/p/blueprintcss/

Here you have a list of css frameworks
http://speckyboy.com/2008/03/28/top-12-css-frameworks-and-how-to-understand-them/

Answer 7

That is a great example of someone missing the whole point of avoiding the use of tables for layout. The primary problem with using tables for layout is that it makes it very difficult and tedious to change anything on a site wide scale later.

By putting the CSS rules inside the HTML, they are combining the inflexibility of tables with dodgy and repetitive CSS. To top it all off, they are misusing javascript to recreate functionality that already exists in tables.

There's not simple or "correct" answer to this question. Without knowing the specifics of your situation, all I can do is lay out a few basics:

• Less code is almost always better.
• If you find yourself trying to replicate table behaviour using css (or especially javascript) you may want to just use tables.
• Less code is almost always better.
• If you find yourself nesting tables inside of other tables, there's likely a better way to accomplish your goal.
• Less code is almost always better.
• Don't be afraid to change your design a bit if it lets you simplify your code a lot.

The truth is that there are no magic bullets. There are tons of resources out there, but as with any worthwhile pursuit it takes time and dedication. Using a tool that hides the complexity may help in the short term, just be aware that you no longer have control of the trade-offs being made on your behalf behind the scenes.

A few places to start:

• http://www.456bereastreet.com/archive/200410/bring_on_the_tables/
• http://www.alistapart.com/topics/code/css/
• http://getfirebug.com/

Answer 8

I find that the div/table debate is best left for other people to waste time on. When designing a cross-browser layout, the philosophy I've found that works best is to treat both table and div as unique elements, each with its place on a web page. If you find yourself able to use divs effectively, then that's great (and if you can get them working well in all browsers, all the more power to you.) With more complex layouts, however, I find that tables can be useful as well, when you take care to specify cellpadding, cellspacing, borders, and such. I recently wound up working on a project where our final design strategy used a series of div elements which each encapsulated a table setup in order to get the design we wanted. Page was http://www.kafuka.org, if you're wondering what I mean.

Answer 9

I'm told that the product is designed this way to make it cross-browser supported, because table behaves different in different browsers.

Pfft. Tables behave no more differently across browsers than any other feature.

Using JavaScript to emulate a table layout rather than just using a table is really perverse. It'll be slower and more clunky than just letting the browser do it, it'll fall apart without JS enabled, and it may not respond well to zooming (which breaks offsetWidth in some circumstances) or percentage-width rounding errors.

There are cases where it can be appropriate to use JavaScript to augment layout, for tricks that neither tables nor CSS layout can do on their own, but this isn't really one of them.

is there any better to make table-like layout for all popular browsers?

Yes, use a table. The semantic issue of “does this markup really represent a table” is largely an academic matter. (And with your markup talking about headers, it sounds like you may even be using a real semantic table anyway!)

There is little-to-no practical harm in sparing use of simple tables for layout as long as the top-to-bottom reading order makes sense. The idea of “tables are intrinsically evil” comes as a reaction to a time when most sites were authored using a horrific mess of nested, spanned and fixed tables resulting in unreadable and inaccessible markup.

Sure, it would be ideal if you could put each page element in a div and use CSS to position each one relative to each other, the page size, etc. But the reality is CSS isn't that powerful, and some things can be achieved much more simply with a little conservative table use.

Answer 10

It looks like almost everyone misunderstood your question (or maybe I did).

It sounds like the web product is trying to display tabular data using divs and their reason for it is that it is the best way to make it cross-browser compatible. Not only is this false, by bringing javascript into the equation they are instantly making it less compatible across your users. If a user has javascript disabled the divs will be a mess. It is best to use <table> for this situation, as it actually works rather well across browsers, which is why it used to be so attractive to design a layout.

What most people are referring to in their answers is the old sin of making website layouts using tables, which I don't think your question really covers. Anyhow, this is improper because the <table> tag is not semantically relevant to hold layout content. It is always best to keep the semantic meaning of your HTML document. What this web product is doing is the same sin, but in a reverse way: they are using the <div> tag to display tabular data, when the <table> is there for that.

Answer 11

There is just no such thing.

Every single broswer has its own quirks. You need to iteratively fight with them and learn to work around them.

Saying that CSS layout is more cross-browser or more reliable than table layout is just being blind. No it isn’t. Believing in that CSS markup is more semantic and cool than table markup is a question of religion and has nothing to do with actual technical aspects of both approaches.