helping user select html table for copy

Question

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?

Answer 1

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.

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.

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.