本文介绍如何调整年终工资报表的样式，使其表格居中并对内容进行优化。通过CSS样式实现文本和表格的水平及垂直居中，展示了HTML代码和相关CSS规则的应用。
需求：完成如下一张表
<body></body>中的代码
<table border="0" >
<tr>
<th colspan="4">年终工资报表</th>
</tr>
<tr bgcolor="DarkTurquoise">
<th>区域办事处</th>
<th>岗位</th>
<th>姓名</th>
<th>工资(RMN)</th>
</tr>
<tr bgcolor="MediumAquamarine">
<td rowspan="3">华东区</td>
<td rowspan="2">人事专员</td>
<td >张民</td>
<td>1500</td>
</tr>
<tr bgcolor="MediumAquamarine">
<td>王洪</td>
<td>1500</td>
</tr>
<tr bgcolor="MediumAquamarine">
<td rowspan="3">软件开发工程师</td>
<td>李开元</td>
<td>6000</td>
</tr>
<tr bgcolor="MediumAquamarine">
<td rowspan="2">中南区</td>
<td>杨桃</td>
<td>5000</td>
</tr>
<tr bgcolor="MediumAquamarine">
<td>梁朝</td>
<td>5000</td>
</tr>
<tr bgcolor="yellow">
<td colspan=3>合计</td>
<td>19000</td>
</tr>
</table>
此时表格只是位于页面的左侧，文字没居中，还需再<head></head>中的<style></style>标签中插入一下代码
<style type="text/css">
table{
text-align: center;
margin:auto;
}
</style>
text-align:center 使表格水平居中
margin:auto 使表中的文字居中
总结
以上就是今天分享的内容了。
扫一扫
1280
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
