<body><center><body><center> <h2>商品结算信息</h2> <table border="1"> <tr> <th>用户名</th> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>小计</th> </tr>如何美化这个表格
时间: 2023-08-17 08:15:25 浏览: 47
要美化这个表格,你可以通过添加CSS样式来实现。以下是一个简单的表格样式示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: center;
padding: 8px;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
td:first-child {
text-align: left;
}
td:last-child {
font-weight: bold;
}
</style>
</head>
<body>
<center>
<h2>商品结算信息</h2>
<table>
<tr>
<th>用户名</th>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
<tr>
<td>张三</td>
<td>商品1</td>
<td>10元</td>
<td>3</td>
<td>30元</td>
</tr>
<tr>
<td>李四</td>
<td>商品2</td>
<td>20元</td>
<td>2</td>
<td>40元</td>
</tr>
<tr>
<td>王五</td>
<td>商品3</td>
<td>15元</td>
<td>4</td>
<td>60元</td>
</tr>
</table>
</center>
</body>
</html>
```
这个例子中:
- `border-collapse: collapse;` 属性用于将表格的边框合并为一个单一的边框。
- `width: 100%;` 属性用于将表格宽度设置为100%。
- `th, td` 选择器用于选择表格中的表头单元格和数据单元格。
- `text-align: center;` 属性用于设置单元格中文本的对齐方式为居中。
- `padding: 8px;` 属性用于设置单元格的填充。
- `th` 选择器用于选择表头单元格,并设置其背景色为 #4CAF50,字体颜色为白色。
- `tr:nth-child(even)` 选择器用于选择表格中偶数行,并设置其背景色为 #f2f2f2。
- `tr:hover` 选择器用于选择鼠标悬停在表格行上的样式,并设置其背景色为 #ddd。
- `td:first-child` 选择器用于选择表格中第一列,并将其文本对齐方式设置为左对齐。
- `td:last-child` 选择器用于选择表格中最后一列,并将其文本加粗。
你可以根据自己的需要修改这些样式属性来创建符合自己要求的表格样式。