dir属性：定义元素内容排序方式（rtl,ltr,auto）
contentEditable属性：内容是否可编辑
tabindex属性：按tab键激活元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div contenteditable="true" style="width:500px;border:1px solid black" dir="auto">
<table style="width:420px;border-collapse: collapse" border="1">
<colsgroup >
<cols span="2"></cols>
</colsgroup>
<tr>
<td>疯狂Java讲义</td>
<td>疯狂Android讲义</td>
</tr>
<tr>
<td>轻量级Java EE企业应用实战</td>
<td>经典Java EE企业应用实战</td>
</tr>
</table>
</div>
<hr/>
<table id="target" ondblclick="this.contentEditable=true;" style="width:420px;border-collapse: collapse" border="1">
<tr>
<td tabindex="1">HTML 5</td>
<td tabindex="2">Ruby</td>
</tr>
<tr>
<td tabindex="4">C/C++</td>
<td tabindex="3">Java</td>
</tr>
</table>
</html>
Title
| 疯狂Java讲义 | 疯狂Android讲义 |
| 轻量级Java EE企业应用实战 | 经典Java EE企业应用实战 |
| HTML 5 | Ruby |
| C/C++ | Java |