表格tr的使用

最新推荐文章于 2023-08-29 16:19:00 发布

加油，铁子！

最新推荐文章于 2023-08-29 16:19:00 发布

阅读量141

点赞数 1

分类专栏： web前端 HTML 文章标签： html5 css 前端

本文链接：https://blog.csdn.net/weixin_51264427/article/details/119322003

版权

web前端同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

HTML

16 篇文章 0 订阅

订阅专栏

表格的基本结构

如何使用表格

合并行和合并列

表格的基本结构

表格：table

表头：thead

表格主题：tbody

表格的行：tr

表头的列：th

表主体的列：td

如何使用表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<table border="5" cellspacing="0">
			<thead >
				<tr>
					<th>电视剧</th>
					<th>综艺</th>
					<th>电影</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>111</td>
					<td>112</td>
					<td>113</td>
				</tr>
				<tr>
					<td>211</td>
					<td>212</td>
					<td>213</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

合并行和合并列

colspan是横向合并；rowspan是纵向合并。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<table border="5" cellspacing="0">
			<thead >
				<tr>
					<th>电视剧</th>
					<th>综艺</th>
					<th>电影</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td rowspan="2">111</td>
					<td colspan="2">112</td>
					<!-- <td>113</td> -->
				</tr>
				<tr>
					<!-- <td>211</td> -->
					<td>212</td>
					<td>213</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

加油，铁子！

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表格tr的使用

表格的基本结构表格：table表头：thead表格主题：tbody表格的行：tr表头的列：th表主体的列：td如何使用表格<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style ...
复制链接

扫一扫