Databases
StackOverflow2013
Postsdbo
POWhy is the Bootstrap grid layout preferable to an HTML table?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy is the Bootstrap grid layout preferable to an HTML table?
    text
    copied!<p>[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.]</p> <p>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.</p> <p>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.</p> <p>In other words, what is the <em>fundamental</em> difference between these two examples of HTML? Am I wrong in thinking that the grid layout is simply a table with another name?</p> <pre><code>&lt;div class="row"&gt; &lt;div class="span16"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="span4"&gt;&lt;/div&gt; &lt;div class="span4"&gt;&lt;/div&gt; &lt;div class="span4"&gt;&lt;/div&gt; &lt;div class="span4"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>and </p> <pre><code>&lt;table&gt; &lt;tr&gt; &lt;td colspan=4&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload