Why is the Bootstrap grid layout preferable to an HTML table?

Question

[Note: for those who may be confusing this question with \"why not use tables for HTML layout\", I am not asking that question. The question I\'m asking is why is a grid layout

Answer 1

If I may, I'd like to summarize what I gathered from the other comments and the link explosion I experienced from this page:

The problem with using tables isn't the grid layout, it is the attempt to express it with HTML instead of CSS.

Bootstrap allows grid layouts through (mostly) pure CSS, which is why it is OK. The 'mostly' part comes because your HTML will still be contaminated by your layout data, but more subtly:

 ... 
 ... 

This is surely significantly more semantic and maintainable than the old tabular designs, but the 'span4' and 'span8' are still display-data embedded into our HTML. However, since design can never be truly be decoupled from our data (e.g., nested divs), this is a reasonable price to pay.

That being said, even this coupling can be broken, if you use some more modern CSS features provided by a pre-processed language such as LESS. The same example:

 ... 
 ... 

Coupled with the following LESS:

#secondary-nav{
    .span4;
    // More styling (padding, etc) if needed
}
#main-content{
    .span8;
}

This creates fully decoupled HTML and Stylesheet, which is ideal, because the HTML is cleaner and more readable, and redesigns can be made with less HTML modification. However this only works if you use LESS or some other CSS pre-processor, because CSS currently does not support mixins (AFAIK).

We already use LESS in my workplace, so I know I'll be pushing towards using this type of solution. I'm a very strong believer in semantic HTML and data-design decoupling. :)