【重要】表格代码的最后必须要留空一行,否则前台HTML代码会产生大量的<p>标签。

插入表格

  • 方法1
    点击添加表格按钮插入,如下图所示:
    markdown添加表格
  • 方法2
    点击模板按钮,在弹出窗口内选择单击想要的表格样式,如下图所示: markdown插入模板

  • 方法3
    手动编写表格代码,表格标签代码为<table>
    表头代码为:<thead>、行代码为:<tr>、单元格代码为:<th>
    内容表代码为:<tbody>、行代码为:<tr>、单元格代码为:<td>
    【举例代码】
    1. <table>
    2. <thead> <!-- 表头 -->
    3. <tr><th>表头文本</th><th>表头文本</th><th>表头文本</th></tr>
    4. </thead>
    5. <tbody> <!-- 表格内容 -->
    6. <tr><td>表格内容</td><td>表格内容</td><td>表格内容</td></tr>
    7. <tr><td>表格内容</td><td>表格内容</td><td>表格内容</td></tr>
    8. <tr><td>表格内容</td><td>表格内容</td><td>表格内容</td></tr>
    9. <tr><td>表格内容</td><td>表格内容</td><td>表格内容</td></tr>
    10. </tbody>
    11. </table>
    【显示效果】
    表头文本表头文本表头文本
    表格内容表格内容表格内容
    表格内容表格内容表格内容
    表格内容表格内容表格内容
    表格内容表格内容表格内容

合并单元格

合并单元的方法是在单元格标签( <th><td> )内加入属性

  • 合并行:rowspan属性
  • 合并列:colspan属性

合并单元格代码格式为:<th colspan=数字>文本</th>
【举例合并单元格代码】

  1. <table>
  2. <thead>
  3. <tr><th>表头文本</th><th>表头文本</th><th>表头文本</th></tr>
  4. </thead>
  5. <tbody>
  6. <tr><td>表格内容</td><td colspan=2>合并2列</td></tr>
  7. <tr><td rowspan=2>合并2行</td><td>表格内容</td><td>表格内容</td></tr>
  8. <tr><td>表格内容</td><td>表格内容</td></tr>
  9. </tbody>
  10. </table>

【显示效果】

表头文本表头文本表头文本
表格内容合并2列
合并2行表格内容表格内容
表格内容表格内容