HTML Tables Tutorial

作者: 5335773a96e9 | 来源:发表于2017-11-20 09:51 被阅读0次

屏幕快照 2017-11-20 上午9.52.01.jpg

<!DOCTYPE html>
<html>

<head>
    <title>Table Demo</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
    <h1>Groceries</h1>
    <table>
        <tr>
            <th>Item Name</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Aisle Number</th>
        </tr>
        <tr>
            <td>Milk</td>
            <td>$3.00</td>
            <td>1</td>
            <td>A3</td>
        </tr>
        <tr>
            <td>Whole Wheat Bread</td>
            <td>$2.85</td>
            <td>1</td>
            <td>A5</td>
        </tr>
        <tr>
            <td>Carrots</td>
            <td>$2.00</td>
            <td>2</td>
            <td>C2</td>
        </tr>
        <tr>
            <td>Apples</td>
            <td>$3.00</td>
            <td>4</td>
            <td>C2</td>
        </tr>
    </table>
</body>

</html>

table {
    border-collapse: collapse;
}

table th {
    text-align: left;
    background-color: #3a6070;
    color: #FFF;
    padding: 4px 30px 4px 8px;
}

table td {
    border: 1px solid #e3e3e3;
    padding: 4px 8px;
}

table tr:nth-child(odd) td {
    background-color: #e7edf0;
}