要为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元素都添加了边框样式,以实现完整的表格边框效果。
正文完