1.2（6）body——表格标签

摆渡人wqh

于 2021-06-13 11:01:03 发布

阅读量173

点赞数

分类专栏：前端文章标签： html 表格标签

本文链接：https://blog.csdn.net/wqh101121/article/details/117870205

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

表格标签

表格标记	<table>< /table>	设置表格
行标记	<tr></ tr>	设置行
单元格标记	<td></ td>	设置单元格
表头标记	<th></ th>	特殊单元格，效果：加粗、居中。
属性	width	设置宽度，<td>宽度只有在<table>先设置宽度才有效
	height	设置高度，<tr>高度只有在<table>先设置高度才有效
	border	设置表格边框线厚度。（默认情况下表格没有边框）	同一表中定义rules属性和border属性，border属性将失效。
	bordercolor	设置表格向光(左、上)边框颜色。
	bordercolordark	设置表格背光(下、右)边框颜色。
	frame	设置表格外边框。
	rules	设置表格内边框。
	cellpadding	设置单元格边沿与其内容的空隙。
	cellspadding	设置单元格和边框之间的空隙。
	align valign	设置表格或单元格内容水平摆放位置。
		设置表格或单元格内容垂直摆放位置。
	bgcolor	设置背景颜色。	background的优先级高于bgcolor，同时出现会覆盖掉bgcolor。
	backgroud	设置背景图片。（后面需加style=”background-size:100% 100%”）
	colspan	设置单元格横跨列数。
	rowspan	设置单元格横跨行数。
	nowrap	禁止单元格内文字自动换行。

练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格标签</title>
	</head>
	<body>
		<!--表格标签
			table——表格。
			tr——行。
			td——单元格。
			th——表头，特殊单元格，效果：加粗、居中。
			属性
				width——宽度。
				height——高度。
				
				border——设置表格边框线厚度。（默认情况下表格没有边框）
				bordercolor——设置边框颜色。
				bordercolorlight——表格向光(左、上)边框颜色。
				bordercolordark——表格背光(下、右)边框颜色。
				frame——设置表格外边框。
				rules——设置表格内边框。
				(同一表中定义rules属性和border属性，border属性将失效。)
				
				cellpadding——设置单元格边沿与其内容的空隙。
				cellspadding——设置单元格和边框之间的空隙。
				
				align——设置水平摆放位置。
				valign——设置垂直摆放位置。
				
				bgcolor——设置背景颜色。
				backgroud——设置背景图片。（后面需加style=”background-size:100% 100%”）
				（background的优先级高于bgcolor，同时出现会覆盖掉bgcolor。）
        	    
        	    colspan——设置单元格横跨列数。
        	    rowspan——设置单元格横跨行数。
        	    
        	    nowrap——禁止单元格内文字自动换行。
        -->
        <table width="400px" height="200px" border="1px" cellspacing="0px" align="center" rules="none">
        	<tr bgcolor="darkgray">
        		<th width="25%">学号</th>
        		<th>姓名</th>
        		<th>性别</th>
        		<th>成绩</th>
        	</tr>
        	<tr align="center" bgcolor="antiquewhite">
        		<td rowspan="2">1708090711</td>
        		<td>王铖</td>
        		<td>男</td>
        		<td>62</td>
        	</tr>
        	<tr align="center"bgcolor="beige">
        		
        		<td>王婷</td>
        		<td>女</td>
        		<td>75</td>
        	</tr>
        	<tr align="center"bgcolor="antiquewhite">
        		<td>1708090713</td>
        		<td>凤九</td>
        		<td>男</td>
        		<td>85</td>
        	</tr>
        	
        </table>
	</body>
</html>

效果图：