Many websites are still displaying HTML tables with those “<table><tr><td>” tags.  The problem is, try loading a table that looks nice on your desktop computer onto a mobile device and chances are, parts of your table will no longer be visible on screen, or the table will resize and squish the content.  Tables aren’t meant to be resized so drastically, so the best solution would use HTML 5 structure and CSS to help your data look like a table but have the flexibility of breaking out of the table structure in your CSS media queries easily.

Here is a sample of the structure to imitate HTML tables without using those antiquated table tags.

<section style="display: table;">

  <header style="display: table-row;">

    <div style="display: table-cell;"></div>

    <div style="display: table-cell;"></div>

    <div style="display: table-cell;"></div>

  </header>

  <div style="display: table-row;">

    <div style="display: table-cell;"></div>

    <div style="display: table-cell;"></div>

    <div style="display: table-cell;"></div>

  </div>

</section>