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.

 

Aaron Belchamber has written 243 articles

Leave a Reply

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