CSS控制表格边框(属性)以及实现细线表格

CSS控制表格边框

可以为表格标签定义宽,高和边框样式,并为单元格单独设置相应的边框。如果只设置<table>样式,则只显示外边框的样式,内部不显示边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签table的使用</title>
    <style type="text/css">
        table{
            width: 200px;
            height: 200px;
            /*background-color: red;*/
            border: 2px solid red;
        }
    </style>
</head>
<body>
<table>
    <caption>人员表</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>婚姻状况</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>19</td>
        <td></td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>20</td>
        <td></td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>翠花</td>
        <td>20</td>
        <td></td>
        <td>未婚</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

边框合并

给table属性设置该属性
border-collapse:collapse;      separate属性值为默认属性值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签table的使用</title>
    <style type="text/css">
        table{
            width: 200px;
            height: 200px;
            /*background-color: red;*/
            border: 2px solid red;
            border-collapse: collapse;
        }
        th,td{
            border:2px solid red;
        }
    </style>
</head>
<body>
<table>
    <caption>人员表</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>婚姻状况</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>19</td>
        <td></td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>20</td>
        <td></td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>翠花</td>
        <td>20</td>
        <td></td>
        <td>未婚</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

◆单元格设置的外边距属性margin不生效
◆如果要设置单元格内容与边框之间的距离,可以对<th>标签应用内边距样式属性padding或者对<table>标签应用cellpadding属性。
◆要想设置相邻单元格边框之间的距离,只能对<table>标签应用cellspacing属性。
◆如果对同一行中的单元格定义不同的高度,或对同一列的第一个定义不同的宽度时,取较大者。
发布了29 篇原创文章 · 获赞 3 · 访问量 391

猜你喜欢

转载自blog.csdn.net/dwjdj/article/details/104061041
今日推荐