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

Select Code
1
contenteditable="true"


After that you are able to edit column.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table width="100%" class="table table-bordered table-hover" id="_addFiveTable">
<thead>
  <tr>
    <th>Item</th>
    <th>Item details</th>
    <th>phase</th>
  </tr>
</thead>
<tbody>  
  <tr>
    <td contenteditable="true">Editable</td>
    <td contenteditable="true">&nbsp;</td>
    <td contenteditable="true">&nbsp;</td>
  </tr>
</tbody>
</table>

Result :

Demo & Download Code

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