利用html制作一张表，完成行合并，列合并，以及居中

最新推荐文章于 2024-05-24 17:50:52 发布

天真吖415

最新推荐文章于 2024-05-24 17:50:52 发布

阅读量2k

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/qq_59384418/article/details/125410059

版权

需求：完成如下一张表

<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 使表中的文字居中

总结

以上就是今天分享的内容了。

天真吖415

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
利用html制作一张表，完成行合并，列合并，以及居中

需求：完成如下一张表中的代码此时表格只是位于页面的左侧，文字没居中，还需再中的标签中插入一下代码 text-align:center 使表格水平居中 margin:auto 使表中的文字居中以上就是今天分享的内容了。...
复制链接

扫一扫