HTML表格与列表

最新推荐文章于 2023-04-01 17:39:05 发布

路飞小朋友

最新推荐文章于 2023-04-01 17:39:05 发布

阅读量142

点赞数

分类专栏： ★ HTML

本文链接：https://blog.csdn.net/wozhangyi/article/details/106517279

版权

★ HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

表格 link

表格常用标签 link

table -------- 定义表格
caption ------ 定义表格标题
th ----------- 定义表格中的表头单元格，加粗
tr ----------- 定义表格中的行
td ----------- 定义表格中的单元
thead -------- 定义表格中的表头内容
tbody -------- 定义表格中的主体内容
tfoot -------- 定义表格中的表注内容（脚注）
col ---------- 定义表格中一个或多个列的属性值
colgroup ----- 定义表格中供格式化的列组

CSS 表格属性 link

border-collapse 设置是否把表格边框合并为单一的边框
border-spacing 设置分隔单元格边框的距离
caption-side 设置表格标题的位置
empty-cells 设置是否显示表格中的空单元格
table-layout 设置显示单元、行和列的算法，fixed 表示平均分配各个列，不允许被撑大

单元格的合并（标签属性）

单元格的合并属性是 td 和 th 的属性
colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置
rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上要占据两个单元格的位置。

表格文本对齐

text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中
vertical-align 用来指定行内元素或表格单元格元素的垂直对齐方式
也可以用 line-height 和 height 配合实现垂直居中，用于块和行内块（注意和 vertical-align 的区别）

代码示例

按照比例提前规划每列所占的宽度
设置表格边框之间的空白
显示表格中的空单元
设置表格标题的位置
合并单元格，th标签属性 colspan和rowspan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        table{
            width: 50%;
            margin: 0 auto;
            /*border-collapse 属性设置是否将表格边框折叠为单一边框*/
            /*border-collapse: collapse;*/
            /*border-spacing 设置表格边框之间的空白 margin在表格中无效*/
            border-spacing: 10px;
            /*显示或隐藏表格中的空单元*/
            empty-cells: hide;
        }
        table, th, td{
            border: #00b3ff 2px solid;
        }
        caption{
            /*设置表格标题的位置*/
            caption-side: bottom;
            font-size: 20px;
        }
        th{
            background-color: #A7C942;
            font-size: 20px;
            color: white;
        }
        td{
            color: black;
            background-color: #EAF2D3;
        }
        th, td{
            height: 60px;
            padding: 0 20px;
            /*text-align 和 vertical-align 属性设置表格中文本横向与纵向对齐方式*/
            text-align: center;
            vertical-align: center;
        }

    </style>
</head>
<body>

<table>
    <caption>我的标题</caption>
    <tr>
        <!--合并单元格-->
        <th colspan="2">姓名和年龄</th>
        <!--<th>年龄</th>-->
        <th>性别</th>
        <th>电子邮件</th>
    </tr>
    <tr>
        <td>aa</td>
        <td>18</td>
        <td>男</td>
        <td>231312321@gmail.com</td>
    </tr>
    <tr>
        <td></td>
        <td>18</td>
        <td>女</td>
        <td>231312321@gmail.com</td>
    </tr>
</table>

</body>

</html>

运行效果
在这里插入图片描述

列表 link

列表常用标签 link

无序列表，常配合float制作导航栏
有序列表，用的比较少
定义列表，dt 列表的标题 (必写)，dd 是列表项 (可不写)

ul --------- 定义无序列表
ol --------- 定义有序列表
li --------- 定义列表的项目
dl --------- 定义定义列表
dt --------- 定义定义列表中的项目
dd --------- 定义定义列表中项目的描述
menu ------- 定义命令的菜单/列表
menuitem --- 定义用户可以从弹出菜单调用的命令/菜单项目
command ---- 定义命令按钮

CSS 列表属性 link

list-style 简写属性，把所有用于列表的属性设置于一个声明中
list-style-image 将图象设置为列表项标志
list-style-position 设置列表项标志的位置（ul 或 li）
list-style-type 设置列表项标志的类型，none 无标记

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    /*无序列表更改样式*/
    ul li.disc{
        list-style: disc;
    }
    ul li.circle{
        list-style: circle;
    }
    ul li.square{
        list-style: square;
    }
    ul li.none{
        list-style: none;
        /*list-style: url("#");*/
    }

    /*有序列表更改样式*/
    ol li{
        list-style: lower-roman;
    }
</style>
<body>


<!--无序列表-->
<ul>
    <li class="disc">无序列表</li>
    <li class="circle">无序列表</li>

    <li class="square">无序列表</li>
    <ul>
        <li>嵌套</li>
        <li>嵌套</li>
    </ul>
    <li class="none">无序列表</li>

</ul>


<!--有序列表-->
<ol>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>


<!--定义列表-->
<dl>
    <dt>类</dt>
    <dd>类是抽象的，抽象的，代表以类事物，比如人类，猫类…</dd>
    <dt>对象</dt>
    <dd>对象是具体的，实际的，代表一个具体的事物，万物皆对象</dd>
</dl>
</body>
</html>

路飞小朋友

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML表格与列表

表格 link表格常用标签table -------- 定义表格caption ------ 定义表格标题th ----------- 定义表格中的表头单元格tr ----------- 定义表格中的行td ----------- 定义表格中的单元thead -------- 定义表格中的表头内容tbody -------- 定义表格中的主体内容tfoot -------- 定义表格中的表注内容（脚注）col ---------- 定义表格中一个或多个列的属性值colgroup ---
复制链接

扫一扫

专栏目录