HTML入门基础（015）

最新推荐文章于 2023-06-08 22:12:06 发布

虾米大王

最新推荐文章于 2023-06-08 22:12:06 发布

阅读量188

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/modern358/article/details/109825945

版权

html 专栏收录该内容

36 篇文章 2 订阅

订阅专栏

今天我们接着分享关于表格的内容，前面我们说到了表格的基本结构，为了对表格有更深的理解，HTML引入了thead、tbody和tfoot三个标签。

语法：

<table border="1">  <caption>表格标题</caption>  <thead>    <tr>      <th>标题1</th>      <th>标题2</th>    </tr>  </thead>  <tbody>    <tr>      <td>单元格1</td>      <td>单元格2</td>    </tr>    <tr>      <td>单元格3</td>      <td>单元格4</td>    </tr>  </tbody>  <tfoot>    <tr>      <td>单元格5</td>      <td>单元格6</td>    </tr>  </tfoot></table>

我们举个实际的例子：

<html>  <head>    <title>表格语义化</title>  </head>  <body>    <table border="1">      <caption>考试成绩表</caption>      <!--表头-->      <thead>        <tr>          <th>姓名</th>          <th>HTML</th>          <th>CSS</th>          <th>Javascript</th>        </tr>      </thead>      <!--表体-->      <tbody>        <tr>          <td>大明</td>          <td>77</td>          <td>77</td>          <td>77</td>        </tr>        <tr>          <td>大红</td>          <td>99</td>          <td>99</td>          <td>99</td>        </tr>        </tbody>      <!--表尾-->      <tfoot>        <tr>          <td>平均</td>          <td>88</td>          <td>88</td>          <td>88</td>        </tr>      </tfoot>    </table>  </body></html>

表尾一般都是用于统计数据的。之所以加了三个标签符，分别标明头部、体部、尾部，是为了后期使用CSS控制表格的样式。

有些时候，我们设计的表格需要合并单元格，我们需要用到<td>的属性rowspan和colspan；

语法：

<td rowspan="合并行数"></td>

来个实例代码：

<html>  <head>    <title>合并单元格</title>  </head>  <body>    <table border="1">       <tr>         <td>姓名：</td>         <td>周先生</td>         <td rowspan ="2">男性</td>       </tr>       <tr>         <td>年龄：</td>         <td>18</td>                </tr>    </table>  </body></html>

查看浏览器效果，可以发现第一行是3列，第二行是两列，在第三列的首格使用了合并属性rowspan = 2 ，意思是向下合并两格。

那我们需要合并列呢，可以使用<td>属性colspan，

语法：

<td colspan = "合并列数"></td>

示例代码：

<html>  <head>    <title>合并单元格</title>  </head>  <body>    <table border="1">      <tr>        <td>苹果</td>        <td>香蕉</td>      </tr>      <tr>        <td colspan="2">都是水果</td>      </tr>    </table>  </body></html>