Tables

The table element in HTML is used for displaying tabular data. You can think of it as a way to describe and display data that would make sense in spreadsheet software. Essentially: columns and rows.

Standard Data Table

This type not table is not responsive, if you look at this table on a mobile device you will see it is wider than the screen.

Responsive Data Table

This type of table is responsive, if you look at this table on a mobile device you will see that, whilst it is wider than the screen, the user can now scroll the table left and right to view the data without affecting the other elements on the page.

Responsive Layout Table

Sometimes you want to use a table as a grid layout, for images, products, personnel, etc. By using the "responsive", class on the table we can make it responsive so that the table cells stack vertically when viewed on a mobile device.