目录

简述表格标签

表格的基本属性（一般以下属性在table标签内部设定）

快速生成表格的快捷键

代码：快速生成三行三列的表格

实际效果：

相关代码解释：

合并表格

搭建初始环境

代码：

实际效果：

合并实例1：列合并

操作步骤：

遵守原则：

代码：合并单元格1、7、13、19

实际效果：

合并实例2：行合并

操作步骤：

遵守原则：

代码：合并单元格2、3、4、5

实际效果：

合并实例3：行列合并

操作步骤：

遵守原则：

代码：合并单元格8、9、10、14、15、16、20、21、22

实际效果：

简述表格标签

• 表格在数据展示方面非常简单，并且表现优秀。
• 由行、列、单元格三方面组成，其中单元格的特点是同行等高、同列等宽。
• 基本框架为：表格便签<table>。行标签<tr>。列标签<td>。

表格的基本属性（一般以下属性在table标签内部设定）

• border：设置表格的边框
• width：设置表格的宽度
• height：设置表格的高度

快速生成表格的快捷键

• 代码：快速生成三行三列的表格

  • table>tr*3>td{单元格}*6

• 实际效果：

  •     <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>

• 相关代码解释：

  • 一级标签>二级标签*数量>三级标签{每个单元格的内容}*数量

合并表格

• 搭建初始环境

  • 代码：

    • <table border="1">
          <tr>
              <td>单元格1</td>
              <td>单元格2</td>
              <td>单元格3</td>
              <td>单元格4</td>
              <td>单元格5</td>
              <td>单元格6</td>
          </tr>
          <tr>
              <td>单元格7</td>
              <td>单元格8</td>
              <td>单元格9</td>
              <td>单元格10</td>
              <td>单元格11</td>
              <td>单元格12</td>
          </tr>
          <tr>
              <td>单元格13</td>
              <td>单元格14</td>
              <td>单元格15</td>
              <td>单元格16</td>
              <td>单元格17</td>
              <td>单元格18</td>
          </tr>
          <tr>
              <td>单元格19</td>
              <td>单元格20</td>
              <td>单元格21</td>
              <td>单元格22</td>
              <td>单元格23</td>
              <td>单元格24</td>
          </tr>
          <tr>
              <td>单元格25</td>
              <td>单元格26</td>
              <td>单元格27</td>
              <td>单元格28</td>
              <td>单元格29</td>
              <td>单元格30</td>
          </tr>
      </table>
      

  • 实际效果：

    •  

• 合并实例1：列合并

  • 操作步骤：

    • 留下单元格1并在其td标签内加入rowspan=“需要合并的数量（包括本身）属性”，去除单元格7、13、19。

  • 遵守原则：

    • 合并列——留上不留下

  • 代码：合并单元格1、7、13、19

    • <table border="1">
          <tr>
              <td rowspan="4">单元格1</td>
              <td>单元格2</td>
              <td>单元格3</td>
              <td>单元格4</td>
              <td>单元格5</td>
              <td>单元格6</td>
          </tr>
          <tr>
              <td>单元格8</td>
              <td>单元格9</td>
              <td>单元格10</td>
              <td>单元格11</td>
              <td>单元格12</td>
          </tr>
          <tr>
              <td>单元格14</td>
              <td>单元格15</td>
              <td>单元格16</td>
              <td>单元格17</td>
              <td>单元格18</td>
          </tr>
          <tr>
              <td>单元格20</td>
              <td>单元格21</td>
              <td>单元格22</td>
              <td>单元格23</td>
              <td>单元格24</td>
          </tr>
          <tr>
              <td>单元格25</td>
              <td>单元格26</td>
              <td>单元格27</td>
              <td>单元格28</td>
              <td>单元格29</td>
              <td>单元格30</td>
          </tr>
      

  • 实际效果：

    •  

• 合并实例2：行合并

  • 操作步骤：

    • 留下单元格2并在其td标签内加入colspan=“需要合并的数量（包括本身）属性”，去除单元格3、4、5。

  • 遵守原则：

    • 合并行——留左不留右

  • 代码：合并单元格2、3、4、5

    • <table border="1">
          <tr>
              <td rowspan="4">单元格1</td>
              <td colspan="4">单元格2</td>
              <td>单元格6</td>
          </tr>
          <tr>
              <td>单元格8</td>
              <td>单元格9</td>
              <td>单元格10</td>
              <td>单元格11</td>
              <td>单元格12</td>
          </tr>
          <tr>
              <td>单元格14</td>
              <td>单元格15</td>
              <td>单元格16</td>
              <td>单元格17</td>
              <td>单元格18</td>
          </tr>
          <tr>
              <td>单元格20</td>
              <td>单元格21</td>
              <td>单元格22</td>
              <td>单元格23</td>
              <td>单元格24</td>
          </tr>
          <tr>
              <td>单元格25</td>
              <td>单元格26</td>
              <td>单元格27</td>
              <td>单元格28</td>
              <td>单元格29</td>
              <td>单元格30</td>
          </tr>
      </table>
      

  • 实际效果：

    •  

• 合并实例3：行列合并

  • 操作步骤：

    • 留下单元格8并在其td标签内加入rowspan=“需要合并的数量（包括本身）属性”与colspan=“需要合并的数量（包括本身）属性”，去除单元格9、10、14、15、16、20、21、22。

  • 遵守原则：

    • 合并行与列——留左上

  • 代码：合并单元格8、9、10、14、15、16、20、21、22

    • <table border="1">
          <tr>
              <td rowspan="4">单元格1</td>
              <td colspan="4">单元格2</td>
              <td>单元格6</td>
          </tr>
          <tr>
              <td rowspan="3" colspan="3">单元格8</td>
              <td>单元格11</td>
              <td>单元格12</td>
          </tr>
          <tr>
              <td>单元格17</td>
              <td>单元格18</td>
          </tr>
          <tr>
              <td>单元格23</td>
              <td>单元格24</td>
          </tr>
          <tr>
              <td>单元格25</td>
              <td>单元格26</td>
              <td>单元格27</td>
              <td>单元格28</td>
              <td>单元格29</td>
              <td>单元格30</td>
          </tr>
      </table>
      

  • 实际效果：

    •