插入代码

HTML 基础 之 表格 table


HTML 基础 之 表格 table

在这里插入代码片


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<!-- cellspacing   设置单元格与单元格之间的距离
				cellpadding    设置文字与单元格之间的距离
				algin  排列单元格内容，left,right,center
				bgcolor 设置背景颜色
				caption  定义表格标题，标签必须紧随table标签之后，每个表格只能定义一个标题,一般居中在表格之上
				th  表头，通常在第一行或者第一列-->
				<!-- 表格的结构
					使用表格进行布局时，可以将表格分为：头部 ，主体 ，页脚。
					thead  头部
					tbody  主体
					tfoot  页脚
					三者都在 table 标记中-->
			<table border="1" cellspacing="0px" cellpadding="20px"align="center" height="400px" width="200px">
				<caption>定义表格标题</caption>
				<tr>
					<th align="left" bgcolor="aqua">第一列/行表头</th>
					<th align="center">Header1</th>
					<th>Header2</th>
					<th>Header3</th>
					<th>Header4</th>
				</tr>
				<!-- 整行向右对齐 -->
				<tr align="right" bgcolor="#E78787">
					<th>第一列表头</th>
					<td>Data1</td>
					<td>Data2</td>
					<td>Data3</td>
					<td>Data4</td>	
				</tr>
				<tr valign="bottom">
					<th>第一列表头</th>
					<td align="center" bgcolor="coral">Data1</td>
					<td align="center" bgcolor="coral">Data2</td>
					<td align="center" bgcolor="coral">Data3</td>
					<td align="center" bgcolor="coral">Data4</td>
				</tr>
				<!-- 跨行，跨列 单元格 
				colspan 合并列
				rowspan 合并行-->
				<tr>
					<th bgcolor="darkslateblue" rowspan="2" align="center">跨2行</th>
					<td>DATA1</td>
					<td>DATA1</td>
					<td>DATA1</td>
					<td>DATA1</td>
				</tr>
				<tr>
					<th>header1</th>
					<td>data1</td>
					<td bgcolor="brown" colspan="2" align="center">跨2列</td>
				</tr>
				<!-- 合并两行两列 -->
				<tr>
					<td bgcolor="cornflowerblue" rowspan="2" colspan="2"  align="center">跨2行2列</td>
					<td>DATA1</td>
					<td>DATA1</td>
					<td>DATA1</td>
				</tr>
				<tr>
					<td>DATA1</td>
					<td>DATA1</td>
					<td>DATA1</td>
				</tr>
			</table>
		</div>
	</body>
</html>

在这里插入图片描述

版权声明：本文为qq_39913441原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。