制作一个好看的表格html
时间: 2023-08-05 18:06:04 浏览: 91
html好看的表格
好的,以下是一个简单的HTML表格示例,您可以根据自己的需要进行修改和美化。
```html
<!DOCTYPE html>
<html>
<head>
<title>好看的表格</title>
<style>
table {
border-collapse: collapse;
width: 100%;
max-width: 800px;
margin: 0 auto;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
text-align: center;
background-color: #f9f9f9;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
th, td {
border: 1px solid #ddd;
padding: 10px;
color: #333;
}
th {
background-color: #4CAF50;
color: #fff;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>
</html>
```
这个表格样式包括以下特点:
- 边框折叠
- 100%宽度,最大宽度为800px,居中对齐
- 使用Arial sans-serif字体
- 16像素字体大小
- 1.5倍行高
- 居中对齐
- 背景颜色为#f9f9f9
- 有一个阴影效果
- 表头背景色为#4CAF50,颜色为#fff,加粗
- 奇数行背景颜色为#f2f2f2
您可以根据自己的需要和喜好进行修改和调整。
阅读全文