To Table Or Not To Table

Data, data, data… The internet is run on data. It is displaying that data that can be complicated sometimes. One way that web developers use to display data is the good old HTML table. There is a problem though.

By itself, the standard HTML table is not responsive. This means that a large table just does not display very well on a mobile device which can lead to problems for companies that want to show off their financial data or test results for their products.

Luckily, thanks to CSS and jQuery, there are a few different options to make those ever useful HTML tables totally responsive and usable on all sizes of screens.

Horizontal scrolling can be accomplished in a few short lines of CSS code and are a quick and easy way to allow users to see the entire table simply by swiping left and right.

It is also possible to stack the cells and reposition the table headers. The header row can be moved over to the left instead of the top and the row contents are stacked instead of next to each other.

Another option is to make the headers in the left column and keep them static. This is a great technique for those long tables where the user needs to keep track of what each row of data is about.

There are also jQuery techniques that can help you rearrange the data in the table and hide or show the different columns on click events. 

For more in-depth explorations on these table options, take a look at the article by Eric Karkovack on Speckyboy.