HTML5+CSS3制作简单商务风格表格

预期效果：

纯html代码视图效果：

代码：

    
    
    



商务风格表格的设计与实现


    
招聘信息表
    
地点
招聘职位
公司

    
四川
Java架构师
拳头

    
全国
产品培训生
腾讯


    
全国
前端开发工程师
阿里巴巴

    
上海
交互设计师
网易设计

    
北京
视觉设计师
360

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;/*设置字体颜色*/
}

#recruit tr.orange{
    background-color: yellow /*给每行设置背景颜色*/
}

注意#recruit tr.orange 是tr.orange，tr与.orange没有空格