6、css学习6（表格）

news2024/11/22 20:38:54

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>

运行结果：