HTML表格

原创已于 2022-04-20 19:14:14 修改 · 1.8k 阅读

3 ·

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

标签

#python #开发语言 #html #前端

于 2022-03-21 19:26:59 首次发布

HTML 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了HTML表格的基本结构，包括必填的<table>、<tr>和<td>标签，以及如何设置边框、创建表头与标题，还有表格的行与列合并。通过实例展示了表格属性的使用，如border属性来设定边框宽度，以及使用<caption>标签添加表格标题。

Python3.8

Python 是一种高级、解释型、通用的编程语言，以其简洁易读的语法而闻名，适用于广泛的应用，包括Web开发、数据分析、人工智能和自动化脚本

实际生活中，我们经常使用到表格来统计数据和信息，这样可以更加清晰地显示数据或信息，表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。

一，表格的基本结构

1.标签

每个表格有三个必须的标签，<table>、<tr>和<td>三个标签，用来创建表格，语法结构如下：

<table>
    <tr>
        <td>单元格内容</td>
    </tr>
</table>

上述的三个标签是创建表格的基本标签
其中<table></table>标签用于定义一个表格。
<tr>标签用于定义表格中的一行，必须嵌套在<table></table>中，表示该表格有几行。
<td></td>标签用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，
一对<tr></tr>包含几对<td></td>，表示该行中有多少个单元格（列）
表格中除了可以添加文本外，还可以添加其它标签元素，如：图片、列表、段落等。

例子1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table>
    <tr>
        <td>回头科科</td>
        <td>性别</td>
        <td>年龄</td>
        <td><img src="./太阳.jpg" alt="正在缓冲" width="200px" height="200px"></td>
        <td>今天天气晴，天气炎热，注意防暑降温</td>

    </tr>
    <tr>
        <td>1</td>
        <td>男</td>
        <td>23</td>
        <td><img src="./下雨.jpg" alt="正在缓冲" width="200px" height="200px"></td>
        <td>今天天气阴，天气舒适，适合运动</td>
    </tr>
</table>
</body>
</html>

结果：

例子2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table>
    <tr>
        <td>作者编号</td>
        <td>作者姓名</td>
        <td>作者性别</td>
        <td>作者年龄</td>
    </tr>
    <tr>
        <td>1</td>
        <td>回头科科</td>
        <td>男</td>
        <td>24</td>
    </tr>

</table>
</body>
</html>

2.边框

如果想要给表格添加边框，可以设置表格的border属性，数值为边框的宽度。

例子1：

<table border="2">

在上面的程序中的table标签中加入属性border，属性值为数字。数字为边框的宽度。

结果：

例子二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="2">
    <tr>
        <td>作者编号</td>
        <td>作者姓名</td>
        <td>作者性别</td>
        <td>作者年龄</td>
    </tr>
    <tr>
        <td>1</td>
        <td>回头科科</td>
        <td>男</td>
        <td>24</td>
    </tr>

</table>
</body>
</html>

3.表头与标题

为了使表格的格式更加清晰方便，阅读性高，需要为表格设置表头
使用<th>标签，该标签也是<td>单元格的一种标题，本质上还是一种单元格，一般位于表格的第一行或者第一列，用来表明这一行或列的内容类别。

例子1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="2">
    <tr>
        <th>博主</th>
        <th>性别</th>
        <th>年龄</th>
        <th>天气情况</th>
        <th>出行情况</th>
    </tr>
    <tr>
        <td>回头科科</td>
        <td>性别</td>
        <td>年龄</td>
        <td><img src="./太阳.jpg" alt="正在缓冲" width="200px" height="200px"></td>
        <td>今天天气晴，天气炎热，注意防暑降温</td>

    </tr>
    <tr>
        <td>1</td>
        <td>男</td>
        <td>23</td>
        <td><img src="./下雨.jpg" alt="正在缓冲" width="200px" height="200px"></td>
        <td>今天天气阴，天气舒适，适合运动</td>
    </tr>
</table>
</body>
</html>

结果：

例子2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="2">
    <tr>
        <th>作者编号</th>
        <th>作者姓名</th>
        <th>作者性别</th>
        <th>作者年龄</th>
    </tr>
    <tr>
        <td>1</td>
        <td>回头科科</td>
        <td>男</td>
        <td>24</td>
    </tr>

</table>
</body>
</html>

3.2表格的标题

<th>和<td>在本质上都是单元格，但这两种不可以互换使用。th 全称为“table header”，
td 全称为“table data”
表格一般都有一个标题，用来表明表格的内容，一般位于表格的第一行，使用<caption>标签。一个表格只能含有一个表格标题。

表格标题：例子：

就是这样加，没有异议！！！！！

例子二.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="2">
    <caption>作者信息表</caption>
    <tr>
        <th>作者编号</th>
        <th>作者姓名</th>
        <th>作者性别</th>
        <th>作者年龄</th>
    </tr>
    <tr>
        <td>1</td>
        <td>回头科科</td>
        <td>男</td>
        <td>24</td>
    </tr>

</table>
</body>
</html>

4.合并行与列

在HTML中，也需要用到“表格合并行”和“表格合并列”。
和并行使用<td>标签的rowspan属性
而合并列则用到<td>标签的colspan属性。

这个东西直接在标签中加就可以，th，tb标签都适用。

使用例子：

<th colspan="2">日期</th>

设置rowspan属性值为2，即合并表格中的两行单元格

设置colspan属性值为2，即合并表格中的两列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="2">
    <caption>作者信息表</caption>
    <tr>
        <th rowspan="2">作者编号</th>
        <th colspan="2">作者姓名</th>
        <th>作者性别</th>
        <th>作者年龄</th>
    </tr>
    <tr>
        <td>1</td>
        <td>回头科科</td>
        <td>男</td>
        <td>24</td>
    </tr>
    <tr>
        <td>回</td>
        <td>头</td>
        <td>科</td>
        <td>科</td>
    </tr>

</table>
</body>
</html>

5.表格的其他属性

属性名	含义	属性值
width	设置表格的宽度	像素值
height	设置表格的高度	像素值
align	设置单元格内容的水平对齐方式	left、center、right
valign	设置单元格内容的垂直对齐方式	baseline、top、middle、 bottom 基线、顶部、中部、底