Simple Example of Editable Table in HTML5

This tutorial i will tell you, how to work with inline editable attribute in HTML5. It’s magic of HTML5. You can provide inline editable option on any HTML element using editable attribute contenteditable="true". Its very easy and simple to use with HTML element.

When You add contenteditable="true" attribute on any div, td or any html element that make editable element and user can change content of editable element.In this post I am creating table list and able to make td content inline editing with help of jQuery,

Also checkout other related tutorials,

Simple Example of Editable Table in HTML5


After that you are able to edit column.

Result :

Demo & Download Code

Please feel free to send queries to me using below comment section.

One thought on “Simple Example of Editable Table in HTML5

  1. Just editing the cells … isn’t it slightly tasteless :-)?

    As asked in another post, may I ask that here too?

    This will turn interesting with three ingredients :
    – start with an empty grid with just the first (empty) row
    – append rows on demand
    – when the input is finished, treat this grid as a sort of array to make an INSERT into a MySQL table all these rows of records.

    Can you kindly hint how to approach this? Or implement it in the tutorial? Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *