<table>设置行边框,行间距
时间: 2023-11-12 14:06:04 浏览: 80
可以使用CSS来设置表格的行边框和行间距,以下是示例代码:
```html
<table>
<tr style="border: 1px solid black;">
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr style="border: 1px solid black;">
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
```
在上述代码中,`<tr>`标签被设置了一个1像素宽的黑色边框。如果要设置行间距,可以在`<table>`标签中使用`cellspacing`属性,例如:
```html
<table cellspacing="10">
<tr style="border: 1px solid black;">
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr style="border: 1px solid black;">
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
```
在上述代码中,`cellspacing`属性被设置为10像素,这将在每个单元格周围创建10像素的间隔。
相关问题
<table>设置行与行之间的空白间隔
可以使用CSS中的`border-spacing`属性来设置行与行之间的空白间隔。具体操作如下:
1. 在`<table>`标签中添加`style`属性,并设置为`border-collapse: separate;`。这样可以确保单元格边框不会合并。
2. 在`<table>`标签中添加`cellspacing`属性,并设置为0。这样可以去掉默认的单元格间距。
3. 在`<table>`标签的CSS样式中添加`border-spacing`属性,并设置为所需的间距值,例如:`border-spacing: 10px;`。
以下是一个示例代码:
```html
<table style="border-collapse: separate; border-spacing: 10px;" cellspacing="0">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
```
这样就可以在表格的行与行之间添加指定的空白间隔了。
<table>设置每一行的边框和间隔
你可以使用CSS来为表格设置行边框和间隔,具体方法如下:
```css
table {
border-collapse: collapse; /* 合并边框 */
border-spacing: 0; /* 单元格间距 */
}
/* 设置行边框 */
td, th {
border: 1px solid black; /* 边框样式 */
}
/* 设置偶数行背景颜色 */
tr:nth-child(even) {
background-color: #f2f2f2;
}
```
这个CSS样式规则将会把表格的边框合并为一个,并且将单元格之间的间距设置为0。然后,每个单元格都会有一个1像素的黑色边框。最后,偶数行的背景颜色会被设置为浅灰色。
你可以根据自己的需要修改这些样式规则,来达到自定义表格的目的。
阅读全文