<style> table { border-collapse: collapse; } td, th { border: 1px solid black; padding: 5px; } th { font-size: 14px; border: 1px solid black; padding: 5px; } td { font-size: 10px; border: 1px solid black; padding: 5px; } </style>
时间: 2024-02-14 13:18:16 浏览: 144
table中的border-collapse属性
这段代码是一个完整的HTML文件的样式部分,用于设置表格的样式。具体的样式包括:
- 设置表格的边框折叠方式为collapse,使表格的边框重合在一起,看起来更加整齐。
- 设置表格中单元格的边框为1像素的黑色实线边框,以及内边距为5像素,使表格的结构更加明显,方便用户阅读。
- 设置表头单元格的字体大小为14像素,表格内容单元格的字体大小为10像素,使表头和表格内容的字体大小有所区分,看起来更加清晰。
需要注意的是,这段代码只是设置了表格的样式,表格的内容需要在HTML中进行定义。在本例中,可以在table标签内部定义表格的内容。例如:
```
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>30</td>
<td>男</td>
</tr>
</tbody>
</table>
```
在这个例子中,我们定义了一个包含表头和表格内容的表格,表头包含三个单元格,分别是姓名、年龄和性别;表格内容包含三行,每行分别包含三个单元格,分别是姓名、年龄和性别。这个例子中的表格会使用上面的CSS代码来进行美化。
阅读全文