表格

最新推荐文章于 2024-06-19 17:08:42 发布

梦逸雨涵

最新推荐文章于 2024-06-19 17:08:42 发布

阅读量215

点赞数

分类专栏： web 文章标签： css html

本文链接：https://blog.csdn.net/qq_41943578/article/details/88563316

版权

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

请写出如下表格效果

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商务风格表格的设计与实现</title>
    <style>
        #recruit
        {
            width:100%;
            border-collapse: collapse;
            text-align: left;
        }
        #recruit td,#recruit th
        {
            border: 1px solid blue;
            padding: 7px;
        }
        #recruit th
        {
            background-color:blue;
            color: #FFF;
        }
        #recruit tr.blue
        {
            background-color: #FFEDDB;
        }
    </style>
</head>
<body>
    <h3>商务风格表格的设计与实现</h3>
    <table id="recruit" border="1">
        <caption>招聘信息表</caption>
        <tr>
            <th>地点</th>
            <th>招聘职位</th>
            <th>公司</th>
        </tr>
        <tr>
            <td>全国</td>
            <td>产品培训生</td>
            <td>腾讯</td>
        </tr>
        <tr class="blue">
            <td>全国</td>
            <td>前端开发工程师</td>
            <td>阿里巴巴</td>
        </tr>
        <tr>
            <td>上海</td>
            <td>交互设计师</td>
            <td>网易游戏</td>
        </tr>
        <tr class="blue">
            <td>北京</td>
            <td>视觉设计师</td>
            <td>360</td>
        </tr>
        <tr>
            <td>深圳</td>
            <td>数据分析师</td>
            <td>IBM</td>
        </tr>
        <tr class="blue">
            <td>杭州</td>
            <td>数据研发工程师</td>
            <td>微软</td>
        </tr>
    </table>
</body>
</html>

运行结果：