HTML5教程

HTML_10——表格

本文主要是介绍HTML_10——表格,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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>



image-20210818170055940

1.3 边框属性

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

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


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




image-20210818170554541

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>


image-20210818170446521

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>

image-20210818172146019

3. 拓展

3.1 css相关

  • CSS通过border属性设置边框
  • border-collapse可以合并边框
  • cation元素可以设置标题:存疑
  • padding(css):设置单元内内容的边框距

3.2 设置样式

colgroup和col元素

4. 参考

HTML表格

thead、tbody 以及 tfoot 元素的 HTML 表格

HTML表格的制作

td 的 colspan 和 rowspan

这篇关于HTML_10——表格的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!