HTML5+CSS3 制作圆角表格

晚晚昨晚吃晚饭很晚睡说晚

于 2021-11-03 13:08:07 发布

阅读量797

点赞数 1

分类专栏：学习打卡 HTML5+CSS3 文章标签： html5 css3 前端

本文链接：https://blog.youkuaiyun.com/qq_55786319/article/details/121111240

版权

本文详细介绍了如何使用HTML5的table相关标签和CSS3的border-radius属性来制作圆角表格。讲解了table、tr、th、td、caption等标签的作用，以及th和td的rowspan、colspan属性，还提到了table的border、summary、cellpadding和cellspacing属性。此外，文章还提及了CSS3的选择器:first-child以及border-radius和box-shadow属性在美化表格时的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="main.css">
		<meta charset="utf-8">
		<title></title>
		<style>
		</style>
	</head>
	<body>
		<table summary="2020年一季度GDP初步核算数据" class="gdp">
			<caption>2020年一季度GDP初步核算数据</caption>
			<thead>
				<tr>
					<th></th><!--总额上方空白处的表格-->
					<th>绝对额（亿元）</th>
					<th>比上年同期增长（%）</th>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<td colspan="3">
						<div>
							<p>注：<br />1.绝对额按现价计算，增长速度按不变价计算；<br />
								2.三次产业分类依据国家统计局2018年修订的《三次产业划分规定》；<br />
								3.行业分类采用《国民经济行业分类（GB/T 4754－2017）》；<br />
								4.本表GDP总量数据中，有的不等于各产业（行业）之和，是由于数值修约误差所致，未作机械调整。</p

最低0.47元/天解锁文章