html 表格

最新推荐文章于 2023-08-23 18:07:46 发布

心郎

最新推荐文章于 2023-08-23 18:07:46 发布

阅读量567

点赞数

CC 4.0 BY-SA版权

分类专栏：前段_html

本文链接：https://blog.csdn.net/u011301203/article/details/52348906

前段_html 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了HTML表格的使用，包括如何设置表格的边框、宽度、高度、内部间距等属性，以及如何通过`rowspan`和`colspan`进行单元格合并。通过多个实例展示了不同场景下表格的创建，如人员信息展示、时间表布局等。

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

<!DOCTYPE html>
<html>
	<!--
    	作者：xwl281928290@163.com
    	时间：2016-07-25
    	描述：
    	<span style="color:#006600;">
	 border:设置表格线的宽度
	 width：设置表格宽度
	 height：设置表格高度
	 cellpadding：设置表格内文字距离左边宽度
	 cellspacing：设置表格线与线的间距
	 bgcolor：设置表格背景颜色
	 caption：设置表格标题头
	 align： left center right
	 		1  在table上 设置表格 左  中 右 
	 		2  在tr上 设置行 内文字 左 中 右
	 		3 在td上 设置列 内 文字 左 中 右
	 rowspan：纵向合并
	 colspan：横向合并</span>
	 
	-->
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<fieldset>
			<legend>这个一个表格</legend>
			<table border="1" width="400" height="200" cellpadding="10" cellspacing="0" bgcolor="palevioletred"
				align="center">
				<caption>人员信息</caption>
				<tr>
					<th >老师</th>
					<th >学生</th>
					<th >工人</th>
				</tr>
				<tr align="center">
					<td>小命</td>
					<td>校长</td>
					<td>小李</td>
				</tr>
				<tr align="center"> 
					<td>张飞</td>
					<td>李四</td>
					<td>王五</td>
				</tr>
			</table>
		
		</fieldset> <hr><hr>
		
		<table border="1" width="400" height="200"  cellspacing="0" bgcolor="palevioletred"
			align="center">
			<thead>
				<tr align="center">
					<td>小命</td>
					<td>校长</td>
					<td>小李</td>
				</tr>
			</thead>
			
			<tbody>
				<tr align="center">
					<td>小命</td>
					<td>校长</td>
					<td>小李</td>
				</tr>
				<tr align="center"> 
					<td>张飞</td>
					<td>李四</td>
					<td>王五</td>
				</tr>
			</tbody>
			
			<tfoot>
				<tr align="center"> 
					<td>张飞</td>
					<td>李四</td>
					<td>王五</td>
				</tr>
			</tfoot>
			
		</table><hr><hr>
		
		<table border="1" width="400" height="300"  bgcolor="pink" cellspacing="0" align="center">
			<tr>
				<td rowspan="2"></td>
				<td></td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td ></td>
				<td></td>
				<td></td>
				<td rowspan="2"></td>
			</tr>
			<tr>
				<td colspan="2"></td>
				<td ></td>
			</tr>
		</table>
		
		<hr />
		<table border="1" width="400" height="300"  bgcolor="pink" cellspacing="0" align="center">
			<tr>
				<td rowspan="2"></td>
				<td></td>
				<td colspan="2"></td>
			</tr>
			<tr>
				<!--<td></td>-->
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td rowspan="2"></td>
			</tr>
			<tr>
				<td colspan="2"></td>
				<!--<td ></td>-->
				<td></td>
				<!--<td></td>-->
			</tr>
		</table>
		
		<table width="400" height="300" bgcolor="green" cellspacing="1">
				<tr bgcolor="white" align="center" >
					<th colspan="2" width="100"></th>
					<!--<th></th>-->
					<th>星期一</th>
					<th>星期二</th>
					<th>星期三</th>
					<th>星期四</th>
					<th>星期五</th>
				</tr>
			
				<tr bgcolor="white" align="center">
					<td rowspan="2">上午</td>
					<td>1</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				
				<tr bgcolor="white" align="center">
					<!--<td></td>-->
					<td>2</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				
				<tr bgcolor="white"  align="center">
					<td rowspan="2">下午</td>
					<td>3</td>
					<td></td>
					<td></td>
					<td ></td>
					<td colspan="2" ></td>
					<!--<td></td>-->
				</tr>
				
				<tr bgcolor="white" align="center">
					<!--<td></td>-->
					<td>4</td>
					<td></td>
					<td></td>
					<td></td>
					<td colspan="2" ></td>
					<!--<td></td>-->
				</tr>
		</table>
		<a href="#momo">锚链接</a>
		<table width="400" height="300" bgcolor="green" cellspacing="1">
				<tr bgcolor="white" align="center" >
					<th colspan="2" rowspan="2"></th>
				</tr>
				<tr bgcolor="white" align="center" >
					<th colspan="2" rowspan="2"></th>
				</tr>
		</table><hr>
		
		
		<table width="400" height="300" bgcolor="green" cellspacing="1">
				<tr bgcolor="white" align="center" >
					<td rowspan="2"></td>
					<td colspan="2"></td>
				</tr>
				<tr bgcolor="white" align="center" >
					<!--<td></td>-->
					<!--<td></td>-->
				</tr>
		</table>
		
		
		<table id="momo" border="1"  width="600" height="500" bgcolor="pink" cellspacing="1">
			 <tr>
			 	<td colspan="2"></td>
			 	<!--<td></td>-->
			 	<td>星期一</td>
			 	<td>星期二</td>
			 	<td>星期三</td>
			 	<td>星期四</td>
			 	<td>星期五</td>
			 </tr>
			 <tr>
			 	<td rowspan="2">上午</td>
			 	<td width="50">1</td>
			 	<td></td>
			 	<td></td>
			 	<td></td>
			 	<td></td>
			 	<td></td>
			 </tr>
			 <tr>
			 	<!--<td></td>-->
			 	<td>2</td>
			 	<td></td>
			 	<td></td>
			 	<td></td>
			 	<td></td>
			 	<td></td>
			 </tr>
			 <tr>
			 	<td rowspan="2">下午</td>
			 	<td>3</td>
			 	<td></td>
			 	<td></td>
			 	<td></td>
			 	<td colspan="2"></td>
			 	<!--<td></td>-->
			 </tr>
			 <tr>
			 	<!--<td></td>-->
			 	<td>4</td>
			 	<td></td>
			 	<td></td>
			 	<td></td>
			 	<td></td>
			 	<td></td>
			 </tr>
		</table>
		
		
	</body>
</html>