设计一个好看的html表格
时间: 2023-10-10 17:15:44 浏览: 89
制作表格-html网页设计教程
好的,下面是一个简单的HTML表格,您可以根据需要进行修改和美化:
```html
<table style="border-collapse: collapse; width: 100%;">
<thead>
<tr style="background-color: #f2f2f2;">
<th style="padding: 12px; border: 1px solid #ddd;">姓名</th>
<th style="padding: 12px; border: 1px solid #ddd;">年龄</th>
<th style="padding: 12px; border: 1px solid #ddd;">性别</th>
<th style="padding: 12px; border: 1px solid #ddd;">职业</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 12px; border: 1px solid #ddd;">张三</td>
<td style="padding: 12px; border: 1px solid #ddd;">28</td>
<td style="padding: 12px; border: 1px solid #ddd;">男</td>
<td style="padding: 12px; border: 1px solid #ddd;">工程师</td>
</tr>
<tr style="background-color: #f2f2f2;">
<td style="padding: 12px; border: 1px solid #ddd;">李四</td>
<td style="padding: 12px; border: 1px solid #ddd;">32</td>
<td style="padding: 12px; border: 1px solid #ddd;">女</td>
<td style="padding: 12px; border: 1px solid #ddd;">设计师</td>
</tr>
<tr>
<td style="padding: 12px; border: 1px solid #ddd;">王五</td>
<td style="padding: 12px; border: 1px solid #ddd;">24</td>
<td style="padding: 12px; border: 1px solid #ddd;">男</td>
<td style="padding: 12px; border: 1px solid #ddd;">程序员</td>
</tr>
<tr style="background-color: #f2f2f2;">
<td style="padding: 12px; border: 1px solid #ddd;">赵六</td>
<td style="padding: 12px; border: 1px solid #ddd;">30</td>
<td style="padding: 12px; border: 1px solid #ddd;">女</td>
<td style="padding: 12px; border: 1px solid #ddd;">产品经理</td>
</tr>
</tbody>
</table>
```
这个表格有一些基本的样式,包括表头和表身的不同颜色,以及单元格的边框和填充等。您可以通过CSS样式表来进行更多的样式修改,例如更改字体、颜色、对齐方式等来美化您的表格。
阅读全文