HTML_10——表格

2023-11-02 08:41:58

1. table定义表格

1.1 定义

表格由标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

thead 元素应该与 tbody 和 tfoot 元素结合起来使用。

tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

2.2 实例

从结构上看，表格可以分成表头、主体和表尾三部分，在HTML语言中分别用thead、tbody、tfoot表示

<table><tbody><tr><td> `标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

tr代表行,th代表列,td代表元素

### 1.2 实例

```html




<h4>这个表格没有边框：</h4>
<table>
<tbody><tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</tbody></table>

<h4>这个表格也没有边框：</h4>
<table border="0">
<tbody><tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</tbody></table>

1.3 边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：



<table border="1">
<tbody><tr>
<td>Row 1, cell 1</td>
</tr>
<tr>
<td>Row 1, cell 2</td>
</tr>
</tbody></table>

1.4 表头

表格的表头使用 </td><th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：




<table border="1">
<tbody><tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</tbody></table>

1.5 空单元格

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

2. thead、tbody、tfoot元素

2.1 定义

`

Month	Savings
January	$100
February	$80
Sum	$180


![image-20210818171630456](https://gitee.com/Nadir-Echo/cloud/raw/master/image/image-20210818171630456.png)

### 2.3 注意点

> 1）thead和tfoot在一张表中都只能有一个，而tbody可以有多个。
>
> 2）tfoot必须出现在tbody前面，这样浏览器在接收主体数据之前，就能渲染表尾，有利于加快表格的显示速度。这一点对大型表格尤其重要。
>
> 3）thead、tbody和tfoot里面都必须使用tr标签。

### 2.4 行列的分组

**td 的 colspan属性代表所占列数， rowspan 属性代表所占行数**

```html
 
    　　<table border="10"> 
    <tbody><tr><td colspan="2" align="center">Test</td>
    </tr> 
    <tr> 
    <td rowspan="2" align="center">name</td>
    <td align="center">sex</td>
    </tr>
    <tr>
    <td colspan="2" align="center">age</td>
    </tr> 
    </tbody></table>