HTML表格

最新推荐文章于 2020-10-15 18:01:32 发布

luyunix

最新推荐文章于 2020-10-15 18:01:32 发布

阅读量144

点赞数

分类专栏： HTML，CSS，JS的学习文章标签： html 标签

本文链接：https://blog.csdn.net/weixin_37311400/article/details/78660523

版权

HTML，CSS，JS的学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

具体内容网页源码中均有注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格案例</title>
	</head>
	<body>
		<h4>带有表头合并了单元格设置了内容与边框边柜和单元格间距带有单元背景的表格</h4>
		<!--cellpadding单元格内容与其边框之间的空白-->
		<!--cellspacing单元格间距-->
		<table border="1" cellpadding="10" cellspacing="10">
			<tr>
				<th></th>
				<th>第一列</th>
				<th>第二列</th>
				<th>第三列</th>
			</tr>
			<tr>
				<th>第一行</th>
				<!--rowspan行合并-->
				<td rowspan="2">合并两行啊</td>
				<!--单元背景颜色-->
				<td bgcolor="red">1.2</td>
				<!--单元背景图片-->
				<td background="../img/Beer-Cap-Delicious_128.png">1.3</td>
			</tr>
			<tr>
				<th>第二行</th>
				<td>2.2</td>
				<td>2.3</td>
			</tr>
			<tr>
				<th>第三行</th>
				<!--colspan列合并-->
				<td colspan="3">合并三列啊</td>
			</tr>
		</table>
		<h4>这个表格有背景颜色,排列了单元内容</h4>
		<table border="1" bgcolor="aqua" width="200" height="100">
			<tr>
				<!--默认左对齐-->
				<td>1.1</td>
				<td>1.2</td>
				<td>1.3</td>
			</tr>
			<tr>
				<!--右对齐-->
				<td align="right">2.1</td>
				<td align="right">2.2</td>
				<td align="right">2.3</td>
			</tr>
			<tr>
				<!--居中对齐-->
				<td align="center">3.1</td>
				<td align="center">3.2</td>
				<td align="center">3.3</td>
			</tr>
		</table>
		<h4></h4>
	</body>
</html>

网页显示效果