Tables of all kinds have a degree of notoriety in web development: they can be fiddly to setup and manage, difficult to make accessible or responsive unless you know how, resistant to data wrangling, and tricky to get looking right. Thankfully, there are several tools that can make a web developer’s time with tables considerably easier:

Importing Tables

If you’re dealing with simple static tables, especially ones produced in Microsoft Excel or Word, you should be aware that IDEs like Adobe DreamWeaver have powerful techniques for converting that data into useful HTML: simply copy the original table and paste it into the web development tool’s Design mode. You’ll probably have to do a little cleanup of the code, but that’s usually an easy find-and-replace routine.

Don’t have DreamWeaver, but still need to deal with tables from Microsoft products? Word2CleanHTML is free on the web, and does the same job; Mr Data Converter can take Excel or CSV files and convert them into a multitude of formats.

You can also use Google Spreadsheets to scrape and import tables or lists from a web page at any URL. To do so, start a new spreadsheet and enter the following expression in the cell in the top left corner:

=ImportHtml("URL", "table", num)

Where:

• URL is the URL of the page, placed between quotation marks
• table is the element to look for: you could use "table", "ol" or "ul".
• num is the order of appearence of the table on the page: 0 for the first table, 1 for the second, and so on.

Creating Tables

IDEs often have generation tools for creating tables from scratch, but not always. Tablesgenerator.com has an array of free tools to generate tables of all kinds, including HTML markup. It also has options to style the result with CSS, although I’m not a particular fan of the way it does so: I find the code fairly verbose and redundant. Instead, I would humbly suggest using one of my CSS table patterns.

Filling Tables With Data

In some cases you’ll know you need a table, but don’t yet have the data to fill it, requiring the equivalent of Lorem ipsum for tables. generatedata.com can fulfill this role, as can the new Marvel API, through the wonderful Marvel Ipsum.

Another option is the excellent mockaroo, which offers up to 100,000 generated rows of test data in CSV, TXT, SQL and JSON.

Sorting Tables

A table with anything more than a few rows of data will likely benefit from an interface that includes sorting and filtering functions. Traditionally this has been done with PHP and MySQL, and increasingly with AJAX techniques. But for many tables, this is overkill.

My go-to plugin for sorting table data is Tablesorter, a JQuery plugin; the larger and far more ambitious datatables plugin is also a popular choice.

console.table

While it’s a slight departure from what I’ve discussed so far, it’s worthwhile to note that tables, in the form of JavaScript objects and arrays can also be dealt with in your browser’s console, via the console.table function.

Let’s say we have a JavaScript array of superheroes:

var superheroes = [ { firstname: "Steve", lastname: "Rogers", alias: "Captain America" }, { firstname: "Daniel", lastname: "Rand-K'ai", alias: "Iron Fist"}, { firstname: "Matt", lastname: "Murdock", alias: "Daredevil"} ];

That’s difficult to read. But in the console, we can type:

console.table(superheroes)

The result:

You’ll find that the result can be sorted and ordered in whatever way you please. As any document object is also an array, you can do the same thing for any element:

console.table(document.body,["lastElement"])

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.