Sublime编写html中的表格

最新推荐文章于 2025-04-26 16:15:43 发布

小白成长札记

最新推荐文章于 2025-04-26 16:15:43 发布

阅读量1k

点赞数 1

文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/weixin_45734905/article/details/130114931

版权

本文介绍了HTML表格的创建和单元格合并方法，包括使用rowspan进行行合并以及colspan进行列合并。在使用rowspan时需注意，它会合并当前单元格与其下一行，如果下一行已有内容，可能会导致布局问题。同样，colspan会影响列的布局。文章通过示例代码展示了如何创建带有合并单元格的表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格部分也不是很难，但是要注意用rowspan进行单元格跨行合并时，只能与他的下一行合并，但是如果他的下一行有内容，就会将下一行挤出。colspan进行跨列合并时，也会如此。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>
		表格
	</title>
</head>
<body>

		<!-- 
	table 表格    
	caption：表格标题   thead：表格首行   tbody:表格主体  tfoot:表格的尾行  
	tr：行   td：列   th：单元格的表头（里面文字居中且加粗）

		 -->
	<table border="1" align="center"   width="500px" height="500px" cellspacing="10px" cellpadding="20px;" bgcolor="yellow" >  
		<!
		-- border表格的边框 
		--align:水平对齐方式，默认值是左对齐
		--width：表格的宽度
		--height：表格的高度
		valgin(垂直方向上的对齐方式)：默认垂直居中（middle） 顶端对齐（top） 底部（bottom）；给table加不生效
		bgcolor:背景颜色
		cellspacing:外框边距（默认2px）
		cellpadding：内框边距
		rowspan:单元格行合并  跨行合并  当前单元格与下一行单元格合并成了一个单元格，两个行合并成一个，下面一行的单元格就不需要了，删掉即可，你想合并几个，就rowspan="几个"
		colspan:单元格列合并，跨列
		-->
		<caption>标题<caption>
			<thead >
				<tr align="left">
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
				</tr>
			</thead>

			<tbody align="right" >
				
				<tr align="left" valign="top" bgcolor="pink">
					<td>张三</td>
					<td>男</td>
					<td>21</td>
				</tr>
				<tr valign="bottom" >
					<td rowspan="2" bgcolor="blue" valign="middle" align="center">坤粉</td> 
					<td>男</td>
					<td>23</td>
				</tr>
				<tr>
					<!-- <td >王五</td> -->
					<td colspan="2">女</td>
					<!-- <td>18</td> -->
				</tr>
			</tbody>
	</table>

</body>
</html>

效果图如下：