前端基础：HTML表格标签、无序列表、自定义列表

曹莓奶昔

已于 2022-03-20 10:36:47 修改

阅读量2.7k

点赞数 2

分类专栏： HTML 文章标签： html 前端 vscode visual studio code

于 2022-03-13 17:25:42 首次发布

本文链接：https://blog.csdn.net/weixin_49555741/article/details/123460348

版权

HTML 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

1. 表格标签

表格主要是用来显示、展示数据的，一个好的表格可以把繁杂的数据整理的有条理。

1.2 基本语法

<table>

        <tr>

                <td>表格里的文字</td>

                        …

        </tr>

        …

</table>

标签	描述
<table>	定义表格的标签
<tr>	表格中的行，必须放在<table>里
<td>	单元格的内容，必须放在<tr>里

1.2 表头单元格标签

<th>标签（table head缩写）表示表格的表头部分。它一般位于表格的第一行第一列，单元格里的内容加粗居中显示，达到突出显示的作用。

1.2.1 表头单元格语法

<table>

        <tr>

                <th>姓名</th>

                        …

        </tr>

        …

</table>

1.3 表格属性

在实际开发中不常用，后面用css设置，但是要记住这些属性，在后期的css学习中会使用。

属性名	属性值	描述
align	left、center、right	表格对齐方式
border	1或者 “ ”	是否有边框，默认值为无边框
cellpadding	像素值	单元格边缘与内容之间的空白，默认1像素
cellspacing	像素值	单元格之间的空白，默认2像素
width	像素值或者百分比	表格的宽度

注意：这些属性要写到table标签里面

<!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 align="center" border="2" cellpadding="0" cellspacing="0" width="200" height="100">
        <tr>
            <th>姓名</th>
            <th>班级</th>
            <th>学号</th>
        </tr>
        <tr>
            <td>小米</td>
            <td>1班</td>
            <td>0122</td>
        </tr>
    </table>
</body>

</html>

1.3 表格结构标签

因为表格会比较多，可以把表格分为表格头部<thead>和表格主体<tbody>两大部分，使结构清晰化。在实际开发中会经常使用。

1.4 合并单元格

1.4.1 合并单元格的方式

跨行合并：rowspan=“合并单元格个数”
跨列合并：colspan=“合并单元格个数”

1.4.2 目标单元格

跨行：最上方单元格为目标单元格，写合并单元格
跨列：最左侧单元格为目标单元格，写合并单元格

1.4.3 合并单元格三步骤

确定合并方式（跨行还是跨列）
找目标单元格，写合并单元格数量。例如：<td colspan="2"></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 align="center" border="2" cellpadding="0" cellspacing="0" width="200">
        <thead>
            <tr>
                <th>姓名</th>
                <th colspan="2">班级</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小米</td>
                <td>1班</td>
                <td>0122</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

2. 列表标签

列表主要是用来布局的，它最大的特点是整齐、整洁、有序。

列表主要分为三大类：无序列表、有序列表、自定义列表

2.1 无序列表（重点）

2.1.1 基本语法

<ul>

<li>列表项</li>

<li>列表项</li>

<li>列表项</li>

</ul>

<!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>奶茶</li>
        <li>冰淇淋</li>
        <li>炸鸡</li>
    </ul>
</body>

</html>

注意：

列表项之间无等级之分，它们是并列的；
ul只能嵌套li，ul里面不能放其他标签或者文字；
li相当一个容器，可以容纳所有元素
无序列表都有自己的属性，在实际开发中用css设置

2.2 有序列表(了解）

<ol>

<li>列表项</li>

<li>列表项</li>

<li>列表项</li>

</ol>

注意：

ol只能嵌套li，ol里面不能放其他标签或者文字；
li相当一个容器，可以容纳所有元素
有序列表都有自己的属性，在实际开发中用css设置

2.3 自定义列表（重点）

用于对术语或者名词解释或者描述，如下下效果的实现需要用到自定义列表。

2.3.1 自定义标签语法

<dl>

<dt>名词</dt>

<dd>解释名词1</dd>

<dd>解释名词2</dd>

</dl>

注意：

<dl>里面只包含<dt><dd>
<dd>和<dl>没有限制，经常是一个<dt>对应多个<dd>

曹莓奶昔

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
前端基础：HTML表格标签、无序列表、自定义列表

目录1. 表格标签1.2 基本语法1.2 表头单元格标签1.2.1 表头单元格语法1.3表格属性1.3 表格结构标签1.4 合并单元格1.4.1 合并单元格的方式1.4.2 目标单元格1.4.3 合并单元格三步骤2. 列表标签2.1 无序列表（重点）2.1.1 基本语法2.2 有序列表(了解）2.3 自定义列表（重点）2.3.1 自定义标签语法1. 表格标签表格主要是用来显示、展示数据的，一个好的表格可以把繁杂的数...
复制链接

扫一扫