I have a table with data, with several columns. This is a table used mostly for reading, with the possibility for a user to occasionally adjust some values. Most columns are informative only, and some can be edited (like amounts, quantities, dates, etc). I don't have control over the order, the size, or even the presence of these columns, as it can be customized by the user. The fact of being editable is mostly related to the column, however some rows have data that cannot be edited on some columns.

As it is, the table does its job on the purely functional stage. If you double-click on a cell which is editable, you will enter the editor for it. If you double-click on another one... nothing happens.

I miss a way to indicate that this cell is editable, other than clicking desperately.

What would be the best way to indicate that?

Constraints linked to my personal case: (it's better if the answer takes them into account, but not obligatory. The question doesn't have to be too specific)

  • Users have the possibility to customize the font (size, style), the text color, the alignment of cells for a given column. So I don't have control over these parameters.
  • My table is mostly a report, in which it is possible to adjust values occasionally. This is not the main way to edit them, just a quick shortcut.
  • Some columns have conditions on the editable state, so some rows (rare) cannot be edited, even if the column would normally allow it.

Current thoughts:

  • A different background color for editable cells would be the first thing to spring to mind. However, since there is no control over the order, size, or else, it's easily giving a very messy result. It's also not obvious on first sight that this is editable.
  • Adding an icon to the cell? It would be straightforward, but would easily add a lot of clutter to the table.
  • Another possibility would be to indicate the fact that a column is editable, directly in the header. It won't take into account the fact that some cells can't be edited, even in such columns, but since their occurrence is rather rare, this seems like the way to add the information with the least clutter.
  • Note: for ease of reading, the rows in my table have an alternating background color.
    – Gnoupi
    Commented Feb 22, 2012 at 13:55
  • 4
    Change the cursor Commented Feb 22, 2012 at 14:25
  • 1
    @RogerAttrill why didn't you post this as an answer? You enlightened me! :D I was trying two other approaches, which was graying out the cells that were not editable or overlaying an edit icon within the cell to do it... but the cursor idea was great!
    – edgarator
    Commented Jul 23, 2012 at 4:29
  • Several of this answers depend on hovering. In an app, hovering often doesn't work.
    – Steve
    Commented Aug 3, 2022 at 15:32

7 Answers 7


I think an icon can be done in a way to not clutter so much. Try using vey low contrast (light gray) icons which are noticeable but not obnoxious. When the user hovers, the icons darken and/or color and a highlight appears around the cell. You say double-clicking activates the edit mode but can a single click do? Or maybe clicking on the icon? I think double click is always difficult to discover but more so on the web where it's not expected.

Also, maybe this is overkill but consider having a tool-tip that appears when hovering over read-only cells saying "This cell is not editable" or something. Conversely, "click to edit" over editable cells.

As always, test your designs, even if it's someone you pull off the street.


Which cell types do you have more? Editable or only readable?

Only readable cells in a form or table are usually marked with light grey font color. This way editable cells would have no special formatting, and editability could be marked by changing the cursor to enter image description here

  • I have more readable ones, in general. In fact, editable ones are also "readable" in their first purpose. The fact of being able to edit them is secondary.
    – Gnoupi
    Commented Feb 22, 2012 at 14:28
  • About the cursor, I have to say that this is the first time I see it, though. Is that really something that most users would associate to editing?
    – Gnoupi
    Commented Feb 22, 2012 at 14:33

Another option would be to show an icon (or another indicator) only on mouse hover. There are a few pros and cons with that approach.


  • adds almost no clutter
  • the icon can be very descriptive (more so than a color)
  • it's a quite common approach


  • it's not immediately visible which cells are editable

This may or may not be an issue though, depending on the workflow of your users.

  • Hmm, I haven't thought about that, indeed, interesting idea. I will give it a try and see how it goes.
    – Gnoupi
    Commented Feb 22, 2012 at 14:26
  • Good idea if the users are going to be frequent users. If most of your users are going to be infrequent users then dont go for this.
    – Viraj
    Commented Feb 23, 2012 at 2:13
  • It's going to be frequent users, something they will work on for a large part of their day, in my case, so it's quite good.
    – Gnoupi
    Commented Feb 23, 2012 at 14:05

My suggestion: change the table cell's/inputs border on hover, and change the mouse cursor.

.tableCell :hover {
 border: 2px solid teal;
 cursor: pointer;

My 2 cents:

For the sake of increased legibility in a table, you dont want fonts of various strength and sizes. Changing font color, boldness, italics, out of the question as it strains the eyes over long periods of time. Putting an icon or changing the cells background colour is nice, but if you have a whole page full of icons and colours that just mean the cell is editable when people know its editable, it gets annoying, fast, more so if there is a lot of table cells that are editable on the page, and even more so if you are constrained for space.


In this case, one should rely at the same time on the "non-editable" cells whereas, only informative cells will appear in regular font> black color : "Completed" and editable cells will appear in Italic> grey color "Enter Value" (Amounts). I think this is simple, because it does not add up any cul

  • My problem is that editing is secondary on this table. The main purpose is to have a sort of report. Editable cells mostly all have a value of their own before edition. And for the primary use, they actually serve a purpose of information.
    – Gnoupi
    Commented Feb 22, 2012 at 14:21
  • Could you fix up your sentences a bit? If necessary, please use the visual styles to demarcate the workflow from your explanation.
    – dnbrv
    Commented Feb 27, 2012 at 22:14

two decisions of this problem are known to me:

1 use controls for changing values, such as Stepper control (Mac)/ Spin control (Win), input fields & others for hover mode on a row.

2 - use Edit in place mode

Ajax based


Change the cursor for editable fields text cursor

& there is a small nuance in a switching mode to Edit in Place. Single click is in most cases used. Use of double click for those cases when user skills of mouse-possession aren't great is quite admissible also. In my practice I began with double click mode switch that reduced possibility casually to remove the data, for example at copying of values or selecting. The first model is now used.

  • 1
    Change the cursor for editable fields ((text cursor)) The cursor you marked there (cursor:text in CSS) is the common one even for not editable fields. I mean, just hover your cursor over this comment...
    – xDaizu
    Commented Mar 29, 2017 at 11:50

within the cell use actual inout controls than showing in readonly format if any cell is modified you can highlight it within the session (Optional) this makes user feel that he has more control

Edit button/icons are cool But depends the user persona if the users are accustomed to working with excel sheets, and other manual tables this will come naturally to them

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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