HTML5基础——4、表格-优快云博客

大家好，我是阿赵。继续学习h5。这次来学习一下表格。
表格的用途很广泛，它方便我们对内容的整理和显示。在网页上面也可以显示表格。

一、基础的表格显示

<body>
  <table border="1px" width="600px">
    <thead>表格1</thead>
    <tbody>
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
      <tr>
        <td>小明</td>
        <td>男</td>
        <td>18</td>
      </tr>
      <tr>
        <td>小红</td>
        <td>女</td>
        <td>16</td>
      </tr>
      <tr>
        <td>小强</td>
        <td>男</td>
        <td>19</td>
      </tr>
  </table>
</body>

表格1

姓名	性别	年龄
小明	男	18
小红	女	16
小强	男	19

说明：

表格的结构是通过<table>标签作为包裹，然后里面的<thead>标签是表格的头部区域，类似于整个表格的标题。
接下来通过<tr>标签来表达一行，在里面，如果是标签，则是表头，代表着列标题。如果是，则是正常单元格内容。
需要注意的是，单元格里面同样是可以放各种内容的：

<!DOCTYPE html>
<html lang="zh_CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我是标题</title>
</head>

<body>
  <table border="1px" width="600px">
    <thead>表格1</thead>
    <tbody>
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>跳转</th>
      </tr>
      <tr>
        <td>小明</td>
        <td>男</td>
        <td>18</td>
        <td><a href="https://www.baidu.com">百度</a> <a href="google.com">谷歌</a><img src="img/azhao.png" width="30px">
        </td>
      </tr>
      <tr>
        <td>小红</td>
        <td>女</td>
        <td>16</td>
        <td><a href="https://www.baidu.com">百度</a> <a href="google.com">谷歌</a><img src="img/azhao.png" width="30px">
      </tr>
      <tr>
        <td>小强</td>
        <td>男</td>
        <td>19</td>
        <td><a href="https://www.baidu.com">百度</a> <a href="google.com">谷歌</a><img src="img/azhao.png" width="30px">
      </tr>
  </table>
</body>

</html>

我是标题表格1

姓名	性别	年龄	跳转
小明	男	18	百度谷歌
小红	女	16	百度谷歌
小强	男	19	百度谷歌

可以看到，单元格里面可以插入其他元素，比如超链接，或者图片都可以。然后如果里面的元素设置了宽高，是会把单元格撑大的。 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6b0ca825c6904eeea0b286bf25c3a83b.png#pic_center)

二、合并单元格和单元格属性

把上面的代码再改一下，变成这样：

<!DOCTYPE html>
<html lang="zh_CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我是标题</title>
</head>

<body>
  <table border="1px" width="600px">
    <thead>表格1</thead>
    <tbody>
      <tr>
        <td colspan="5" align="center">人员列表</td>
      </tr>
      <tr>
        <th rowspan="4">5年3班</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>跳转</th>
      </tr>
      <tr>
        <td>小明</td>
        <td>男</td>
        <td>18</td>
        <td><a href="https://www.baidu.com">百度</a> <a href="google.com">谷歌</a><img src="img/azhao.png" width="30px">
        </td>
      </tr>
      <tr>
        <td>小红</td>
        <td>女</td>
        <td>16</td>
        <td><a href="https://www.baidu.com">百度</a> <a href="google.com">谷歌</a><img src="img/azhao.png" width="30px">
      </tr>
      <tr>
        <td>小强</td>
        <td>男</td>
        <td>19</td>
        <td><a href="https://www.baidu.com">百度</a> <a href="google.com">谷歌</a><img src="img/azhao.png" width="30px">
      </tr>
  </table>
</body>

</html>

我是标题表格1

5年3班	姓名	性别	年龄	跳转
人员列表
	小明	男	18	百度谷歌
	小红	女	16	百度谷歌
	小强	男	19	百度谷歌

运行效果： ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/a5b274deaf6b4260b6b6a2fda1f2396b.png#pic_center)

这里主要的修改有2点：
1、合并单元格
在第一行，我加入了这样的内容：

  <tr>
    <td colspan="5" align="center">人员列表</td>
  </tr>

这里的colspan是跨列合并单元格。从当前单元格开始，加上自己总共合并多少个单元格。
然后在第一列里面，我加入了：

<th rowspan="4">5年3班</th>

这里rowspan是跨行合并单元格，以当前单元格为开始，总共合并多少格。
需要注意的是，我在第一行的第一列进行跨行合并，结果是后面的内容全部都往后推了一格。

2、单元格属性
在上面的跨列合并单元格时，我写了一个

align="center"

这个就是单元格的属性，align是对齐属性，center是中间，所以表达的是中间对齐的意思。
除了align，单元格还有其他属性，比如：
border 边框
cellpadding 单元格边沿与内容之间的空白，默认1像素
cellspacing 单元格之间的空白，默认2像素
width 表格的宽度，单位是像素px或者百分比。