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

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 nameth>
                <th>Phone numberth>
                <th>Email addressth>
                <th>Company nameth>
                <th>Last contactedth>
            tr>
        thead>
        <tbody>
            <tr>
                <td>William Smithtd>
                <td>555-642-7371td>
                <td>[email protected]td>
                <td>ACME Industriestd>
                <td>2014-10-21td>
            tr>
            <tr>
                <td>Bob Morristd>
                <td>555-999-2991td>
                <td>[email protected]td>
                <td>ABC Corptd>
                <td>2014-19-12td>
            tr>
        tbody>
        <tfoot>
            <tr>
                <td colspan="5">2 contacts displayedtd>
            tr>
        tfoot>
        <caption>Sales leadscaption>
    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;    
}

输出结果:

HTML5,Javascript,and jQuery 24-Hour Trainer(4)——初识CSS_第1张图片

你可能感兴趣的:(JavaScript)