【重要】表格代码的最后必须要留空一行,否则前台HTML代码会产生大量的<p>标签。
插入表格
- 方法1
点击添加表格按钮插入,如下图所示:
- 方法2
点击模板按钮,在弹出窗口内选择单击想要的表格样式,如下图所示:
- 方法3
手动编写表格代码,表格标签代码为<table>
表头代码为:<thead>、行代码为:<tr>、单元格代码为:<th>
内容表代码为:<tbody>、行代码为:<tr>、单元格代码为:<td>
【举例代码】
【显示效果】<table><thead> <!-- 表头 --><tr><th>表头文本</th><th>表头文本</th><th>表头文本</th></tr></thead><tbody> <!-- 表格内容 --><tr><td>表格内容</td><td>表格内容</td><td>表格内容</td></tr><tr><td>表格内容</td><td>表格内容</td><td>表格内容</td></tr><tr><td>表格内容</td><td>表格内容</td><td>表格内容</td></tr><tr><td>表格内容</td><td>表格内容</td><td>表格内容</td></tr></tbody></table>
表头文本 表头文本 表头文本 表格内容 表格内容 表格内容 表格内容 表格内容 表格内容 表格内容 表格内容 表格内容 表格内容 表格内容 表格内容
合并单元格
合并单元的方法是在单元格标签( <th> 或 <td> )内加入属性
- 合并行:
rowspan属性 - 合并列:
colspan属性
合并单元格代码格式为:<th colspan=数字>文本</th>
【举例合并单元格代码】
<table><thead><tr><th>表头文本</th><th>表头文本</th><th>表头文本</th></tr></thead><tbody><tr><td>表格内容</td><td colspan=2>合并2列</td></tr><tr><td rowspan=2>合并2行</td><td>表格内容</td><td>表格内容</td></tr><tr><td>表格内容</td><td>表格内容</td></tr></tbody></table>
【显示效果】
| 表头文本 | 表头文本 | 表头文本 |
|---|---|---|
| 表格内容 | 合并2列 | |
| 合并2行 | 表格内容 | 表格内容 |
| 表格内容 | 表格内容 | |
