CSS07：表格属性

最新推荐文章于 2024-10-02 15:35:50 发布

MNox

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量45

点赞数

分类专栏：前端三剑客文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_62820255/article/details/130328793

版权

前端三剑客专栏收录该内容

19 篇文章 0 订阅

订阅专栏

表格边框

使用border属性

table, td{

border: 1px solid blueviolet;

}

折叠边框

border-collapse：设置表格的边框是否被折叠成一个单一的边框或隔开

table{

border-collapse: collapse;

}

table, td{

border: 1px solid blueviolet;

}

表格宽度和高度

width、height

table{

border-collapse: collapse;

width: 300px;

height: 300px;

}

表格文字对齐

text-align设置水平对齐方式，向左、右、中心

td{

text-align: center;

}

垂直对齐属性设置垂直对齐

td{

text-align: center;

height: 50px;

vertical-align: bottom;

}

表格填充

如果在表格中控制空格之间的边框，应使用td和th元素的填充属性

td{

padding: 20px;

}

表格颜色

指定边框颜色，和th元素的文本和背景颜色

background-color: #266666;

color: #ffffff;

<!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>
    <style>
        table{
            border-collapse: collapse;
        }
        table, td{
            border: 1px solid blueviolet;
        }
        td{
            text-align: center;
            vertical-align: center;
            padding: 20px;
            background-color: #266666;
            color: #ffffff;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
</body>
</html>