How to make HTML table cell editable?

by

You can use the contenteditable attribute on the cells, rows, or table in question.

Updated for IE8 compatibility

<table>
<tr><td><div contenteditable>I'm editable</div></td><td><div contenteditable>I'm also editable</div></td></tr>
<tr><td>I'm not editable</td></tr>
</table>

Just note that if you make the table editable, in Mozilla at least, you can delete rows, etc.

You’d also need to check whether your target audience’s browsers supported this attribute.

As far as listening for the changes (so you can send to the server), see contenteditable change events

More Related Contents:

  1. Set cellpadding and cellspacing in CSS?
  2. Form inside a table
  3. Word-wrap in an HTML table
  4. Create HTML Table with SQL FOR XML
  5. How to deal with page breaks when printing a large HTML table
  6. HTML/CSS: Making two floating divs the same height
  7. Make a div fill the height of the remaining screen space
  8. Why doesn’t table > tr > td work when using the child selector?
  9. HTML table headers always visible at top of window when viewing a large table
  10. Having Google Chrome repeat table headers on printed pages
  11. Fixed header table with horizontal scrollbar and vertical scrollbar on
  12. Create a HTML table where each TR is a FORM
  13. Add a horizontal scrollbar to an HTML table
  14. Wrap text in tag
  15. Rounded table corners CSS only
  16. using text-align center in colgroup
  17. Merge two HTML table cells
  18. Giving a border to an HTML table row,
  19. overflow:scroll; in
  20. How can I apply a border only inside a table?
  21. Equivalent to float in Outlook
  22. Format HTML table cell so that Excel formats as text?
  23. Table overflowing outside of div
  24. The border-radius property and border-collapse:collapse don’t mix. How can I use border-radius to create a collapsed table with rounded corners?
  25. Wrapping HTML table rows in tags
  26. Should Tables be avoided in HTML at any cost?
  27. CSS: display:block; vs display:table;
  28. html tables: thead vs th
  29. Setting max-height for table cell contents
  30. Table vertical header?

Leave a Comment