HTML中表格模块的用法及应用，干货满满！！！

一，结构

由行与列组成，其中有一到多个单元格组成（放置表格内容）

单元格可包含 文本，图片，列表，文字段落，表单，水平线或内嵌的表格等元素

二，基本语法

主要通过 < table > ,< tr >,< td > 3个标签构成，分别为表格的标签，行的标签以及表项的标签

语法格式如下：

<table border="n rpx" width="n rpx" height="n rpx">
 <tr>
        <th scope="row">单元格1</th>
        <th scops="col">单元格2</th>
        <th scope="col">单元格3</th>
        <th scope="col">单元格4</th>
    </tr>
    <tr>
        <th scope="row">单元格5</th>
        <td >单元格6</td>
        <td>单元格7</td>
        <td>单元格8</td>

    </tr>

其中 scope="row" 表明是行头  scope="col" 表明是列头。

表格的第一行，第一列可作为表头，文字样式的调整可通过< th > 标签实现

< th > 标签文字在浏览器中按粗体显示，< td >标签则按正常字体显示

三，表格的属性

常用属性有对齐方式，背景颜色，边框，高度，宽度等。

1，边框：< table >标签的 border 属性可设置表格边框宽度及颜色，默认情况下表格边框为0。

2，大小：通过 width 和 height 属性设置宽度和高度，同时可以设置单元格的大小。

3，背景图像：有 GIF, JPEG , PNG 三种图像格式，background 属性可设置表格图像背景。

4，单元格填充：cellpadding 属性可设置单元格与其内容之间的距离。

5，单元格间距：cellspacing 属性可设置单元格与单元格之间的距离。

7，表格在网页中的对齐方式：align 属性 格式为 <table align = " left / center / right  ">

四，不规则表格

colspan 和 rowspan 属性建立不规则表格。把多个单元格合并成一个单元格，需要用到跨行与跨列等功能。

1，跨行：单元格在垂直方向上合并

语法如下：

<table>
    <tr>
      <td rowspan="所跨行数"> 单元格内容 </td>
    </tr>
</table>

2，跨列：单元格在水平方向上合并

语法如下：

<table>
    <tr>
      <td colspan="所跨列数"> 单元格内容 </td>
    </tr>
</table>

小贴士：table > td *A > td * B  (一次性生成A行B列表格的快捷语句)

实操演练

首先要创建一个四行五列的表格 可使用快捷语句  table > td *A > td * B ，用 row 和 col 标明行头和列头； 表格内单元格1内容为空，则不需要填写内容，其他单元格则按照表格内容进行填写。

<h2>创建表格</h2>
    <table border="irpx" width="400rpx" height="200rpx">
        <tr>
            <th scope="row"></th>
            <th scope="col">教师人数</th>
            <th scope="col">学生人数</th>
            <th scope="col">总人数</th>
        </tr>
        <tr>
            <th scope="row">2021年</th>
            <td>40</td>
            <td>400</td>
            <td>440</td>
        </tr>
        <tr>
            <th scope="row">2022年</th>
            <td>100</td>
            <td>1500</td>
            <td>1600</td>
        </tr>
        <tr>
            <th scope="row">2023年</th>
            <td>150</td>
            <td>3000</td>
            <td>3150</td>
        </tr>
        <tr>
            <th scope="row">2024年</th>
            <td>200</td>
            <td>4000</td>
            <td>4200</td>
        </tr>
    </table>

在网页中显示的结果如下：

合并单元格则在第一个表格的基础下进行调整，使用 rolspan 和rowspan 属性进行跨行与跨列的操作，把突出的单元格逐步进行调整与删除

  <h2>合并单元格练习</h2>
    <table border="1rpx" width="400rpx" height="200rpx">
        <tr>
            <th scope="row"></th>
            <th scops="col">教师人数</th>
            <th scope="col">学生人数</th>
            <th scope="col">总人数</th>
        </tr>
        <tr>
            <th scope="row">2021年</th>
            <td colspan="2">40</td>
      
            <td rowspan="2">440</td>
    
        </tr>
        <tr>
            <th scope="row">2022年</th>
            <td>100</td>
            <td>1500</td>
           
        </tr>
        <tr>
            <th scope="row">2023年</th>
            <td rowspan="2" colspan="2">150</td>           
            <td>3000</td>
            
        </tr>
        <tr>
            <th>2024年</th>
            <td>250</td>
            
            
        </tr>
    </table>

在网页中显示的结果如下：

最后把不需要的单元格内容删除掉，得到行头和列头有内容，其他单元格为空白的表格。