Creative Uses of Tables: Responsive Images

Another use case involves applying it to image elements. Let's take a look at this example from my own website.

Compared to setting a fixed width for the image, this approach achieves the 'max-width' effect (compatible with IE6).

On the Internet, nobody knows you're a cat.

<table style="position: relative; margin: 0 auto;">

  <tr><td style="position: relative; width: 32em; z-index: 1; zoom: 1;">

    <div style="padding-top: 75%;"></div>

    <img 

      src="../../images/memes/onTheInternetNobodyKnowsURaCat.jpg" 

      alt="On the Internet, nobody knows you're a cat." 

      title="On the Internet, nobody knows you're a cat." 

      style="position: absolute; top: 0; right: 0; left: 0; width: 100%; z-index: 1;" 

    />

  </td></tr>

</table>