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,with help of editable attribute you can edit any column field of table like inline editing with help of jQuery.
When you add below attribute on any column in table.

1
contenteditable="true"


After that you are able to edit column.

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 :

editable

The following two tabs change content below.
Hi, This is Parvez Alam from India. I am software developer with 4 years’ experience in web development. I have submitted articles on PHP, Mysql, Magento,CSS, HTML, jQuery, web designing and social API. You can subscribe to my blog via RSS/Twitter/Google plus and Facebook. parvez1487(at)gmail(dot)com

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>