2

Possible Duplicate:
Why not use tables for layout in HTML?

I just want to know the difference between table-based layout and div-based layout. When should I use what and why?

Thanks in advance.

Community
  • 1
  • 1
Amira Elsayed Ismail
  • 9,216
  • 30
  • 92
  • 175

5 Answers5

5

Tables should only ever be used for tabular data. It really is as simple as that.

As for why; a website layout isn't tabular data.

Also, a table will use more code in your page. For example; to create one 'box' you can either do this:

<table>
  <tr>
    <td>Box Content</td>
  </tr>
</table>

or this

<div>
  Box Content
</div>
  • 1
    As a minor addendum to this, it has to be admitted that there *are* a couple of things tables-for-layout can do that divs+CSS normally don't. These can still often be achieved with the table-* values for the CSS display property. But questions of browser support come into play. – Su' Feb 14 '11 at 10:19
  • Good point. Also, as has been pointed out in another answer, they are more or less vital for cross-client e-mail template design. –  Feb 14 '11 at 10:21
  • @ScottBrown Thanks for your answer. But, I have a question. **Google basic HTML view** is for slow connection users. But, they split their layout using tabular data. Some other answers/articles mentioning DIV engine is faster than TABLE engine. But, Google basic HTML view layout using lot of tabular data. Then, How do it loads better for slow connection users? May I know the reason? – Karuppiah RK Jul 13 '20 at 09:06
  • @KaruppiahRK tables cannot be faster if there's more markup to transfer. My guess (and it is just a guess) is they're catering for older browsers by using tables rather than slow connections. Instead, they'll be catering for slower connections by including less functionality in the basic view. –  Jul 14 '20 at 10:19
4

Very simply, table based layouts were the old way of organising the position of content and divs are the newer way. Think of them as being invisible rectangles (unless you choose to make them visible) that hold content and both have their pros and cons in how you are able to position them.

You can position divs into nearly every situation a table can be positioned into, whereas there's a lot of positioning you can do with divs that you can't do with tables. This is one reasons why using tables to layout your page is discouraged.

Tables haven't completely disappeared. They're still very good at (funnily enough) table-based display of information or statistics. Think excel-type layouts.

biscuitstack
  • 11,591
  • 1
  • 26
  • 41
1

With the div you can play with the absolute-position. So you can have thousand of div put wherever you want in your webpage. You can also put div above other div with z-index, which is more difficult with table.

The table looks less flexible, but give you a look more structured and also more compatible between browser.

My advice. Make your main structure with table and put inside it your div.

Zitun
  • 388
  • 1
  • 4
  • 13
1

When you are creating HTML for use in emails tables are unfortunately still mandatory: many mail clients use HTML rendering engines which still think it is 1998. Microsoft Outlook is a notable example of this.

Wichert Akkerman
  • 4,918
  • 2
  • 23
  • 30
1

Tables were never meant as a general structural tag. In theory you are telling the browser that you are delivering tabular data and this could be interpreted in any way the browser chooses. A div (or span) tag carries no semantic meaning and merely signifies a section of document.

Tables are also theoretically more limited than div combined with css. With css you can make your elements do almost anything. This also offers the possibility of dynamically restructuring the page by only switching the css. You could allow users to define their own styles and layout without affecting the html.

You may still need to use tables in email, I don't know about that. Personally I am never happy to receive html in my email but it does seem unavoidable nowadays.

Jasper Floor
  • 4,632
  • 6
  • 26
  • 21