HTML学习笔记 04 - 表格

最新推荐文章于 2022-09-30 12:25:46 发布

原创最新推荐文章于 2022-09-30 12:25:46 发布 · 352 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

HTML学习笔记专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了HTML中的表格元素，包括基本结构、页眉、页脚、行、列、单元格的概念及使用方法，还讲解了单元格合并技巧和表格标题的添加。

一、表格介绍

1、表格简介

表格，又称为表，既是一种可视化交流模式，又是一种组织整理数据的手段。在HTML中主要的作用是用来描述具有二维结构的数据。

2、HTML中的表格

在HTML中，表格使用<table>标签来表示，一个表格的基本结构通常涉及到页眉、正文、页脚、行、列、单元格等。
说明：

<table>标签中包含<thead>标签、<tbody>标签、<tfoot>标签，分别表示页眉、正文、页脚。
<thead>标签、<tbody>标签、<tfoot>标签中均可以包含<tr>标签，<tr>标签表示行。
<tr>标签中包含<td>标签或<th>标签，<td>标签或<th>标签表示列，也叫单元格。表格中的数据实际上是放在单元格中的。

3、一个基本的表格

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>表格</title>
</head>
<body>
<table border="1">
  <tr>
    <td>我是第一行第一个单元格</td>
    <td>我是第一行第二个单元格</td>
  </tr>
  <tr>
    <td>我是第二行第一个单元格</td>
    <td>我是第二行第二个单元格</td>
  </tr>
</table>
</body>
</html>

说明：

实际开发中，当表格结构比较简单时，通常可以省略<thead>标签、<tbody>标签、<tfoot>标签。
border="1"表示表格的边框为1像素。
通常情况下，同行的高度一致，同列的宽度一致。

4、有页眉和页脚的表格

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>4-2</title>
</head>
<body>
<table border="1">
  <thead>
  <tr>
    <th>我是页眉的第一个单元格</th>
    <th>我是页眉的第二个单元格</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>我是正文第一行第一个单元格</td>
    <td>我是正文第一行第二个单元格</td>
  </tr>
  <tr>
    <td>我是正文第二行第一个单元格</td>
    <td>我是正文第二行第二个单元格</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <th>我是页脚第一个单元格</th>
    <th>我是页脚第二个单元格</th>
  </tr>
  </tfoot>
</table>
</body>
</html>

说明：

<td>标签和<th>标签都表示列，但<th>标签通常用在页眉和页脚中，<th>标签中的文字默认是粗体；<td>标签用在正文中。

二、HTML中表格的合并

1、单元格跨行合并

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>4-3</title>
</head>
<body>
<table border="1">
  <tr>
    <td rowspan="3">我是第一行第一个单元个，合并了第一列的三个单元格</td>
    <td>我是第一行第二个单元格</td>
    <td>我是第一行第三个单元格</td>
  </tr>
  <tr>
    <td>我是第二行第二个单元格</td>
    <td>我是第二行第三个单元格</td>
  </tr>
  <tr>
    <td>我是第三行第二个单元格</td>
    <td>我是第三行第三个单元格</td>
  </tr>
</table>
</body>
</html>

说明：

使用rowspan属性来设置单元格跨行，rowspan属性的值表示当前单元格跨越的行数。

2、单元格跨列合并

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>4-4</title>
</head>
<body>
<table border="1">
  <tr>
    <td colspan="3">我是第一行的第一个单元格，我合并第一行的三个单元格</td>
  </tr>
  <tr>
    <td>我是第二行的第一个单元格</td>
    <td>我是第二行的第二个单元格</td>
    <td>我是第三行的第三个单元格</td>
  </tr>
  <tr>
    <td>我是第三行的第一个单元格</td>
    <td>我是第三行的第二个单元格</td>
    <td>我是第三行的第三个单元格</td>
  </tr>
</table>
</body>
</html>

说明：

使用colspan属性来设置单元格跨列，colspan属性的值表示当前单元格跨越的列数。

3、带标题的表格

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>4-5</title>
</head>
<body>
<table border="1">
  <caption>我是表格的标题</caption>
  <tbody>
  <tr>
    <th>我是页眉的第一个单元格</th>
    <th>我是页眉的第二个单元格</th>
  </tr>
  </tbody>
  <tbody>
  <tr>
    <td rowspan="2">我是正文第一行第一个单元格，合并第一列的第二个单元格</td>
    <td>我是正文第一列第二个单元格</td>
  </tr>
  <tr>
    <td>我是正文第二行的第二个单元格</td>
  </tr>
  <tr>
    <td colspan="2">我是第三行的第一个单元格，合并第三行第二个单元格</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <th>我是页脚的第一个单元格</th>
    <th>我是页脚的第二个单元格</th>
  </tr>
  </tfoot>
</table>
</body>
</html>

说明：

<caption>标签必须是<table>标签的子标签。
<caption>标签中的内容默认按照表格的宽度左右居中。

5、一个例子

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>4-6</title>
</head>
<body>
<table width="400" border="1" cellspacing="0" cellpadding="5">
  <caption>销售报表</caption>
  <thead bgcolor="#cccccc">
  <tr>
    <th>序号</th>
    <th>部门</th>
    <th>金额</th>
  </tr>
  </thead>
  <tbody align="center">
  <tr>
    <td>1</td>
    <td>销售1部</td>
    <td>1000.00</td>
  </tr>
  <tr>
    <td>2</td>
    <td>销售2部</td>
    <td>1100.00</td>
  </tr>
  <tr>
    <td>3</td>
    <td>门市1部</td>
    <td>1200.00</td>
  </tr>
  <tr>
    <td>4</td>
    <td>门市2部</td>
    <td>1100.00</td>
  </tr>
  </tbody>
  <tfoot bgcolor="#FFFF99">>
  <tr>
    <th rowspan="2"> 统计</th>
    <th>销售部</th>
    <th>2100.00</th>
  </tr>
  <tr>
    <th>门市部</th>
    <th>2300.00</th>
  </tr>
  </tfoot>
</table>
</body>
</html>

说明：

属性cellspacing表示单元格之间的距离，单位是像素。
属性cellpadding表示单元格内容与其边框之间的空白，单位是像素。
属性align表示单元格中的文本在单元格中的对齐方式，属性值包括left、center、right。
细心的读者应该会发现，这里使用的width、bgcolor、border、cellspacing`cellpadding、align`属性，已经违反了W3C所提倡的内容和表现分离的规范。事实上，这些属性在HTML5中，已经不再建议使用。但是，当前在Web上仍然留存有大量以前版本的HTML代码。所以，我们遵循了解其含义，尽可能不使用的原则，仅仅在这里权且一用。