HTML的表格标签以及表格的使用——一文带你理解与吃透

板栗大王

于 2025-03-25 21:26:20 发布

阅读量1k

点赞数 11

文章标签： html 前端

本文链接：https://blog.csdn.net/2501_90906984/article/details/146511917

版权

一、表格标签解析

在网页开发中，HTML提供了一系列专门用于创建表格的标签，通过这些标签的组合，能够搭建出结构清晰、功能丰富的表格。下文将以保姆级别教学表格标签以及表格的使用。

1、表格基本结构标签

-<table>：该标签用于定义整个表格，是表格的容器。所有其他表格相关标签都包含在<table>标签内。例如：<table border="1">,其中border="1"属性用于设置表格边框的宽度，取值为0时表格无边框。常用属性有border, width, height.

-<tr>：代表表格中的一行。在<table>标签内，通过多个<tr>标签来定义表格的行数。

-<td>:定义表格行中的一个单元格，用于放置具体的数据内容，文本、图片、链接等都能嵌入其中。

2、表格标签基本属性

-<th>:可以帮助搜索引擎实现更好的索引，还可以帮助css更好的控制外观。其中scope属性取值col或row用来表明此元素是列标题还是行标题。

<tr>、<th>、<td>三个标签都有align属性，就是水平对齐方式设置。

二、列表

1、<ul>是识别无序列表标签的一个界限。

<ol>：用来识别有序列表。

列表嵌套指在一个列表里，以其他列表作为元素，借此分层组织数据，呈现复杂或层级化信息。

2、例题

列表嵌套就是有序列表和无序列表的混合使用。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表的嵌套</title>
</head>

<body>

    <h2>商城支付向导</h2>
    <ul type="circle">
        <li>支付方式</li>
        <ul type="disc">
            <li>货到付款</li>
            <li>财付通</li>
            <li>支付宝</li>
            <li>网银在线</li>
        </ul>

        <hr>

        <li>网银在线支付步骤</li>
        <ol type="A">
            <li>选择您要使用的网上银行；</li>
            <li>显示您的应付总价，点击“确认无误，付款”；</li>
            <li>确定您在银行的预留信息，点击确定；</li>
            <li>输入您的网银账号，登陆密码，验证码；</li>
            <li>支付成功，提示“已完成付款"。</li>
        </ol>

        <hr>
    </ul>

</body>

</html>

运行结果：

三、表格

表格的常用属性：

例：

<!-- table>tr*3>tb*3 --快捷生成-->
<!-- border--边框 -->
<table border="1rpx" width="400rpx" height="200rpx">
    <tr>
        <!-- th--表头、td--表格 、scope="col"--行标题、“row”--列标题-->
        <th scope="row">单元格1</th>
        <th scope="col">单元格2</th>
        <th scope="col">单元格3</th>
    </tr>
    <tr>
        <th scope="row">单元格4</th>
        <td>单元格5</td>
        <td>单元格6</td>
    </tr>
    <tr>
        <th scope="row">单元格7</th>
        <td>单元格8</td>
        <td>单元格9</td>
    </tr>
</table>

生成结果：

小技巧：table>tr*3>td*3 这样可快速生成三行三列（看自己需求只需改数字）。

四、不规则列表

1、colspan用于指定单元横向跨越列表。

rowspan用于指定单元格纵向跨越的行数。

例题：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格的创建</title>
</head>

<body>
    <h2>创建表格练习</h2>
    <table border="1prx">
        <tr>
            <th></th>
            <th>教师人数</th>
            <th>学生人数</th>
            <th>总人数</th>
        </tr>
        <tr>
            <th>2021年</th>
            <td>100</td>
            <td>1500</td>
            <td>1600</td>
        </tr>
        <tr>
            <th>2023年</th>
            <td>150</td>
            <td>3000</td>
            <td>3150</td>
        </tr>
        <tr>
            <th>2024年</th>
            <td>250</td>
            <td>4000</td>
            <td>4250</td>
        </tr>
    </table>

    <h2>合并单元格练习</h2>
    <table border="1rpx">
        <tr>
            <th></th>
            <th>教师人数</th>
            <th>学生人数</th>
            <th>总人数</th>
        </tr>
        <tr>
            <th>2021年</th>
            <td colspan="2"></td>
            <td rowspan="2"></td>
        </tr>
        <tr>
            <th>2022年</th>
            <td></td>
            <td></td>

        </tr>
        <tr>
            <th>2023年</th>
            <td colspan="2" rowspan="2"></td>
            <td></td>

        </tr>
        <tr>
            <th>2024年</th>
            <td></td>
        </tr>
    </table>
</body>

</html>

运行结果：