1.6HTML的表格和列表_html table怎么设置一行为一个单元格?-优快云博客

本文链接：https://blog.youkuaiyun.com/beloved_yu/article/details/127429857

本文介绍了HTML中的表格标签<td>和<tr>的用法，以及如何创建表头、对齐和无边框效果。还讲解了列表元素如<ul>、<ol>和自定义列表的使用，包括li标签和不同类型的列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下学习资源均来自于

HTML 简介 | 菜鸟教程

AcWing

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。

每一个td代表一行，每一个td，代表一个纵向的表格

实例：

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

<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 border="1">
        <tr>
            <td>第1列</td>
            <td>第2列</td>
            <td>第3列</td>
        </tr>
        <tr>
            <td>第1列</td>
            <td>第2列</td>
            <td>第3列</td>
        </tr>
        <tr>
            <td>第1列</td>
            <td>第2列</td>
            <td>第3列</td>
        </tr>

    </table>
</body>

</html>

然后是表头：组合tr 和th使用的：

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

<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 border="1">
        <tr>
            <td>这是表头</td>
        </tr>
        <tr>
            <td>第1列</td>
            <td>第2列</td>
            <td>第3列</td>
        </tr>
        <tr>
            <td>第1列</td>
            <td>第2列</td>
            <td>第3列</td>
        </tr>
        <tr>
            <td>第1列</td>
            <td>第2列</td>
            <td>第3列</td>
        </tr>

    </table>
</body>

</html>

然后呢，我们想要表头对齐，咋办呢？

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

<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 border="1">
        <tr>
            <td colspan="3">这是表头</td>
        </tr>
        <tr>
            <td>第1列</td>
            <td>第2列</td>
            <td>第3列</td>
        </tr>
        <tr>
            <td>第1列</td>
            <td>第2列</td>
            <td>第3列</td>
        </tr>
        <tr>
            <td>第1列</td>
            <td>第2列</td>
            <td>第3列</td>
        </tr>

    </table>
</body>

</html>

如果我们border=“0”；

就设置了一个没有边框的表格，当然，css里面渲染最好。

列表就比较好理解

有两种unordered list和ordered list。

li的缩写是list item

ul是unordered lists的缩写 (无序列表)

li是list item的缩写（列表项目）

ol是ordered lists的缩写（有序列表）

dl是definition lists的英文缩写 (自定义列表)

dt是definition term的缩写 (自定义列表组)

dd是definition description的缩写（自定义列表描述）

nl是navigation lists的英文缩写（导航列表）

tr是table row的缩写（表格中的一行）

th是table header cell的缩写（表格中的表头）

td是table data cell的缩写（表格中的一个单元格）

这是有序的：

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

<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>
    <h4>青岛大学最能睡的男人</h4>
    <ol type="A">
        <li>Joyasa</li>
        <li>Joyasa</li>
        <li>Joyasa</li>
        <li>Joyasa</li>
    </ol>
</body>

</html>

当然，我加上type的作用是让他显示abcd排序下去，如果不加的话，默认1234

这是无序的

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

<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>
    <h4>青岛大学最能睡的男人</h4>
    <ul>
        <li>Joyasa</li>
        <li>Joyasa</li>
        <li>Joyasa</li>
        <li>Joyasa</li>
    </ul>
</body>

</html>