能在用style样式把它弄得更漂亮吗
时间: 2024-04-15 14:28:15 浏览: 16
当然可以!你可以使用CSS样式来美化你的表格。下面是一个示例代码,展示了如何使用CSS样式来改变表格的外观:
```html
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #e6e6e6;
}
</style>
<table>
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
</tr>
</thead>
<tbody>
<tr>
<td>行1列1</td>
<td>行1列2</td>
<td>行1列3</td>
<td>行1列4</td>
</tr>
<tr>
<td>行2列1</td>
<td>行2列2</td>
<td>行2列3</td>
<td>行2列4</td>
</tr>
<!-- 这里省略了行3到行9的代码 -->
<tr>
<td>行10列1</td>
<td>行10列2</td>
<td>行10列3</td>
<td>行10列4</td>
</tr>
</tbody>
</table>
```
这段代码使用了一些常见的CSS属性来设置表格的样式,例如`border-collapse`用于去除单元格之间的边框间隙,`padding`用于设置单元格内容的内边距,`background-color`用于设置表头和交替行的背景颜色等等。你可以根据自己的需求进行修改和扩展。