HTML表格标签与列表标签_在编写表格代码时用的列标签是-优快云博客

本文链接：https://blog.youkuaiyun.com/LyonBlog/article/details/107442956

文章目录

HTML表格标签与列表标签

HTML表格标签与列表标签

1表格标签

表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候。能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

1.1基本构成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>姓名</th>
        </tr>
        <tr>
            <td>刘德华</td>
            <td>男</td>
        </tr>
        <tr>
            <td>周星驰</td>
            <td>男</td>
        </tr>
    </table>
    <!-- <table> </table>是用于定义表格的标签。
         <tr> </tr> 标签用于定义表格中的行,必须嵌套在<table> </table> 标签中。
         <th> </th>标签表示HTML表格的表头部分(居中并加粗)
         <td> </td> 用于定义表格中的单元格,必须嵌套在<tr> </tr>标签中。 -->

</body>
</html>

1.2表格属性

属性名	属性值	描述
align	left，center，right	规定表格相对周围元素的对齐方式
border	1或“”	规定表格单元是否拥有边框，默认为“”，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table align="center" border="1" cellpadding="50" cellspacing="0" width="500" height="500">
        <tr><th>姓名</th><th>性别</th></tr>
        <tr><td>刘德华</td><td>男</td></tr>
        <tr><td>洪金宝</td><td>男</td></tr>
        <tr><td>章子怡</td><td>女</td></tr>
    </table>
</body>
</html>

1.3表格结构标签

使用场景:因为表格可能很长，为了更好的表示表格的语义,可以将表格分割成表格头部和表格主体两大部分
在表格标签中,分别用: <thead>标签表格的头部区域、<tbody> 标签表格的主体区域这样可以更好的分清表格结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>姓名</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>刘德华</td>
                <td>男</td>
            </tr>
            <tr>
                <td>周星驰</td>
                <td>男</td>
            </tr>
        </tbody>    
    </table>
</body>
</html>

1.4合并单元格

跨行合并: rowspan="合并单元格的个数”（上下合并）
跨行:最上侧单元格为目标单元格写合并代码

跨列合井: colspan="合并单元格的个数”（左右合并）
跨列:最左侧单元格为目标单元格,写合并代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" cellpandding="0" cellspacing="0">
        <thead>
            <tr>
                <th colspan="2">姓名</th>
                
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">刘德华</td>
                <td>男</td>
            </tr>
            <tr>
                <td>男</td>
            </tr>
        </tbody>    
    </table>
    <!-- 1.先确定是跨行还是跨列合并。
    2.找到目标单元格.写上合并方式=合并的单元格数量。比如: <tdcolspan= "2” > </td>.
    3.删除多余的单元格。 -->

</body>
</html>

2列表标签

表格是用来显示数据的,那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序,它作为布局会更加自由和方便。

2.1无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>榴莲</li>
        <li>梨</li>
        <li><strong>我爱</strong>李子</li>
    </ul>
    <!-- 1.无序列表的各个列表项之间没有顺序级别之分,并列的。
    2. <ul> </ul>中帜能嵌套<li></li> ,直接在<ul> </ul>标签中输入其他标签或者文字的做法是不被允许的。
    3. <li>与</li>之间相当于一一个容器,可以容纳所有元素。 -->

</body>
</html>

2.2有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol>
        <li>苹果</li>
        <li>香蕉</li>
        <li>榴莲</li>
        <li>梨</li>
        <li>李子</li>
    </ol>
</body>
</html>

2.3自定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>安全中心</dt>
        <dd>账号</dd>
        <dd>订单</dd>
        <dd>服务</dd>
    </dl>
</body>
</html>