HTML5,Javascript,and jQuery 24-Hour Trainer(4)——初识CSS

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

Suagr

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

阅读量1.3k

点赞数 1

分类专栏： JavaScript 文章标签： html5 css

本文链接：https://blog.csdn.net/abclixu123/article/details/48506109

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset = "utf-8">
    <link rel="stylesheet" type="text/css" href="contacts.css">
    <title>
        Sugar's page
    </title>
</head> 
<body>
    <table>
        <thead>
            <tr>
                <th>Contact name</th>
                <th>Phone number</th>
                <th>Email address</th>
                <th>Company name</th>
                <th>Last contacted</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>William Smith</td>
                <td>555-642-7371</td>
                <td>william@testing.com</td>
                <td>ACME Industries</td>
                <td>2014-10-21</td>
            </tr>
            <tr>
                <td>Bob Morris</td>
                <td>555-999-2991</td>
                <td>bob@testing.com</td>
                <td>ABC Corp</td>
                <td>2014-19-12</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5">2 contacts displayed</td>
            </tr>
        </tfoot>
        <caption>Sales leads</caption>
    </table>
</body>
</html>

CSS文件

body {
    font-family: Arial, Helvetica, sans-serif;
}

table, th, td {
    border: 1px solid black;
    padding: 5px;
    border-collapse: collapse;
}

thead {
    background: #3056A0;
    color: white;
}

table > caption {
    font-weight: bold;
}

tfoot {
    font-size: 0.75em;
    text-align: right;
}

tbody tr:nth-child(even) {
    background: #E6E6F5;    
}

输出结果：

这里写图片描述

Suagr

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5,Javascript,and jQuery 24-Hour Trainer(4)——初识CSS

HTML文件<!DOCTYPE html><html lang="en"><head> <meta charset = "utf-8"> <link rel="stylesheet" type="text/css" href="contacts.css"> <title> Sugar's page </title></head> <body>
复制链接

扫一扫