Advanced level layout in Tips and Tricks

Warning: I'm not writing this for the casual user. If you don't know any HTML, you'll probably be happy to skip this one.

I've been asked about allowing HTML table tags. I've now added those tags as valid HTML, but if you just want to use them for layout (as opposed to actual tabular data similar to Excel), there's a better and mobile-friendly way.

I'm using Twitter Bootstrap, which has a responsive grid system designed for layout. For narrow displays, the sections will collapse beneath each other. I haven't actually tried using it within an entry on here yet, so this should be an interesting test.

The grid system is divided into 12 columns. That's handy because it divides evenly into several small numbers to establish your columns. Here's a quick example:

<div class="row-fluid">
<div class="span4"><h5>I am</h5></div>
<div class="span4"><h4>I am</h4></div>
<div class="span4"><h3>I am Superman</h3></div>
</div>
<div class="row-fluid">
<div class="span6"><p>And I can do</p></div>
<div class="span6"><p><strong>Anything</strong></p></div>
</div>

(Note: I would normally indent my HTML for readability but this could cause weird side effects with Markdown)

Which translates to this:

To appreciate the advantage that this has over tables, try shrinking your browser width so it's as skinny as a phone. :)

(NOTE: Mixing Markdown and HTML doesn't seem to work, so I've used pure HTML for my formatting here)