Use a table as container or not?

I have created my entire website by using a main table, and having the content inside the table.

Some ppl suggest this is wrong, and I would like to know what to do specifically in my situation.

On my index.html I have a <table align="center"> and then all content in it.

Now the content is in form of DIVS and they all have relative positioning, so they are relative to the table.

For example:

<table align="center">
  <tr>
    <td>
      <div style="position:relative; left:14px; top:50px;">

              CONTENT HERE... (Form, divs, images)

      </div>
    </td>
   </tr>
 </table>

I have just gotten to the stage of browser compatibility.

Without making any changes whatsoever, my website works perfect in FF, SAFARI, Chrome and Opera. Only trouble with IE.

So for my Q, if you where me, would you change my layout and remove the tables, and instead use alot more css and alot more DIVS, or would you go with what I have?

And please if you answer me, don't just provide me with the answer, but also开发者_C百科 a "why" that is... in other words, give me arguments and facts...

Thanks

I don't see anything in your table that gives you anything more than you would get from just having the DIV that is contained in your single table cell. You're still arranging the contents based on your DIV as parent, so how exactly is the extra markup outside the div helping you? If you're worried about centering the DIV (and apparently you're having trouble because you say you're having trouble in IE), set margin-right:auto; margin-left:auto in the style or CSS.

Over a decade of experience with web development tells me that building a website in a table was a temporary workaround for trying to control the layout of the website by manipulating the content. It is a trail of tears you do not want to walk down unless you have no other option. There were a number of reasons why using a table was a good idea, but almost none of these reasons are still valid today.

Basically, this "design strategy" will make your website difficult to maintain over time, and it will greatly reduce the ability for anyone without a set of eyes to access your data in a meaningful way. Remember, we are not just talking about blind people "listening" to the web, we are also talking about indexing spiders, bots, and all of those behind-the-scenes bits which glue the individual bits of the web together.

Look into CSS. With a little foresight and a false start or two, CSS will make your website easier to maintain, more readable by everybody (including those without eyes), and allow you the flexibility to make changes to your content OR changes to your layout without greatly risking messing up the "other" item.

Using a CSS oriented layout, you rip out the table tags and just pack in the remaining div tags. While it might take a day or two to get familiar with the CSS box model, that is learning that you will never lose, and it will only get more valuable to you over time.

The question was "If you were me, would you change my layout and remove the tables?" My answer is: "Yes".

As for the why, it's been asked on SO several times. The most popular thread is this one.

Tables will typically give you a lot trouble as they prevent certain layouts from working as a lot of CSS rules can't be applied. And besides not being semantically correct for layout, Tables take longer to render.

That being said, if the site in fact working in all those browsers and the IE bugs can be fixed with conditional comments, then you'd be fine leaving it knowing its limitations.

I would definitely strip out the table and replace it with: body styles that mimic what your table was doing/container divs.

There are a number of reasons: 1) accessibility: people using screen readers have different access to your site and it's top down, left to right..they need to hear unsemantic and pointless 'table, table row, table data' all over the place. 2) web spiders don't like tables 3) maintanence is easier on a site with divs and not tables: it's easier adding an element without tables.

Don't be afraid of using tables, but use them for tabular data: as long as all elements are used semantically, and optional elements that improve accessibility are used, your code ought to validate and be easy for everyone to use and for browsers to display - and for you to change.

If you don't change from a table, then it's worth noting that a td can be styled exactly the same as a div - there's no need to nest a div within a td. It's also syntacically wrong, since a td is an inline element and a div is a block level element. You can change this, but why bother?

Well... removing the tables will probably not be an insignificant task, but I think if you're going to want to have this site around for a while, and be accessible by users who use screen readers, or have good SEO, you'll want to look into recoding it using semantic markup and css:

Some good articles to get started:

• http://www.alistapart.com/articles/practicalcss/
• http://www.w3.org/TR/WCAG10-HTML-TECHS/
• http://www.gtalbot.org/NvuSection/NvuWebDesignTips/TableVsCSSDesign.html

You really shouldn't use tables for layout, as this is not what they are designed for. It leads to very convoluted and messy markup that is difficult to maintain and can cause major accessibility problems.

The correct way to lay out your website is not necessarily to restrict yourself to using only div elements, but to use whatever element is semantically appropriate. div elements are essentially just semantically empty containers that work well for general layout purposes, but for lists of things, for example, you should be using either an ol or a ul (depending on whether the items have some kind of order associated with them). As for tables, there's nothing inherently wrong with them, but they should only be used for presenting tabular data, not for layout!

The primary advantage of CSS is that it allows you to separate the visual specification of your page from the structural specification (i.e. the markup itself).

You can read about these things in more depth here and here.

Should you Use Tables for Layouts?

Snark aside, think of it this way. Complex sites may require separation of the header, footer, sidebars and navigation especially with multiple developers on one project. With these sections in different files, it's next to impossible to figure out what row or column goes where. With divs it's so much simpler.

What if you realize your navigation should be on the top instead of the side. If you use tables, you will have to restructure the columns. With divs and uls you would simply float the lis left and increase the width of the div, maybe add a clear right or both. Sooooo much simpler than figuring out with td goes where and in what tr.

It may pass a validator (except the align attribute in strict), but it is just not maintainable or scalable or useful.

Use Tables:

There is nothing wrong in it. Table is by far the most ancient method of building websites and hence you can expect more modern browsers to support it. If you are building your website that has a fixed width then it is a real PLUS to use tables. With the use of tables your CSS is reduced greatly and that means even less Cross browser issues. If you look at how GWT is building their Widgets and Panels it is entirely by using tables.!

I was a huge fan of CSS and DIV's but i guess the right way of doing is not probably the best way of doing when IE is around.