信安實踐2-利用HTML和CSS繪製出好看的表格

weixin_44496054發表於2020-12-31
HTMLCSS

利用HTML和CSS繪製出好看的表格

p1b.css
p1b.css
p1a.css
p1a.css

<html>
<head>
    <meta charset="UTF-8">
    <title>CS 142 Project 1,Problem 1</title>
    <link rel="stylesheet" type="text/css" href="p1a.css"/>
</head>
<body>
<table>
    <tr>
        <th>Item</th>
        <th>Manufacturer</th>
        <th>Size</th>
        <th>Unit Price</th>
        <th>Quantity</th>
        <th>Total Price</th>
    </tr>
    <tr class="td1">
        <td>Corn Flakes</td>
        <td>Kellogg's</td>
        <td>18 oz</td>
        <td>2.50</td>
        <td>1</td>
        <td>2.50</td>
    </tr>
    <tr class="td2">
        <td>Solid White Tuna</td>
        <td>Starkist</td>
        <td>5 oz</td>
        <td>2.79</td>
        <td>2</td>
        <td>5.58</td>
    </tr>
    <tr class="td1">
        <td>Cream of Mushroom Soup</td>
        <td>Campbell's</td>
        <td>10.75 oz</td>
        <td>1.00</td>
        <td>2</td>
        <td>2.00</td>
    </tr>

    <tr class="td2">
        <td>2% Lowfat Milk</td>
        <td>Safeway</td>
        <td>0.5 gal</td>
        <td>1.99</td>
        <td>1</td>
        <td>1.99</td>
    </tr>


    <tr class="td1">
        <td>Extra-Wide Egg Noodles</td>
        <td>Golden</td>
        <td>12 oz</td>
        <td>0.87</td>
        <td>3</td>
        <td>2.61</td>
    </tr>


    <tr class="td6">
        <td>Total</td>
        <td></td>
        <td></td>
        <td></td>
        <td>9</td>
        <td>14.68</td>
    </tr>
</table>
</body>
</html>

table {
    font-family: Tahoma;
    font-size: 13px;
    border-collapse:collapse;
    
}
td,th{
    border: solid white;
    border-width: 3px 0px;
}
th{
    background-color: #687291;
    color: white;
    font-weight: bold;
    text-align: left;
}
tr.td1{
    background-color: #eeeff2;
}
tr.td2{
    background-color: #dfe1e7;
}
.td6{
    border-top:5px black;
    visibility: hidden;
}
tr>td{
    padding-left: 3px;
    padding-right: 17px;
}
tr>th{
    padding-right: 5px;
}
tr>td+td+td~td{
    text-align: center;
}

table {

    padding: 20px;
    font-family: Tahoma;
    font-size: 13px;
    border: 10px solid #d0d0ff;
    border-spacing: 0 1px;
    /*border-spacing: 0 1px設定相鄰單元格的邊框間的距離
    如果不加這一句，每一個td都是分離的，如果設定某行所有td的 border-top為一條實線，
    那麼將會出現相鄰的td線間出現間距，這裡設定列間border-spacing為0，
    可以將多個td的border-top拼接在一起形成一條直線*/
}

th {
    text-align: left;
}

tr>td+td+td~td{/*這個選擇器的意思是，tr裡的第一個td再後數兩個td，以及之後所有td*/
    text-align: center;
}

.td6 td{/*在table沒有collapse時，tr沒有border屬性，只有td可以設定border。.td6 td相當於.td6>td*/
    border-top: 2px solid black;
}

相關文章