Recommendations for Good Website Designers

[MadCat]

Originally Posted by Cleo

As someone that still uses tables what is the big deal about still using tables?

I just find tables so much easier to use then containers but then again I haven't really tried to use containers.

The thing with the HTML doctypes is that using tables puts browsers in "Quirks" rendering mode, where you get to deal with all the little differences between IE and Firefox. Using XHTML Strict basically enforces a standards compliant mode of rendering, which makes a site (theoretically still, mind you) look the same across all browsers.

There is also some speculation that sites using xhtml strict get a slightly higher ranking off search engines but I'm still calling bunk on that one.

Anyway, using tables for layout at this point in time is also not in your best interest due to the way tables are often rendered (slowly), and nested tables can seriously hang a browser for a few seconds which means that the surfer might just close the window and go "eh fuck it".

So, say, you have a table layout for galleries, 5 columns, 4 rows for a total of 20 pics. To put that in xhtml strict, first we need some styles:

#gallery {
  width: 800px;
  margin: 0px;
  padding: 0px;
}

#gallery div.row {
  clear: both;
}

#gallery div.image {
  width: 150px;
  padding: 10px;
  float: left;
  position: relative;
}

#gallery div.image img {
  border: 0;
}

.clear {
  clear: both;
}

And then here's your layout:

<div id="gallery">
  <div id="row1" class="row">
    <div id="image1" class="image">
      <a href="/image.jpg"><img src="/image_thumb.jpg" /></a>
    </div>
     .
     .
     .
     .
  </div>
  <div id="row2" class="row">
    .
    .
    .
    .
    .
  </div>
</div>

It will come out looking more or less like your average old table layout, but renders fast, and from a size perspective, your page becomes a couple bytes smaller

Caveat: It should look the same as your table layout but I'm doing this from memory so it might not look right