HTML5商务表格的设计与实现

最新推荐文章于 2024-07-05 22:38:16 发布

码农渔夫

最新推荐文章于 2024-07-05 22:38:16 发布

阅读量2.3k

点赞数

分类专栏：大前端

本文链接：https://blog.csdn.net/realize_dream/article/details/84801025

版权

大前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

用HTML5、CSS3实现常见的商务表格，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商务表格的设计</title>
		<style type="text/css">
			.table{
				height: 800;
			}
			.table-con th,tr{
				width: 350px;
				padding: 7px;
			}
			.table-con th{
				background-color: orange;/*背景颜色*/
				color: #FFFFFF;
			}
			.oreange{
				background-color: #FFEDDB;
			}
			table{
				text-align: left;
			}
		</style>
	</head>
	<body>
		<h3>商务表格的 设计</h3>
		<hr />
		<div class="table">
			<div class="table-con">
				<table border="solid 1px" cellspacing="0" cellpadding="15px">
					<caption>招聘信息表</caption>
					<tr ><th >地点</th><th>招聘职位</th><th>公司</th></tr>
					<tr >
						<td>全国</td>
						<td>产品培训</td>
						<td>腾讯</td>
					</tr>
					<tr class="oreange">
						<td>全国</td>
						<td>前端开发</td>
						<td>阿里巴巴</td>
					</tr>
					<tr>
						<td>上海</td>
						<td>交互设计师</td>
						<td>网易游戏</td>
					</tr>
					<tr class="oreange">
						<td>北京</td>
						<td>视觉设计师</td>
						<td>360</td>
					</tr>
					<tr>
						<td>深圳</td>
						<td>数据分析</td>
						<td>IBM</td>
					</tr>
					<tr class="oreange">
						<td>杭州</td>
						<td>数据研发工程师</td>
						<td>微软</td>
					</tr>
				</table>
			</div>
		</div>
	</body>
</html>