Replacing HTML tables with CSS to improve responsive design

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>

 

About Author:

Senior Cloud Software Engineer and 25+ years experienced video production, video editing and 3D animation services for a variety of global clients including local video production here in Jacksonville, Florida.

Leave a Comment

Your email address will not be published. Required fields are marked *