I think it would be really cool if web browsers would allow me to select cells in a HTML table in a logical way: The same way cell selection works in Microsoft Excel. All browsers that I know about presume I'm selecting a "text blob" and that means if I click in a table cell and drag downwards, it will include the entire next row of the table in my selection. But 99% of the time, I'd really like selection in HTML tables to work at the cell-level (that means dragging down would only select the cell underneath the initial one).

I'm too lazy to look at what the HTML 4.01 spec say about this 😉 Is selection forced to treat things like lines of text? If so, what about the WHATWG HTML5 spec? If so, can the revitalized W3C HTML Working Group do something about this in the next spec? Thinking about it a little, it doesn't seem like it's necessary to specify anything about selection in the specs, the browsers should be free to implement things as best they see fit.

There would also have to be a way to select an entire row or entire column in the HTML table too (use Microsoft Excel or Microsoft Word's table as a starting point for how that UI should work).

What would this mean for copying/pasting though? If I select two cells aligned vertically in a table, would it paste it as plain text with a newline between the contents? I'll let the smart people deal with that...

[Update: Ian Hickson pointed out that Ctrl+drag is the way to do what I'm after in Firefox (too bad it doesn't work in Opera). However, I later commented that the pasting in such circumstances poses a problem. Looks like Bug 236546 is the key to my happiness, go vote!]

§348 · March 21, 2007 · Software, Technology, Web · · [Print]

Leave a Comment to “Cell Selection In Browsers”

  1. Rob says:

    Sounds like something an extension should be able to handle in Firefox but there might be some tricky work to get around having one piece of text selected at a time.

  2. Ian Hickson says:

    Firefox can already do this. Just control-drag.

  3. Very cool Ian, thanks for letting me know this!

  4. On playing with it a little, works great except … 😉

    You can select non-contiguous cells too and things get pasted in a tab-delimited way. What I’d like is to be able to select a contiguous range and have it pasted preserving this information (for instance, if I select a 4×2 cell region, it should paste two lines, each with 4 tab-delimited values).

  5. Rob says:

    I have to say I’m amazed. I haven’t seen this one before. For the Excel case you have to use Edit -> Paste Special and pick Text. That works for a row (since it’s tab-delimeted). The only way I can paste a column in Excel is to do use Edit -> Paste Special and pick Text as before, then copy the data again (this time from inside Excel) and use Edit -> Paste Special and check the Transpose box. It’s two steps because Excel treats internal copy and paste totally differently from external copy and paste.

  6. Joel says:

    You obviously also get into trouble because of the thousands of hidden tables on the web used for layout… So using this as the default table selection mode would be problematic.

  7. Joel, so far I haven’t found it too bad – yes tables are used for layout, but Mozilla seems to pick the right (innermost) table cell when I click it. Furthermore, your selection is limited to one table only. Granted, I haven’t used it too much yet.

  8. Schepers says:

    Yeah, there are lots of ways in which tables could and should be improved. Some of my favorites optional extensions would be:

    * automatic sorting by row or column (very commonly implemented in script, but could be native behavior that can sort on regex or datatype)

    * static header that stays in place while scrolling the table (and which would repeat on printed pages)

    * user-resizable rows and columns

    * cell-, row-, and column-level access in the API

    Deciding where to stop, especially when getting into spreadsheet-like functionality like auto-summing, is the real question (I wouldn’t want formulae, for example). Tables were great back in the day, but they would be more useful to Web-apps if some more functionality were built in.

  9. Another tip for currently implemented Mozilla approach:

    Hold down CTRL + SHIFT + drag to select entire columns or rows within a table.