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">
    <thead>
        <tr>
            <th>Name</th>
            <th>Score</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Billy Mitchell</td>
            <td>3333360</td>
            <td>1999-07-03</td>
        </tr>
        <tr>
            <td>Chris Ayra</td>
            <td>3333360</td>
            <td>2000-20-16</td>
        </tr>
    </tbody>
</table>
 

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 (https://jsfiddle.net/annoyingmouse/35p7135j/):

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 DataTables.net.

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:

$(document).ready(function(){
    $('#perfectPACMANscores').DataTable();
});

 

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.

Conclusion

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 (1)

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?
    Thanks

    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

September 2017
M
T
W
T
F
S
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
22
23
24
25
26
27
28
29
30