5

This seems like it would be a common problem, but I couldn't find a discussion in a google search.

Users often want to copy data out of html tables (off of web pages) so that they can paste the data into another application such as Word, Excel, or a text file.

But the selection process is awkward. The most basic problem is that by dragging with the mouse, it's easy for the user to select only part of the table, or to select what looks like the whole table, but is actually missing a few blank pixels in the upper-left corner that actually contain the "tableness" of the table, so they end up with a bunch of flat text copied.

A related problem is being able to select just a given column or range of columns.

I'm just wondering if there is a guide to how to handle this situation nicely. For instance, there could be a convention that triple-clicking on a table would select the whole table, or perhaps there could be a little button the user clicks to select the table, or perhaps control-A would select just the table and not the whole page. Each of these sounds plausible, but the button seems clunky and the other two seem obscure for the non-power-user.

Do you know of a discussion/guide for this and/or examples of websites that do this well?

  • I'm always wanting to do this as well and haven't found an acceptable solution. I use a Chrome plugin - Table Capture - to do most of the work. It identifies HTML tables on the page and lets you copy them to the clipboard. chrome.google.com/webstore/detail/table-capture/… Kudos if you come up with something good! – kerr Aug 4 '15 at 22:13
  • 2
    The cleanest way is to give an icon or button for the user to click to copy the data and actually copy it into the format they want yourself. Take a look at how it's done with jQuery DataTables TableTools extension: datatables.net/extensions/tabletools – MB34 Aug 6 '15 at 16:57
2

My recommendation, if possible (it is generally technically possible) is to have a copy to clipboard button that will do this for the user, so they need only paste it.

If you're interested in the implementation details, more info is on this StackOverflow question

Here is an example of what it often looks like.

screenshot with a copy to clipboard button present

Bear in mind that although the example is for an Application, this can also be done for a Web App.

A button may be 'a little clunky', but it is extremely usable, and if you anticipate a table will frequently need to be copied, it is the best way to go.

If you've more concerned about aesthetic than usability, you can use some sort of copy or cut icon.

icon of pair of scissors

You could also combine the two methods to have a button with a scissor icon, and just the word copy, which would keep it from being too cluttered while maintaining understandability without further explanation of usage.

  • An export to excel/csv button would also make sense when dealing with tabular data. – nightning Aug 11 '15 at 20:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.