2021-10-19 HTML学习笔记（10）表格标签

表格的作用
在HTML页面中使用表格能更好地展示数据。
表格的基本语法

<table>
      <tr>
         <td>单元格内的文字</td>
         ……
      </tr>
      ……
  </table>

（1）<table></table>是用于定义表格的标签。
（2）<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。
（3）<td></td>标签用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <tr><td>姓名</td> <td>性别</td> <td>年龄</td></tr>
        <tr><td>张三</td> <td>男</td> <td>18</td></tr>
        <tr><td>李四</td> <td>女</td> <td>19</td></tr>
        <tr><td>王五</td> <td>男</td> <td>20</td></tr>
        <tr><td>钱六</td> <td>女</td> <td>21</td></tr>
    </table>
</body>
</html>

结果如图：在这里插入图片描述

表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格里的文本内容加粗居中显示。
基本语法：<th>表示表头部分

<table>
   <tr>
     <th>……</th>
     ……
   </tr>
   ……
</table>

故上述实例代码可更改为：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
        <tr><td>张三</td> <td>男</td> <td>18</td></tr>
        <tr><td>李四</td> <td>女</td> <td>19</td></tr>
        <tr><td>王五</td> <td>男</td> <td>20</td></tr>
        <tr><td>钱六</td> <td>女</td> <td>21</td></tr>
    </table>
</body>
</html>

结果如图：
在这里插入图片描述

表格属性
上述标签只是定义了表中的数据，并没有边框，而表格属性可以定义边框。但表格属性实际开发中并不常用，主要通过CSS设置。
表格属性一览：

这些表格标签主要是写入<table></table>中去。
例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table align="center" border="1">
        <tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
        <tr><td>张三</td> <td>男</td> <td>18</td></tr>
        <tr><td>李四</td> <td>女</td> <td>19</td></tr>
        <tr><td>王五</td> <td>男</td> <td>20</td></tr>
        <tr><td>钱六</td> <td>女</td> <td>21</td></tr>
    </table>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500">
        <tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
        <tr><td>张三</td> <td>男</td> <td>18</td></tr>
        <tr><td>李四</td> <td>女</td> <td>19</td></tr>
        <tr><td>王五</td> <td>男</td> <td>20</td></tr>
        <tr><td>钱六</td> <td>女</td> <td>21</td></tr>
    </table>
</body>
</html>

在这里插入图片描述

表格结构标签
由于表格可能很长，故为更好地表示表格语义，可将表格分割为表格头部和表格主体两部分。
在表格标签中，使用<thead>表示表格头部，<tbody>表示表格主体。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500">
        <thead>
            <tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
        </thead>
        <tbody align="center">
            <tr><td>张三</td> <td>男</td> <td>18</td></tr>
            <tr><td>李四</td> <td>女</td> <td>19</td></tr>
            <tr><td>王五</td> <td>男</td> <td>20</td></tr>
            <tr><td>钱六</td> <td>女</td> <td>21</td></tr>
        </tbody>
    </table>
</body>
</html>

在这里插入图片描述
使用<thead></thead>和<tbody></tbody>的好处是可以统一定义在头部或主体里的所有表格内容的属性，若是只用<th></th>和<tr></tr>那么只能一个个编辑表格属性。

合并单元格
在特殊情况下，可以把多个单元格合并成一个。
（1）合并单元格方式
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

（2）目标单元格
跨行合并：最上侧单元格为目标单元格，写合并代码进行合并。
跨列合并：最左侧单元格为目标单元格，写合并代码进行合并。

（3）合并单元格步骤：
1）确定是跨行还是跨列。
2）找到目标单元格，写上合并方式 = 合并单元格数量，例：<td colspan="2"> </td>
3）删除多余单元格。
例：

扫描二维码关注公众号，回复： 14769663 查看本文章

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合并单元格</title>
</head>
<body>
    <table align="center" border="1" cellspacing="0" width="500" height="250">
        <thead>
            <tr><th>标题1</th> <th>标题2</th> <th>标题3</th></tr>
        </thead>
        <tbody align="center">
            <tr><td>内容1</td> <td colspan="2">内容2</td></tr>
            <tr><td rowspan="2">内容3</td> <td>内容4</td> <td>内容5</td></tr>
            <tr><td>内容6</td> <td>内容7</td></tr>
        </tbody>
    </table>
</body>
</html>

在这里插入图片描述
注意：一定要删除被合并的单元格，不然表格会突兀地多出一块表格外的格子。

2021-10-19 HTML学习笔记（10） 表格标签

猜你喜欢

2021-10-19 HTML学习笔记（10）表格标签