html中常用的标签-表格标签

最新推荐文章于 2023-04-15 15:36:45 发布

ZHOU_VIP

最新推荐文章于 2023-04-15 15:36:45 发布

阅读量834

点赞数

本文链接：https://blog.csdn.net/ZHOU_VIP/article/details/73428491

版权

Html CSS-广陵散专栏收录该内容

15 篇文章 0 订阅

订阅专栏


表格标签（****重要的标签*****）
	* 可以对数据进行格式化，使数据显示更加清晰

	* <table></table>: 表示表格的范围
		- border：表格线
		- bordercolor：表格线的颜色
		- cellspacing：单元格直接的距离
		- width：表格的宽度
		- height：表格的高度

	** 在table里面 <tr></tr>
		- 设置对齐方式 align： left  center  right

	   *** 在tr里面 <td></td>
	   - 设置显示方式 align： left  center  right

	   *** 使用th也可以表示单元格
		- 表示可以实现居中和加粗

	* 代码
		<table border="1" bordercolor="blue" cellspacing="0" width="200" height="150">
	
	* 画图分析表格的写法
		- 首先定义一个表格的范围使用table
			- 定义一行使用 tr
			- 定义一个单元格使用 td
	** 操作技巧：
		- 首先数有多少行 ，数每行里面有多少个单元格
	
	** 表格的标题
		<caption></caption>

	** 合并单元格 （了解一下就可以了）
		- rowspan：跨行
			** <td rowspan="3">人员信息</td>
		- colspan：跨列
			** <td colspan="3">人员信息</td>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<table border="1" bordercolor="blue" cellspacing="0" width="400" height="150">
			<caption>人员信息</caption>
			<tr align="center">
				<td colspan="3">人员信息</td>
			</tr>
			<tr align="center">
				<td>姓名</td>
				<td>性别</td>
				<td>年龄</td>
			</tr>
			<tr>
				<td align="right">东方不败</td>
				<td>男</td>
				<td rowspan="3">20</td>
			</tr>
			<tr>
				<td>岳不群</td>
				<td>女</td>
				<td>30</td>
			</tr>
			<tr>
				<th>林平之</th>
				<th>男</th>
				<th>40</th>
			</tr>
			<tfoot>
				<tr>
					<td>统计</td>
					<td colspan="3">两名</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

ZHOU_VIP

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
html中常用的标签-表格标签

表格标签（****重要的标签*****） * 可以对数据进行格式化，使数据显示更加清晰 * : 表示表格的范围 - border：表格线 - bordercolor：表格线的颜色 - cellspacing：单元格直接的距离 - width：表格的宽度 - height：表格的高度 ** 在table里面 - 设置对齐方式 align： left center
复制链接

扫一扫