html如何为表格添加边框?

74次阅读
没有评论

要为HTML表格添加边框,可以使用CSS的border属性。以下是一个完整的示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML Table with Border</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            text-align: left;
            padding: 8px;
            border: 1px solid black; /* 添加表格边框 */
        }
        th {
            background-color: #ddd;
        }
    </style>
</head>
<body>

<table>
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>男</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td>女</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>22</td>
        <td>男</td>
    </tr>
    </tbody>
</table>

</body>
</html>

在CSS中,border-collapse属性用于指定边框合并的方式。将其设置为collapse可以让相邻单元格的边框合并为一个边框。

border属性可以控制表格边框的样式,包括宽度、样式和颜色。上例中,我们将其设置为1px solid black,表示边框宽度为1像素,样式为实线,颜色为黑色。th和td元素都添加了边框样式,以实现完整的表格边框效果。

正文完
 
评论(没有评论)