0
点赞
收藏
分享

微信扫一扫

【HTML】06-表格

前程有光 2022-03-12 阅读 32
<!--
    表格:
    1.table标签:表示一个表格
        border属性:取值是像素值:px
        cellspacing属性:单元格之间的间隙:px
        cellpadding属性:单元格的内边距
        align属性:设置表格在页面上的对齐方式
        width属性:表格整体宽度
        height属性:表格整体高度
    2.tr标签(table row):一整行
        align属性:设置本行所有单元格内容对齐方式
        height属性:设置本行的高度
    3.th标签(table headline):表格的单元格,和td相比多了加粗和居中的样式
    4.td标签:行内的单元格
        align属性:设置 内容对齐方式
        width属性:设置本单元格的宽度,会影响到一整列
        rowspan属性:跨行合并,上下单元格合并,取值为合并的单元格数量
        colspan属性:跨列合并,左右单元格合并,取值为合并的单元格数量
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<table width="600px" height="300px" border="1px" cellspacing="0px" cellpadding="10px" align="center">
			<tr height="40px">
				<th width="20px">序号</th>
				<th>姓名</th>
				<th>成绩</th>
			</tr>
			<tr align="center">
				<td>1</td>
				<td>张三</td>
				<td>90</td>
			</tr>
			<tr align="center">
				<td>2</td>
				<td>李四</td>
				<td>80</td>
			</tr>
			<tr align="center">
				<td>2</td>
				<td>王五</td>
				<td>80</td>
			</tr>
			<tr align="center">
				<td>2</td>
				<td>赵六</td>
				<td>80</td>
			</tr>
			<tr align="center">
				<td>2</td>
				<td>孙七</td>
				<td>80</td>
			</tr>
		</table>
		
		<hr>
		
		<!-- 合并单元格 -->
		<table align="center" width="300px" height="300px" border="1px" cellspacing="0">
			<tr align="center">
				<td rowspan="2">1-1 2-1</td>
				<td>1-2</td>
				<td>1-3</td>
			</tr>
			<tr align="center">
				<td>2-2</td>
				<td>2-3</td>
			</tr>
			<tr align="center">
				<td colspan="3">3-1 3-2 3-3</td>
			</tr>
		</table>
		
	</body>
</html>
举报

相关推荐

0 条评论