web analytics

CSS Create A Responsive Table

Using HTML and CSS

Way back in the day when I began building websites, HTML tables were used frequently to layout the page of a website. Yes, this was before the miniaturized computers of today called smartphones existed. Mobile cell phones were available , but their only purpose was to make phone calls or check your time. Viewing a website or installing apps was only a dream of a engineer at that time. So development of a website was very simple, just build for a desktop.

Fast forward to 2021, tables are no longer used to layout a website page or post.
Since CSS3 was released, many new features such as media queries were made available to help design for mobile devices. In 2007, Apple announced the Iphone that began this array of of mobile phones phone resolutions. Then to complicate this matter more, Apple released the Ipad, featuring a device with another screen size to consider when designing a website.

Static Websites

As one who still enjoys build static websites and using static site generators, there were instances when I had to use a tables to display data and information in a organized and clear manner.

So I will grab a HTML <table> tag, and use CSS for styling and it’s responsive functionality.

In this video, I go through a step by step process of building a responsive table.

Gerald Watanabe

Leave a Comment