HTML与CSS表格与列表详解及代码示例-优快云博客

本文链接：https://blog.youkuaiyun.com/yan626413/article/details/125813764

表格

1 . table：定义表格

不设置宽度时，宽度被内容撑开

设置了宽度并且内部内容不设置宽度时，td会按照内容长度比例拉伸

2 . caption: 定义表格的标题

默认样式：文本默认在表格的水平居中位置

3 . thead：定义表格的表头

可以省略，浏览器在解析的时候，浏览器会自动添加

4 . tr: 定义表格的行

5 . th：定义表头表格的单元格

6 . tbody：定义表格的主体部分

可以省略，浏览器在解析的时候，浏览器会自动添加

7 . td：定义标准的单元格

8 . rowspan :合并行

9 . colspan：列合并，用于设置一个单元格占几列

代码参考（自由复制）

<!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>表格</title>
    <style>
        .tab1{
            width: 500px;
            border: 1px solid;
            /* 合并边框 */
            border-collapse: collapse;
            /* 继承父元素 */
            text-align: center;
            
        }
        td{
            border: 1px solid;
            width: 100px;
            height: 50px;
            /* 行高 */
            line-height: 50px;
        }
        th{
            border: 1px solid;
        }
    </style>
</head>
<body>
     <table class="tab1">
        <caption>课程表</caption>
        <thead>
            <tr>
                <th>时间</th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
                <th>星期六</th>
                <th>星期天</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">上午</td>
                <td>数学</td>
                <td>英语</td>
                <td>语文</td>
                <td>物理</td>
                <td>化学</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <!-- <td>上午</td> -->
                <td>数学</td>
                <td>英语</td>
                <td>语文</td>
                <td>物理</td>
                <td>化学</td>
                <td></td>
                <td></td>
            </tr>
            <tr></tr>
            <tr>
                <td rowspan="2">下午</td>
                <td>数学</td>
                <td>英语</td>
                <td>语文</td>
                <td>物理</td>
                <td>化学</td>
                <td></td>
                <td></td>
            </tr><tr>
                <!-- <td>下午</td> -->
                <td>数学</td>
                <td>英语</td>
                <td>语文</td>
                <td>物理</td>
                <td>化学</td>
                <td></td>
                <td></td>
            </tr>
            <tr></tr>
            <tr>
                <td>晚上</td>
                <td colspan="5">自习</td>
                <!-- <td>自习</td>
                <td>自习</td>
                <td>自习</td>
                <td>自习</td> -->
                <td></td>
                <td></td>
            </tr>
        </tbody>
     </table>
</body>
</html>

列表

1 . 无序列表：常用导航栏

ul：定义无序列表

默认样式：上下有16px外边距值会根据内容文本大小改变

左内边距40px

li：列表中的项

注意：默认无序列表有“圆点”

2 . 有序列表：

ol：定义有序列表

默认样式：上下有16px外边距值会根据内容文本大小改变

左内边距40px

li：列表中的项

注意：默认无序列表有“阿拉伯数字”，可通过html属性改变

type：列表的类型

值：1.默认值，阿拉伯数字

2.大写英文

3.小写英文

4.大写罗马数字

5.小写罗马数字

3 . 自定义列表：常用底部导航群

dl：定义自定义列表

默认样式：上下有16px外边距值会根据内容文本大小改变

dt：定义列表项

dd：定义列表项的描述

默认样式：左外边距40px

4 . list-style: 删除列表项的前缀

代码参考（自由复制）

<!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>无序列表</title>
    <style>
        /* *{
            margin: 0;
            padding: 0;
        } */
        ul{
            list-style: none;
            margin: 0;
        }
    </style>
</head>
<body>
    <ul>
        <li>赵露思</li>
        <li>赵露思</li>
        <li>赵露思</li>
        <li>赵露思</li>
    </ul>
    <ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>
    <dl>
        <dt>1</dt>
        <dd>描述列表</dd>
        <dd>
            <a href="#">描述列表</a>
            <a href="#">描述列表</a>
            <a href="#">描述列表</a>
            <a href="#">描述列表</a>
        </dd>
    </dl>
</body>
</html>