What HTML structure performs better for the browser?

Well, it seems to be the general opinion: We should use tables only for tabular data, and not for layouting.

Ok, I'm agree and I understand the reasons (one of the reasons is the performance).

• But someone could give real benchmarks comparing tables vs other structure开发者_如何学运维s?
• And what is the best structure for the browser performance?

---

You don't need to really do benchmarks.. you can see the difference visually. If you look at a site pre-css-layout, it usually rendered slowly since the table has to be fully drawn out. When it's divided up with css, it's noticeably faster. I've witnessed this on dozens of sites before they converted to css layouts.

In addition, tables require table cells and rows for nearly everything. By not relying on rows/cells, you reduce the code bloat by LOTS.

"Best structure" ? There is no best structure. It all depends on the layout. Though usually, you want to avoid divitus and keep things as succinct as possible yet semantically marked up.

---

The main reason I've always heard for why you should use divs vs tables is adaptability. If you make a table layout, you have to change all of your HTML to change it, but with divs, you can just use the layout, float, and position CSS properties to move things around.

---

The main performance issue with tables is that they can cause excessive reflows. The layout of the first cell in the table can be changed by content in later cells, which basically makes the browser have to go back and start the layout again.

---

I'm quite fond of this site which gives you a timer for how long you should struggle using pure CSS before you...

http://giveupandusetables.com/