Creative Uses of Tables: More Uses

Alternatively, you can use a table with 'display: inline;' to achieve an effect "similar" to 'inline-block'. This is DAMN redundant, but using tables still lets you achieve min-height, vertical centering, or bottom alignment.

I use tables for vertical centering, combined with horizontal centering (using margin or text-align). When the height is sufficient, the main content appears in the center of the viewport. This offers excellent compatibility (though it's redundant, complex, and semantically poor) without having to use flexbox layouts.

However, if you're not as focused on retro aesthetics and compatibility as I am, I'd still recommend embracing the new and using Flexbox. It's more flexible and straightforward, designed specifically for web layouts, and semantically correct.

Continue

vertical-align: middle;

Line 1
Line 2
Line 3
Line 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

vertical-align: bottom;

<table style="display: inline; vertical-align: top;">

  <tr><td style="padding: 0.5em; width: 16em; height: 4em; background-color: #fcc; vertical-align: middle;">

    vertical-align: middle;

  </td></tr>

</table>&nbsp;<table style="display: inline; vertical-align: top;">

  <tr><td style="padding: 0.5em; width: 16em; height: 4em; background-color: #cfc;">

    Line 1<br />Line 2<br />Line 3<br />Line 4

  </td></tr>

</table><br /><br />

<table style="display: inline; vertical-align: top;">

  <tr><td style="padding: 0.5em; width: 16em; height: 4em; background-color: #ccf;">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  </td></tr>

</table>&nbsp;<table style="display: inline; vertical-align: top;">

  <tr><td style="padding: 0.5em; width: 16em; height: 4em; background-color: #ffc; vertical-align: bottom;">

    vertical-align: bottom;

  </td></tr>

</table>