在HTML中，我们可以使用<table>标签来创建表格，而<tr>标签则用于定义表格中的行，如果我们想要设置<tr>的边框，我们可以通过CSS来实现。
我们需要在HTML文件中创建一个表格，并为其添加一些行，我们可以使用CSS来设置这些行的边框样式。
以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>
在这个示例中，我们首先在<head>标签中定义了一个CSS样式，该样式将表格、表头和单元格的边框设置为1像素宽的黑色实线，我们在<body>标签中创建了一个表格，并为它添加了三行，每行都包含一个表头单元格（由<th>标签定义）和一个数据单元格（由<td>标签定义），由于我们为表格、表头和单元格设置了边框样式，所以这个表格的每一行都有边框。
接下来，我们来看看如何设置边框的颜色、宽度和样式，在CSS中，我们可以使用border-color属性来设置边框的颜色，使用border-width属性来设置边框的宽度，使用border-style属性来设置边框的样式，我们可以将上述CSS样式修改为以下形式：
table, th, td {
border: 2px dashed red;
}
在这个样式中，我们将边框的宽度设置为2像素，将边框的样式设置为虚线，并将边框的颜色设置为红色，这个表格的每一行都会有2像素宽的红色虚线边框。
我们来看看如何设置单个单元格的边框，在CSS中，我们可以使用border-top、border-right、border-bottom和border-left属性来分别设置单元格的上、右、下和左边框，我们可以将上述CSS样式修改为以下形式：
table, th, td {
border: 2px solid black;
}
th, td {
border-top: none; /* 删除表头和数据单元格的上边框 */
border-right: 1px dashed red; /* 为数据单元格添加右边框 */
border-bottom: 2px dotted blue; /* 为数据单元格添加下边框 */
border-left: 3px double green; /* 为数据单元格添加左边框 */
}
在这个样式中，我们首先为表格、表头和单元格设置了2像素宽的黑色实线边框，我们为表头和数据单元格删除了上边框，为数据单元格添加了右、下和左边框，这个表格的每一行的数据单元格都会有2像素宽的黑色实线左边框、1像素宽的红色虚线右边框、2像素宽的蓝色点状下边框和3像素宽的绿色双线左边框。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/377011.html
微信扫一扫