HTML 表格标签

祈遇xin

已于 2022-07-19 22:00:39 修改

阅读量156

点赞数

文章标签： html 前端 html5

于 2022-07-19 21:57:38 首次发布

本文链接：https://blog.csdn.net/weixin_52972942/article/details/125881802

版权

一表格的框架

1.<table></table>

定义表格的基本框架

2.<tr></tr>

定义表格的行

3.<th></th>

定义表格中表头内的单元格（标题），自动将文本加粗，居中对齐

4.<td></td>

定义表格中行内的单元格

二表格的属性

1.cellspacing

单元格之间间距

2.cellpadding

单元格内边距

3.border

外边框宽度

三表格的合并

1.colspan属性

左右合并单元格

2.rowspan属性

上下合并单元格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>
		<!-- 
		 table 外框  可以添加border属性 单元格与表格都会有边框   cellspacing单元格间距    cellpadding单元格内补
		 width = 100%  铺满水平方向
		 tr  table row  表中一行
		 th  table head 表头单元格   加粗 居中
		 td  table data 普通单元格
		 
		 合并同一行中的多列 colspan
		 合并同一列中的多行 rowspan
		 -->
		
		<table border="5" cellspacing="10" cellpadding="10" width="60%" align="center">
			<tr>
				<th  width="5%">ID</th>
				<th  width="15%">Name</th>
				<th>Age</th>
			</tr>
			<tr>
				<td>101</td>
				<td>张三</td>
				<td rowspan="2">50</td>
			</tr>
			<tr>
				<td align="center"  colspan="2">102</td>
				<!-- <td>李四</td> -->
				<!-- <td>25</td> -->
			</tr>
			<tr>
				<td>103</td>
				<td>王五</td>
				<td rowspan="2">
					<table border="" width="100%">
						<tr>
							<td>ID</td>
							<td>Name</td>
						</tr>
						<tr>
							<td>
								101
							</td>
							<td>
								小王
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>104</td>
				<td>赵六</td>
				<!-- <td>25</td> -->
			</tr>
		</table>
		
	</body>
</html>