How to Create a Responsive HTML Table

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Learn how to create a responsive HTML table in this 27-minute tutorial video. Explore techniques for making tables mobile-friendly while maintaining semantic structure and accessibility. Discover CSS styling methods to enhance table appearance, implement simple and robust responsive designs, and utilize grid layouts for improved cell formatting. Follow step-by-step guidance on setting up the table, applying basic and advanced CSS styles, and addressing accessibility concerns for small screen sizes. Gain insights from expert resources and practical examples to master the art of creating flexible, user-friendly HTML tables for various devices and screen sizes.

Syllabus

- Introduction
- Setting up the table
- My main source of info for this
- Basic CSS to get the table looking better
- Very simple responsiveness
- More CSS styles to improve the look
- The easiest way to make it responsive with a table-container
- A more robust solution
- Alternative to data-attributes
- Using grid to improve the layout inside cells a little
- Fixing the accessibility at small screen sizes