06.html表格

最新推荐文章于 2024-03-31 14:25:55 发布

lizhoutx1

最新推荐文章于 2024-03-31 14:25:55 发布

阅读量119

点赞数

本文链接：https://blog.csdn.net/weixin_43475526/article/details/83388479

版权

HTML基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html 表格

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML表格</title>
	<style type="text/css">
		table{
			border-collapse: collapse;
		}
		th,td{
			padding: 5px 10px;
		}
	</style>
</head>
<body>
	<table border="1">
		<caption>表格标题</caption>
		<!-- 加粗列 -->
		<thead>
			<tr>
				<th>水果</th>
				<th>蔬菜</th>
				<th>文具</th>
			</tr>
		</thead>
		<!-- 表格主题 -->
		<tbody>
			<tr>
				<td>苹果</td>
				<td>花菜</td>
				<td>钢笔</td>
			</tr>
			<tr>
				<td>橙子</td>
				<td>青菜</td>
				<td>毛笔</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

在这里插入图片描述

case 1

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table_case</title>
	<style type="text/css">
		table,td{
			border-collapse: collapse;
			border: 1px solid #ccc;
		}
		td{
			padding: 5px 10px;
		}
	</style>
</head>
<body>
	<table>
		<tbody>
			<tr>
				<td colspan="3">111</td>
			</tr>
			<tr>
				<td rowspan="2">222</td>
				<td colspan="2">333</td>
			</tr>
			<tr>
				<td>444</td>
				<td>555</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

在这里插入图片描述

case2

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table_case2</title>
	<style type="text/css">
		table{
			/* border-collapse: collapse; */
		}
		table,tr,td{
			border: 1px solid #ccc;
		}
		td{
			width: 100px;
			height: 100px;
		}
	</style>
</head>
<body>
	<table>
		<tr>
			<td colspan="2">111</td>
			<td rowspan="2">222</td>
		</tr>
		<tr>
			<td rowspan="2">333</td>
			<td>444</td>
		</tr>
		<tr>
			<td colspan="2">555</td>
		</tr>
	</table>
</body>
</html>

在这里插入图片描述