给表格化个妆

Author Avatar
Ninefire 6月 06, 2018
  • 在其它设备中阅读本文章
  • tabletd之间默认存在一个距离,通过border-spacing属性可以设置这个距离。
  • border-collapse可以用来设置表格边框合并。
    如果设置了边框合并,则border-spacing自动失效。
  • 使用<th></th>标签来表示表头
    用法和td相同,不同之处在于th的默认样式,加粗居中。

例如:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style type="text/css">
        table {
            /* 设置表格总宽度 */
            width: 300px;
            /* 设置表格总高度 */
            height: 120px;
            /* 设置表格居中 */
            margin: 50px auto;
            /* 设置边框间距,自动失效,不信你试试 */
            border-spacing: 0;
            /* 设置边框合并 */
            border-collapse: collapse;
        }

        th,td {
            /* 设置边框 */
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>住址</th>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td></td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪八戒</td>
            <td></td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沙僧</td>
            <td></td>
            <td>流沙河</td>
        </tr>
    </table>
</body>

</html>

查看效果 <<戳它!!!


请看以下代码和效果:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style type="text/css">
        table {
            /* 设置表格总宽度 */
            width: 300px;
            /* 设置表格居中 */
            margin: 50px auto;
            /* 设置边框合并 */
            border-collapse: collapse;
        }

        th,td {
            /* 设置边框 */
            border: 1px solid rgb(170, 170, 170);
        }

        /* 设置表格隔行换色 */
        tr:nth-child(even) {
            background-color: #ccc;
        }

        /* 设置鼠标移入的颜色 */
        tr:hover {
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <table>
        <tr><th>学号</th><th>姓名</th><th>性别</th><th>住址</th></tr>
        <tr><td>1</td><td>孙悟空</td><td></td><td>花果山</td></tr>
        <tr><td>2</td><td>猪八戒</td><td></td><td>高老庄</td></tr>
        <tr><td>3</td><td>沙僧</td><td></td><td>流沙河</td></tr>
        <tr><td>1</td><td>孙悟空</td><td></td><td>花果山</td></tr>
        <tr><td>2</td><td>猪八戒</td><td></td><td>高老庄</td></tr>
        <tr><td>3</td><td>沙僧</td><td></td><td>流沙河</td></tr>
        <tr><td>1</td><td>孙悟空</td><td></td><td>花果山</td></tr>
        <tr><td>2</td><td>猪八戒</td><td></td><td>高老庄</td></tr>
        <tr><td>3</td><td>沙僧</td><td></td><td>流沙河</td></tr>
        <tr><td>1</td><td>孙悟空</td><td></td><td>花果山</td></tr>
        <tr><td>2</td><td>猪八戒</td><td></td><td>高老庄</td></tr>
        <tr><td>3</td><td>沙僧</td><td></td><td>流沙河</td></tr>
        <tr><td>1</td><td>孙悟空</td><td></td><td>花果山</td></tr>
        <tr><td>2</td><td>猪八戒</td><td></td><td>高老庄</td></tr>
        <tr><td>3</td><td>沙僧</td><td></td><td>流沙河</td></tr>
        <tr><td>1</td><td>孙悟空</td><td></td><td>花果山</td></tr>
        <tr><td>2</td><td>猪八戒</td><td></td><td>高老庄</td></tr>
        <tr><td>3</td><td>沙僧</td><td></td><td>流沙河</td></tr>
        <tr><td>1</td><td>孙悟空</td><td></td><td>花果山</td></tr>
        <tr><td>2</td><td>猪八戒</td><td></td><td>高老庄</td></tr>
        <tr><td>3</td><td>沙僧</td><td></td><td>流沙河</td></tr>
        <tr><td>1</td><td>孙悟空</td><td></td><td>花果山</td></tr>
        <tr><td>2</td><td>猪八戒</td><td></td><td>高老庄</td></tr>
        <tr><td>3</td><td>沙僧</td><td></td><td>流沙河</td></tr>
    </table>
</body>

</html>

查看效果 <<戳它!!!

如发现错误请联系我,谢谢你。
本文链接:http://ninefire.tk/HTML&CSS.basics/61.html