HTML表格

回头科科

已于 2022-04-20 19:14:14 修改

阅读量1.6k

点赞数

分类专栏： HTML 文章标签： python 开发语言 html 前端

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

本文链接：https://blog.csdn.net/jcf52/article/details/123636234

版权

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

摘要由CSDN通过智能技术生成

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

一，表格的基本结构

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>

结果：