6、css学习6（表格）

最新推荐文章于 2024-09-07 19:05:57 发布

木有童年

最新推荐文章于 2024-09-07 19:05:57 发布

阅读量626

点赞数

分类专栏： CSS学习文章标签： css 学习前端

本文链接：https://blog.csdn.net/Natuly/article/details/132533287

版权

CSS学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、指定CSS表格边框，使用border属性。

2、表格双边框是因为th/td有各自独立的边框。

3、boder-collapse设置表格边框是否被折叠成一个单一的边框。

4、width和height属性定义表格的宽度和高度。

5、text-align属性设置水平对齐方式。

6、vertic-align属性设置垂直对齐方式。

7、padding填充属性用来控制边框与内容之间的距离。

8、background-color、color分别设置背景颜色与文本颜色。

9、用caption属性定义表格名称。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="uft-8">
        <title>CSS修饰表格</title>
        <style>
            table,th,td{
                border: 1px solid blue;
                border-collapse: collapse;
            }
            th{
                height: 50px;
                background-color: bisque;
            }
            td{
                text-align: center;
                vertical-align: bottom;
                padding: 15px;
                color: green;
            }
            caption {caption-side: bottom;color:red}
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>名称</th>
                <th>简介</th>
            </tr>
            <tr>
                <td>php</td>
                <td>世界上最好的编程语言</td>
            </tr>
            <tr>
                <td>java</td>
                <td>也很强</td>
            </tr>
            <caption>表1：世界著名编程语言比较</caption>
        </table>
    </body>
</html>

运行结果：

木有童年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6、css学习6（表格）

8、background-color、color分别设置背景颜色与文本颜色。3、boder-collapse设置表格边框是否被折叠成一个单一的边框。7、padding填充属性用来控制边框与内容之间的距离。4、width和height属性定义表格的宽度和高度。6、vertic-align属性设置垂直对齐方式。2、表格双边框是因为th/td有各自独立的边框。1、指定CSS表格边框，使用border属性。5、text-align属性设置水平对齐方式。9、用caption属性定义表格名称。
复制链接

扫一扫

专栏目录