HTML表格笔记＞

一、表格的基本语法

在HTML语法中，表格主要通过<table>、<tr>和<td>3个标签构成。表格的标签为<table>，行的标签为<tr>，表项的标签为<td>。表格的语法格式为

<table border="n" width="x|x%" height="y|y%" cellspacing="i" cellpadding="j">
  <caption align="left|right|top|bottom valign=top|bottom>标题</caption>
  <tr><th>表头1</th> <th>表头2</th> <th>…</th> <th>表头n</th></tr>
  <tr><th>表头</td> <td>表头1</td> <td>…</td> <td>表项n-1</td></tr>
    …
  <tr><th>表头</td> <td>表头2</td> <td>…</td> <td>表项n-1</td></tr>
</table>

表格的第一行、第一列都可以作为表头，文字样式为居中，加粗显示，通过<th>标签来实现。

<th>可以帮助搜索引擎实现更好的索引，还可以帮助CSS更好的控制外观。

<th>中的scope属性取值col或row用来表明此元素是列标题还是行标题。

<tr>、<th>、<td>三个标签都有align属性，就是水平对齐方式设置。 

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

二、表格的属性

表格的常用属性

属性	取值	描述
border	像素	设置表格边框的宽度
width	像素或百分比	设置表格的宽度
height	像素或百分比	设置表格的高度
cellpadding	像素或百分比	设置单元格与其内容之间的距离
cellpacing	像素或百分比	设置单元格之间的距离
align	left、center、right	设置表格相对周围元素的对齐方式
rules	none、groups、rows、cols、all	设置表格中的表格线显示方式，默认是all
frame	void、above、below、hsides、vsides、lhs、rhs、box、border	设置表格的外部边框的显示方式

• 表格数据的对齐方式

1）行数据水平对齐。使用align可以设置表格中数据的水平对齐方式，如果在<tr>标签中使用align属性，将影响整行数据单元的水平对齐方式。align属性的值可以是left、center、right，默认值为left。

2）单元格数据水平对齐。如果在某个单元格的<td>标签中使用align属性，那么align属性只影响该单元格数据的水平对齐方式。

3）行数据垂直对齐。如果在<tr>标签中使用valign属性，那么valign属性将影响整行数据单元的垂直对齐方式，这里的valign值可以是top、middle、bottom、baseline，默认值是middle。

创建表格练习：

<h2>创建表格练习</h2>
    <table border="1" width="400px" height="100px">
        <tr align="center">
            <td></td>
            <th>教师人数</th>
            <th>学生人数</th>
            <th>总人数</th>
        </tr>
    
        <tr align="center">
            <th>2021年</th>
            <td>40</td>
            <td>400</td>
            <td>440</td>
        </tr>
        <tr align="center">
            <th>2022年</th>
            <td>100</td>
            <td>1500</td>
            <td>1600</td>
        </tr>
        <tr align="center">
            <th>2023年</th>
            <td>150</td>
            <td>3000</td>
            <td>3150</td>
        </tr>
        <tr align="center">
            <th>2024年</th>
            <td>250</td>
            <td>4000</td>
            <td>4200</td>
        </tr>

 运行的结果为

三、不规则表格（合并单元格）

• colspan和rowspan属性用于建立不规则表格。

1.跨行

跨行是指单元格在垂直方向上向上合并，语法如下：

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

保留上边单元格，删除多余单元格 

2.跨列

跨列是指单元格在水平方向上合并，语法如下：

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

保留左边单元格，删除多余单元格

3.跨行跨列

合并单元格练习：

<h2>合并单元格练习</h2>
    <table border="1" width="400px" height="100px">
    <tr align="center">
        <td></td>
        <th>教师人数</th>
        <th>学生人数</th>
        <th>总人数</th>
    </tr>

    <tr align="center">
        <th>2021年</th>
        <td colspan="2"></td>
        <td rowspan="2"></td>
    </tr>

    <tr align="center">
        <th>2022年</th>
        <td></td>
        <td></td>

    </tr>
    <tr align="center">
        <th>2023年</th>
        <td colspan="2" rowspan="2"></td>
        <td></td>
    </tr>
    <tr align="center">
        <th>2024年</th>
        <td></td>
    </tr>

运行的结果为