Dominic Myers, a senior UX developer at Arcus Global, explores ways in which static HTML tables might be enhanced.

Tables have had a chequered past on the internet. Initially, they were hugely important because the internet was primarily used for sharing scientific data. One of the best descriptions I’ve seen of a table is from Mike Hughes:

A table is a two-dimensional array in which data appears in cells, taking its context from the intersection of a column and a row. The spatial orientation and placement of the data encodes the information.

Then, with the popularity of the internet increasing, tables were used to aid the layout of content because there was nothing else. If you know someone who’s been developing on the internet for some time, ask them to tell you about the hell that was table-based layouts.

CSS to the rescue

In time CSS took over and removed the need for table-based layouts; tables could once again be used primarily for their original purpose, displaying data.

Anatomy of a table

Tables are created using a <table> tag. As detailed in the Mozilla Developer Network, tables have the following permitted content:

  • an optional <caption> element,
  • zero or more <colgroup> elements,
  • an optional <thead> element,
  • an optional <tfoot> element, either before or after one of the following:
    • zero or more <tbody> elements
    • one or more <tr> elements

This is an example of a table, and I would consider it a minimal example in that it contains a table head. While a table head isn’t required it aids in the understanding of the data within the table cell (<th> within the table header row, <td> in the table body):

<table id="perfectPACMANscores">
            <td>Billy Mitchell</td>
            <td>Chris Ayra</td>

This table details the two first perfect scores on PAC-Man and, if you're unfamiliar with HTML table formats, it might seem somewhat unwieldy. Pasting this into JSFiddle though generates this table:

Data Table (1)

More natural tables

Tables can be further enhanced by having table header cells within the table body to provide greater context to the viewer. Mike Hughes notes that this can provide a more natural experience (

Data Table (2)

This might seem more natural, but it does introduce complexity. For instance, should the data above be stored in a SQL database, this is likely to be the query used to generate the data:

Highscores Table

Converting the output of that query into a more natural table would require some significant manipulation.

DataTables to the rescue

Tables are static, it is this concrete nature that led developers to think of ways of making tables smarter. One such method is

While it is a jQuery plugin, it’s worth including the library for the power DataTables brings to static tables. Just this snippet of code:



Produces this:

Data Table (3)

The default options allow for paging, searching and sorting the data in much the same way as one might use a spreadsheet application.

But this is only touching the basics; DataTables has classes written in PHP and .NET libraries to allow DataTable to access server-side data without the added complexity of using a server-side language to generate HTML. These are especially useful for extremely large datasets. It is even possible to use DataTables to replace tables within Salesforce Classic using Apex.

There are also some extensions which allow data to be copied, exported in spreadsheet appropriate formats, as well as be exported as a PDF. Nor are you limited to the layout in the examples as there are themes for many popular CSS frameworks.


While HTML tables are once again being used for their initial purpose, they are still concrete. Other than DataTables there are other mechanisms available to make them more useful. It’s well worth investing some time in making tabular data more approachable.

About the author

After a long career as a nurse, Dom moved into a career he thoroughly loves. You'll find him wandering around the internet playing, learning and teaching new shiny technologies.

Comments (2)

Leave Comment
  • 1
    Giles Edwards wrote on 25th Sep 2017

    Hi Dom thanks for the article. I am looking for a code that finds pre-determined PDF files on internet, finds the tables within them and dumps them into excel - is this possible?

    Report Comment

  • 2
    Dominic Myers wrote on 29th Nov 2017

    Hi Giles and sorry for not replying sooner but I've only just clocked your comment. I'm guessing your issue is solvable, but you'd need spider the internet for the files, then parse them and finally convert them. None of these tasks is insurmountable, but they aren't really to do with the article. Sorry to be so little help but perhaps you can break down what you need to do into easily understandable tasks and take a crack at each in turn.

    Report Comment

Post a comment

About this blog

This blog is brought to you by the members of the BCS Internet Specialist Group and allows you to harness their skills, expertise and knowledge. The internet is ubiquitous and has a major impact on our daily lives, at work, at home on the move. The associated risks and security concerns are real, but the magic and advantages of the internet are significant.

See all posts by Internet Specialist Group

Search this blog

October 2017