HTML表格的th标签、colgroup标签、注释标签以及表格结构

466 阅读1分钟

相关的前文链接(HTML实现个人简历制作):juejin.cn/post/702004…

知识补充1.th=设置td格式为加粗并水平居中

知识补充2.列分组标签colgroup可以实现更高效的列设置:

image.png

知识补充3.根据W3C的标准,一个html表格的结构应包含:表格页眉thead、表格主体tbody、表格页脚tfooter,若缺少这些结构,浏览器也会自动生成相关代码结构,但仍然建议制作表格时把这些代码写全:

image.png

知识补充4.编写代码时可以使用注释,以方便自己标记或编辑,注释标签的写法为:<!-- 这是注释 -->

知识补充5.关于标签嵌套(若在编写时没有遵守这些嵌套规则,浏览器会自动修复,但仍然建议不要使用错误的嵌套):

image.png


以下为源码以及效果截图(应用相关知识补充后):

<html>
	<head>
		<meta charset="utf-8" />
		<title>个人简历</title>
	</head>
	<body>
		<table border="1px" cellspacing="0">
			<colgroup span="6" width="100px"></colgroup>
			<colgroup span="1" width="200"></colgroup>
		
			<tr height="40px"><!-- 表示行高40px -->
				<th colspan="7">个人简历</th>
			</tr>
			<tr  height="40px" >
				<th>姓名</th>
				<td></td>
				<th>性别</th>
				<td></td>
				<th>年龄</th>
				<td></td>
				<td rowspan="4" align="center">照片</td>
			</tr>
			<tr align="center"  height="40px" >
				<td>学历</td>
				<td></td>
				<td>籍贯</td>
				<td colspan="3"></td>		
			</tr>
			<tr align="center"  height="40px" >
				<td>电话</td>
				<td></td>
				<td>政治面貌</td>
				<td colspan="3"</td>	
			</tr>
			<tr align="center"  height="40px" >
				<td>毕业院校</td>
				<td colspan="5"></td>		
			</tr>
			<tr align="center"  height="40px" >
				<td>求职意向</td>
				<td colspan="6"></td>	
				<td></td>
			</tr>		
		
		</table>
		
	</body>
</html>

image.png