版权声明：未允许请务转载 https://blog.csdn.net/realize_dream/article/details/84801025
用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>