html(表格的属性与合并)

最新推荐文章于 2024-03-24 20:14:38 发布

outlier--

最新推荐文章于 2024-03-24 20:14:38 发布

阅读量549

点赞数

分类专栏：前端文章标签： html css javascript

本文链接：https://blog.csdn.net/yizhishuangsheng/article/details/122882415

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		   表格:
		   有行有列
		   里面可以放数据
		   还可以用来网页布局
		   由四组标签构成
		   table:表示表格
		   tr:行
		   td:单元格
		   th:单元格 表头 内容自动加粗并居中
		   
		   表格内容只能放在单元格中
		   
		   table属性:
		   border="1" width="500" height="300"
		   bgcolor="--" background="图片"
		   cellpadding="0" 表格内容与左边的边框间距(内边距)
		   cellspacing="0" 单元格之间线的距离
		   
		   tr:
		   bgcolor
		   height
		   align
		   valign="top middle(默认) bottom"
		   
		   td,th:
		   width
		   bgcolor
		   align
		   valign="top middle(默认) bottom"
		   
		   合并单元格:
		   colspan="合并的数量"(跨列合并)
		   rowspan="合并的数量"(跨行合并)
		   记者删除多余的单元格
		 -->
		 <table border="1" width="500" height="300">
			 <tr>
				 <th>姓名</th>
				 <th>数学</th>
				 <th>英语</th>
				 <th>语文</th>
			 </tr>
			 <tr>
			 	 <td>张三</td>	
			     <td>88</td>	
				 <td>77</td>	
				 <td>99</td>	
			 </tr>
			 <tr>
			 	<td>张三</td>
			 	<td>88</td>	
			 	<td>77</td>	
			 	<td>99</td>				 
			 </tr>
			 <tr>
			 		<td>张三</td>
			 		<td>88</td>	
			 		<td>77</td>	
			 		<td>99</td>			 
			 </tr>
			 
		 </table>
		 
		 <!-- 合并单元格 -->
		 <table border="1" width="500" height="300">
		 	<tr>
				<!-- 跨列合并 -->
				<td></td>
		 		<td colspan="3"></td>
		 	</tr>
			<!-- 跨行合并 -->
		 	<tr>
		 		<td></td>
		 		<td></td>
		 		<td></td>
		 		<td rowspan="3"></td>
		 	</tr>
		 	<tr>
		 		<td></td>
		 		<td></td>
		 		<td></td>
		 	</tr>
		 	<tr>
		 		<td></td>
		 		<td></td>
		 		<td></td>
		 	</tr>
		 </table>
	</body>
</html>