Let’s face it, HTML tables have a bit of a bad reputation. In the 90’s and early 00’s many web designers and developers would use tables to construct web pages. Which isn’t really what tables should be used for.
HTML tables shouldn’t be used for positioning layout on websites, but they should be used for displaying tabular data like financial transactions, scores, nutritional information, customer information details, etc etc…
The only exception with using HTML tables for layout is for the use of HTML emails, which unfortunately relies on a tabular structure… although this will more than likely change in the future.
So, back to basics… what are HTML tables?
Well, similar to Microsoft Excel and Google Sheets, HTML table are essentially columns and rows. By default they aren’t interactive and they don’t always look particularly good on mobile devices!
The fantastic news is that there are many plugins out there to add functionality to your tables.
Here are our top 3 favourite plugins to use with HTML tables:
Stackable.js
Stckable.js is a nice little plugin that allows you to make tables responsive for mobile devices. This solves the problem of the user having to zoom and pan on tables when viewing them on mobile devices like the iPhone.
Stackable.js rearranges table cells so that they are optimised for tablets and phones via the use of media queries.
Handsontable
Typically tables are only useful for displaying data. Handsontable allows you to make your tables editable spreadsheets. With Hansontable you can sort data cells, have numeric, date and checkbox cells and even include validations. If you’re familiar with Microsoft Excel you will feel right at home with Hansontable.
DataTables
The DataTables plugin allows you to create responsive and sortable tables. The plugin also includes features such as search and pagination. Arguably, the best feature of DataTables is that it is easy to integrate it with CSS frameworks such as Foundation Zurb and Bootstrap.
