CSS属性：列表和表格

最新推荐文章于 2022-04-01 14:18:35 发布

路飞小朋友

最新推荐文章于 2022-04-01 14:18:35 发布

阅读量182

点赞数

分类专栏： ★ CSS

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

版权

★ CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

CSS 列表属性 link

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

<style>
    ul{
        list-style:square inside;
    }
</style>

<body>
<ul>
    <li>111</li>
    <li>222</li>
</ul>

CSS 表格属性 link

css属性

border-collapse 设置边框合并，和border-spacing有冲突
border-spacing 设置边框之间的距离
caption-side 设置表格标题的位置
empty-cells 设置是否显示表格中的空单元格
table-layout 设置显示单元、行和列的算法，fixed 表示平均分
vertical-align 设置元素的垂直对齐方式

标签属性

colspan 横向单元格合并
rowspan 纵向单元格合并

代码示例

按照比例提前规划每列所占的宽度
设置表格边框之间的空白
显示表格中的空单元
设置表格标题的位置
合并单元格，th标签属性 colspan和rowspan
text-align 和 vertical-align 属性设置表格中文本横向与纵向对齐方式

<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" width="20%">姓名和年龄</th>
        <!--<th>年龄</th>-->
        <th width="10%">性别</th>
        <th width="70%">电子邮件</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>

tr不是table的子元素
在这里插入图片描述
块元素垂直居中

转换为表格垂直居中
绝对定位垂直居中

路飞小朋友

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS属性：列表和表格

CSS 列表属性 linklist-style 简写属性，把所有用于列表的属性设置于一个声明中list-style-image 将图象设置为列表项标志list-style-position 设置列表项标志的位置（li内外）list-style-type 设置列表项标志的类型，none 无标记<style> ul{ list-style:square inside; }</style><body><ul>
复制链接

扫一扫

专栏目录