关于表格（table）的实例

最新推荐文章于 2024-04-19 20:39:07 发布

冲呀web

最新推荐文章于 2024-04-19 20:39:07 发布

阅读量365

点赞数

分类专栏：前端三剑客文章标签： html

本文链接：https://blog.csdn.net/weixin_44698566/article/details/104954534

版权

前端三剑客专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.标签

table: 表格
tr: table row 行
td: table dock 单元格

table > tr > td

如果表格有表头的概念，将td换成th（table head）

在这里插入代码片<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table,tr,td,th{
				border: 1px solid;
				/*单线表格*/
				border-collapse: collapse;
			}
			tr,td{
				width: 100px;
				height: 80px;
			}
		</style>
	</head>
	<body>
		<table>
			<!--标题-->
			<caption>各地区固定资产投资情况</caption>
			<!--表头-->
			<thead>
				<tr>
					<th rowspan="2">地区</th>
					<th colspan="2">按总量分</th>
					<th colspan="2">按比重分</th>
				</tr>
				<tr>
					<th>每年初累计（亿元）</th>
					<th>比去年同期增长（%）</th>
					<th>自年初累计（%）</th>
					<th>去年同期（%）</th>
				</tr>
				
				<tbody>
				<tr>
					<td>全国</td>
					<td>185526.0</td>
					<td>9.6</td>
					<td>100.0</td>
					<td>100.0</td>
				</tr>
				<tr>
					<td>东部地区</td>
					<td>96203.0</td>
					<td>10.3</td>
					<td>45.0</td>
					<td>44.5</td>
				</tr>
				<tr>
					<td>北京市</td>
					<td>2200.84</td>
					<td>7.0</td>
					<td>1.2</td>
					<td>1.2</td>
				</tr>
				<tr>
					<td>四川省</td>
					<td>5620.3</td>
					<td>10.5</td>
					<td>5.2</td>
					<td>5.1</td>
				</tr>
				</tbody>
		</table>
	</body>
<html>

2.效果展示

在这里插入图片描述

注：border-collapse: collapse;设置为单线表格；

冲呀web

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于表格（table）的实例

1.标签table: 表格tr: table row 行td: table dock 单元格table > tr > td如果表格有表头的概念，将td换成th（table head）在这里插入代码片<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <tit...
复制链接

扫一扫