py系统学习笔记：第七阶段：网页编程基础：第一章：HTML5：11.标签之表格

•  目录

  简述表格标签

  表格的基本属性（一般以下属性在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>
        

    • 实际效果：

      •