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 fundamentally different from a table layout.]

I'm researching CSS libraries (in particular Bootstrap) for a project. I am a programmer rather than a web designer and I feel I could benefit from a library that encapsulates good design.

We all know that it's bad practice to use HTML tables to accomplish basic site layout because it mixes presentation with content. One of the benefits provided by CSS libraries like Bootstrap is that they offer the ability to create "grid" layouts without using tables. I'm having a little trouble, however, understanding how their grid layouts differ in any meaningful way from the equivalent table layout.

In other words, what is the fundamental difference between these two examples of HTML? Am I wrong in thinking that the grid layout is simply a table with another name?

<div class="row">     <div class="span16"></div> </div>  <div class="row">     <div class="span4"></div>     <div class="span4"></div>     <div class="span4"></div>     <div class="span4"></div> </div> 

and

<table>   <tr>     <td colspan=4></td>   </tr>   <tr>     <td></td>     <td></td>     <td></td>     <td></td>   </tr> </table> 

Answer 1

The difference is that the first example is semantically marked up, assuming the data being marked up is not actually tabular. <table> should only be used for tabular data, not for any data which happens to be displayed in a layout similar to a table.

It is correct though that using CSS packages like Bootstrap, which require you to assign classes to HTML elements which are not semantic but presentational, reduces the separation of content and presentation, making the difference somewhat moot. You should be assigning semantically meaningful classes to your elements and use lesscss mixins (or similar technology) to assign presentational behavior defined in the CSS framework to these classes, instead of assigning the presentational classes to the elements directly.

Say:

<div class="products">     <div class="product"></div> </div>  .products {     .row; }  .products > .product {     .span16; } 

Note that I say should. In practice this is not necessarily always the more workable option, but it should be the theoretical goal.

Answer 2

I believe that CBroe comment is the best option, so I chose to clarify it.

Avoid div's. A div should be your last resort, not your first option. Instead, try to use Bootstrap classes on the actual elements. For instance:

<form class="container">     <fieldset class="row">         <label class="span4" for"search">Type your search</label>         <input class="span6" type="text" id="search" />     </fieldset> </form> 

It is a shame to use fieldset to contain a single field, but it is semantically best than using a div for the same thing. The HTML5 standard defines many new container elements, such as article, section, header, footer and many more. In some cases you will have to use div's, but if you minimize it's use then your code will be way more semantic.