whitespace use for html/css readability

1-tablemarkup.html

<!-- formatting fun #1: tables! -->

<!-- use whitespace to mimic the layout you want. leave off optional end tags for readability -->

<table>
  <caption>Selector engines, parse direction</caption>
  <thead>
      <tr><th>Left to right            <th>Right to left 
  <tbody>                              
      <tr><td>Mootools                 <td>Sizzle
      <tr><td>Sly                      <td>YUI 3
      <tr><td>Peppy                    <td>NWMatcher
      <tr><td>Dojo Acme                <td>querySelectorAll 
      <tr><td>Ext JS                   
      <tr><td>Prototype.js             
</table>                             

15-liststyle.html

<!-- formatting fun #1.5: lists! -->

<h3>Reasons I love not closing all my tags:</h3>

<ul>
  <li>Better readability
      <ul>
      <li>Less visual noise
      <li>Angle brackets are gross
      <li>Semantic indentation (what??)
      </ul>
  <li>Better maintainability
  <li>Feels good, man.
</ul>

<!-- 
Mostly I don't close my <li>s. As shown above, a table can look fantastic without end tags. And also, in a string of <p>'s I won't close those either; feels a lot like the English grammar convention of..

"opening a quote and 
"splitting it over some paragraphs."

But then again I'm keen on generating markup via jade/slim/markdown as my fingers are quite tired of typing (and my eyes are tired of looking at) angle brackets. :) 
-->

2-columnsstyle.css

/* formatting fun #2: css3 columns! */

/* prefixes in descending length, relevant prop stays adjacent. */

.columned { 
  -webkit-column-count: 3;  -webkit-column-gap: 15px; 
     -moz-column-count: 3;     -moz-column-gap: 15px; 
          column-count: 3;          column-gap: 15px; 
}

/* other css formatting ideas at css3please.com and at dropshado.ws/post/2054719546/css-formatting */

JSFiddle it;)

I dig #2, just snagged that for a textexpander snippet

I've doing that a lot in my .scss code.

Oh yeah - this is great. I've noticed a lot of ppl don't mimick their nesting in their CSS, which I have to do. I'm digging this though - thank you!

developers always mocked my "fugue" notation for template dev. ha! it's because their IDEs can only voice one instrument at a time.