信安实践2-利用HTML和CSS绘制出好看的表格

利用HTML和CSS绘制出好看的表格

p1b.css
信安实践2-利用HTML和CSS绘制出好看的表格_第1张图片
p1a.css
信安实践2-利用HTML和CSS绘制出好看的表格_第2张图片

<html>
<head>
    <meta charset="UTF-8">
    <title>CS 142 Project 1,Problem 1title>
    <link rel="stylesheet" type="text/css" href="p1a.css"/>
head>
<body>
<table>
    <tr>
        <th>Itemth>
        <th>Manufacturerth>
        <th>Sizeth>
        <th>Unit Priceth>
        <th>Quantityth>
        <th>Total Priceth>
    tr>
    <tr class="td1">
        <td>Corn Flakestd>
        <td>Kellogg'std>
        <td>18 oztd>
        <td>2.50td>
        <td>1td>
        <td>2.50td>
    tr>
    <tr class="td2">
        <td>Solid White Tunatd>
        <td>Starkisttd>
        <td>5 oztd>
        <td>2.79td>
        <td>2td>
        <td>5.58td>
    tr>
    <tr class="td1">
        <td>Cream of Mushroom Souptd>
        <td>Campbell'std>
        <td>10.75 oztd>
        <td>1.00td>
        <td>2td>
        <td>2.00td>
    tr>

    <tr class="td2">
        <td>2% Lowfat Milktd>
        <td>Safewaytd>
        <td>0.5 galtd>
        <td>1.99td>
        <td>1td>
        <td>1.99td>
    tr>


    <tr class="td1">
        <td>Extra-Wide Egg Noodlestd>
        <td>Goldentd>
        <td>12 oztd>
        <td>0.87td>
        <td>3td>
        <td>2.61td>
    tr>


    <tr class="td6">
        <td>Totaltd>
        <td>td>
        <td>td>
        <td>td>
        <td>9td>
        <td>14.68td>
    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;
}

你可能感兴趣的:(信安实践,css,html)