HTML表格标签及单元格合并

表格标签

表格标签学习:

  • 标签
    table :声明一个表格
    tr:声明一行,设置行高及改行所有单元格的高度.
    th:声明一个单元格,表头格.默认居中加黑显示
    td:声明一个单元格,默认居左显示原始数据
    注意:
    行高即改行所有单元格的宽度
    单元格的宽度即列宽
  • 属性:
    **border:**给表格添加边框
    width:设置表格的宽度
    height:设置表格的高度
    cellpadding:设置内容居边框的距离
    cellspacing:设置边框的大小

单元格的合并

  • 单元格的合并:
    1.首先确保表格是一个规整的表格(先画完整表格再合并)
    2.根据要合并的单元格,找到其所在的源码位置
    • 行合并:在要合并的单元格中的第一个单元格上使用属性rowspan=“要合并的单元格的个数”,并删除其他要合并的单元格完成合并
    • 列合并:在要合并的单元格中的任意一个上使用属性colspan=“要合并的单元格的个数”,并删除要合并的其他单元格

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格学习</title>
	</head>
	<body>
		<h3>表格绘制</h3>
		<hr />
		<table border="1px" align="center" cellpadding="10px" cellspacing="0px">
			<tr height="50px">
				<th width="100px">科目</th>
				<th width="100px">分数</th>
				<th width="100px">级别</th>
				<th width="150px">说明</th>
			</tr>
			<tr height="50px">
				<td>Java</td>
				<td>100</td>
				<td>8</td>
				<td>面向对象</td>
			</tr>
			<tr height="50px">
				<td>C</td>
				<td>100</td>
				<td>8</td>
				<td>面向过程</td>
			</tr>
		</table>

		<h3>合并</h3>
		<table border="1px" cellpadding="10px" cellspacing="0"  align="center">
			<tr height="50px">
			<th width="100px"></th>
			<th width="100px"></th>
			<th width="200px" colspan="2" rowspan="2"></th>
		<!--	th声明的是表头格,会加粗加黑居中显示-->
			</tr>
			<tr height="50px">
				<td></td>
				<td></td>
		
		
			</tr>
			<tr height="50px">
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>
		
			
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页