Table-Based Layout vs Div-Based Layout [duplicate]

This question already has answers here: Closed 11 years ago. 开发者_Go百科

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.

---

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>

---

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.

---

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.

---

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.

---

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.