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

最新推荐文章于 2024-07-16 17:08:50 发布

置顶 yellow_flowers

最新推荐文章于 2024-07-16 17:08:50 发布

阅读量2.4k

点赞数 4

分类专栏：前端_基础文章标签： html css web form

本文链接：https://blog.csdn.net/yellow_flowers/article/details/89221742

版权

前端_基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

预期效果：

纯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>

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没有空格

yellow_flowers

关注

4
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
HTML5+CSS3制作简单商务风格表格

预期效果：纯html代码视图效果：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>商务风格的表格的设计与实现</title> <!--<link rel="styleshe...
复制链接

扫一扫

专栏目录