In this section, we will learn what the contenteditable attribute is and how to use it in HTML.
HTML contenteditable Attribute Definition and Usage
The content of HTML elements like <p> for example is not editable by default. That means after browsers rendered that content, you can’t just select and start to edit them!
But with the help of contenteditable, we can change this default behavior!
Basically, if we apply this attribute to an element and set its value to true, the content of that element becomes editable and we can change the content on the rendered page.
Note: this attribute is inheritable. That means if we apply such attribute to the <body> element for example, then the entire elements within the body of <body> tag become editable as well.
HTML contenteditable Attribute Syntax
<element contenteditable = “on | off”>HTML contenteditable Attribute Values
The value we set for the contenteditable could be either “true” or “false”.
If the value is set to “true”, that means the content of the target element is editable.
But if the value is set to “false” that means the content of the target element is not editable. (This is the default value).
Example: editable table in HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML is fun :)</title>
<style type="text/css">
table,td,th{
border: double;
}
</style>
</head>
<body >
<h1>The content of the table is editable</h1>
<hr>
<table contenteditable="true">
<thead>
<tr>
<th>ID</th><th>First Name</th><th>Last Name</th><th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<th>12100</th><td>Jack</td><td>Bauer</td><td>[email protected]</td>
</tr>
<tr>
<th rowspan="3">12101</th><td>Ellen</td><td>DeGeneres</td><td>[email protected]</td>
</tr>
<tr>
<td>Jimmy</td><td>Kimmel</td><td>[email protected]</td>
</tr>
<tr>
<td>Jimmy</td><td colspan="2">Fallon</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>4 employees</td>
</tr>
</tfoot>
</table>
</body>
</html>In this example, because the contenteditable attribute for the <table> element is set to true, the table becomes editable and so we can select any cell and change its content.
Example: document body contenteditable true
<!DOCTYPE html>
<html>
<head>
<title>HTML is fun :)</title>
<style type="text/css">
table,td,th{
border: double;
}
</style>
</head>
<body contenteditable="true">
<h1>The content of the table is editable</h1>
<hr>
<table>
<thead>
<tr>
<th>ID</th><th>First Name</th><th>Last Name</th><th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<th>12100</th><td>Jack</td><td>Bauer</td><td>[email protected]</td>
</tr>
<tr>
<th rowspan="3">12101</th><td>Ellen</td><td>DeGeneres</td><td>[email protected]</td>
</tr>
<tr>
<td>Jimmy</td><td>Kimmel</td><td>[email protected]</td>
</tr>
<tr>
<td>Jimmy</td><td colspan="2">Fallon</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>4 employees</td>
</tr>
</tfoot>
</table>
</body>
</html>In this example, the contenteditable attribute is set to true in the <body> element. That means the entire content of this HTML document is editable.