HTML5+CSS3制作简单商务风格表格预期效果：
纯html代码视图效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商务风格的表格的设计与实现</title>
<!--<link rel="stylesheet" href="../css/BusinessForm.css">-->
</head>
<body>
<h3>商务风格表格的设计与实现</h3>
<hr/>
<table id="recruit" border="1" >
<caption>招聘信息表</caption>
<tr><th>地点</th><th>招聘职位</th><th>公司</th></tr>
<tr><td>四川</td><td>Java架构师</td><td>拳头</td></tr>
<tr class="orange"><td>全国</td><td>产品培训⽣</td><td>腾讯</td></tr>
<tr><td>全国</td><td>前端开发⼯程师</td><td>阿⾥巴巴</td></tr>
<tr class="orange"><td>上海</td><td>交互设计师</td><td>⽹易设计</td></tr>
<tr><td>北京</td><td>视觉设计师</td><td>360</td></tr>
</table>
</body>
html网页设计 table </html>
css主要实现的功能效果：
合并两个单元格之间的边：
修改表格的宽度，铺满整个页⾯：
修改各种元素的颜⾊：
css代码为：
#recruit{
width: 100%;
border-collapse: collapse;/*合并两个单元格之间的外边*/
text-align: left;
}
#recruit td,#recruit th{
border: 1px solid orange;  /*设置表格线为橘黄⾊*/
padding: 7px;/*设置内边距为7px*/
}
#recruit th{
background-color: orange;  /*设置背景⾊*/
color: #FFFFFF;/*设置字体颜⾊*/
}
#ange{
background-color: yellow /*给每⾏设置背景颜⾊*/
}
注意#ange 是tr.orange，tr与.orange没有空格

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。