表格标签

最新推荐文章于 2022-10-23 13:46:23 发布

多一些不为什么的坚持啊

最新推荐文章于 2022-10-23 13:46:23 发布

阅读量76

点赞数

本文链接：https://blog.csdn.net/weixin_43850619/article/details/101159209

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<table>……</table>：声明一个表格
  <tr>……</tr>：声明一行，设置行高及所有单元格的高度
<th>……</th>：声明一个单元格，表头格，默认居中加黑显示；
<td>……</td>：声明一个单元格，默认居左显示原始数据；
   注意：行高及改所有单元格的宽度
   单元格的宽度及列宽
   属性：
border：给表格添加边框
width：设置表格的宽度
heigth：设置表格的高度
    cellpadding：设置内容距边框的距离
cellspacing：设置边框的大小
   特点：默认根据数据的多少进行表格的大小显示
   单元格的合并：
   第一步：首先确保表格是一个规整的表格
   第二步：根据要合并的单元格，找到其所在的源码位置
   第三步：行合并：在要合并的单元格中的第一个上使用属性rowspan="要合并的单元格的个数"，并删除其它单元格完成合并
   列合并：在要合并的单元格的任意一个上使用属性colspan="要合并的单元格的个数"，并删除要合并的其它单元格

示例：

<html>
	<head>
		<title>HTML的table标签</title>
		<meta charset = "utf-8"/>
	</head>
	<body>
		<h3 align="center">表格标签学习</h3>
		<hr />
		<table border="2px"  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>
		
		<h4>单元格的合并学习：</h4>
		<hr />
		<table border="1px"  cellspacing="0px">
				<tr height="50px">
					<td width="100px"></td>
					<td width="100px"></td>
					<td width="100px"></td>
					<td width="200px"   colspan="2"  rowspan="2"></td>
				</tr>
				<tr height="50px">
					<td width="100px"   colspan="2"></td>
					<td width="100px"></td>
				</tr>
				<tr height="50px">
					<td width="100px"></td>
					<td width="100px"></td>
					<td width="100px"  rowspan="2"></td>
					<td width="100px"></td>
					<td width="100px"></td>
				</tr>
				<tr height="50px">
					<td width="100px"></td>
					<td width="100px"></td>
					<td width="100px"></td>
					<td width="100px"></td>
				</tr>
			</table>
	</body>
</html>