A Pen by Aniket Pant.

index.html

<table>
  <thead>
    <th colspan="3"><h1 class="title">My website</h1></th>
  </thead>
  <tbody>
    <tr>
      <td colspan="3">
        <p class="text--large  text--center">Some text spanning all there columns. Yay!</p>
      </td>
    </tr>
    <tr>
      <td colspan="1">
        <h2>Box 1</h2>
        <p>Heh, first box with some content in it.</p>
      </td>
      <td colspan="1">
        <h2>Box 2</h2>
        <p>The second box with some other content.</p>
      </td>
      <td colspan="1">
        <h2>Box 3</h2>
        <p>The third box, with boring stuff.</p>
      </td>
    </tr>
    <tr>
      <td colspan="1">
        <h2>Box 4</h2>
        <p>I am done with sample text</p>
      </td>
      <td colspan="1">
        <h2>Box 5</h2>
        <p>Blah!</p>
      </td>
      <td colspan="1">
        <h2>Box 6</h2>
        <p>Boooooo.</p>
      </td>
    </tr>
  </tbody>
  <tfoot class="footer">
    <td colspan="3">
      <p class="text--center">Ain't this cool. A website like the old days. <strong>Made with tables.</strong></p>
    </td>
  </tfoot>
</table>

Old-is-gold.markdown

Old is gold

A tiny webpage using the table layout that will make you go "Whoaaaaa!"

A Pen by Aniket Pant on CodePen.

License.

style.scss

@import "compass";
html {
  font: 300 100%/1.5 Ubuntu, sans-serif;
  background-color: #f9f9f9;
  color: #444;
  padding: 24px;
}

body {
  width: 100%;
}

.title {
  font-size: 36px;
  font-size: 2.25rem;
  line-height: 1.3333333;
  font-weight: 300;
}

table {
  width: 100%;
  
}

tr {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
  
td {
  vertical-align: top;
}
    
.footer {
  background: #BADA55;
  color: #222;
}

.text--center {
  text-align: center;
}

.text--large {
  font-size: 1.25rem;
  line-height: 2;
}