请使用html+js为我一个好看的表格,要求单双行背景颜色不一样,一定要好看美观
时间: 2024-02-18 19:01:08 浏览: 76
好的,以下是一个简单的HTML+JS表格,满足您的要求。您可以根据需要添加更多的行和列,修改颜色和样式。
```html
<!DOCTYPE html>
<html>
<head>
<title>美观的表格</title>
<style>
table {
border-collapse: collapse;
width: 100%;
margin: 50px auto;
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
color: #333;
font-weight: bold;
border-right: 1px solid #ddd;
}
tr:nth-child(even) td {
background-color: #f2f2f2;
}
tr:nth-child(odd) td {
background-color: #fff;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
<td>北京市朝阳区</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
<td>上海市浦东新区</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>男</td>
<td>广州市天河区</td>
</tr>
<tr>
<td>赵六</td>
<td>27</td>
<td>女</td>
<td>深圳市南山区</td>
</tr>
<tr>
<td>小明</td>
<td>22</td>
<td>男</td>
<td>成都市锦江区</td>
</tr>
<tr>
<td>小红</td>
<td>24</td>
<td>女</td>
<td>重庆市江北区</td>
</tr>
</tbody>
</table>
</body>
</html>
```
这个表格中,单数行的背景颜色为白色,双数行的背景颜色为灰色。表格头部和单元格都有底部边框,表格头部的背景颜色为浅灰色,文字加粗。
阅读全文