页面制作——HTML的单元作业 【请实现以下效果图的HTML部分】

 

效果图：

实际图：

 

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>

    table{width:50%;empty-cells:show;background-color:transparent;border-spacing:0;  font-weight: 700;}
.table-border .table-bordered{border-bottom:0}
.table-bordered{border:1px solid #ddd;border-collapse:separate;border-left:0}
.table-border{border-top:1px solid #ddd}
.gray{background-color:#eee}
.head{font-weight:700}
 td {  border: 1px solid #ddd;  padding: 10px;}
 caption {  padding-bottom: 20px;}

    </style>
    
</head>
<body>
   <table class="table-border table-bordered">
        <caption><strong>运费详情</strong></caption>
        <tbody>
            <tr class="gray head">
                <td >区域</td>
                <td >寄达地</td>
                <td>首重(元/1000g)</td>
                <td>续重(元/1000g)</td>
            </tr>
            <tr>
                <td class="gray" rowspan="2"><strong>一区</strong></td>
                <td>浙江、上海、江苏</td>
                <td>6</td>
                <td>1</td>
            </tr>
            <tr>
                
                <td>江西、安徽</td>
                <td>7</td>
                <td>1</td>
            </tr>
            <tr>
                <td class="gray"><strong>二区</strong></td>
                <td>吉林、黑龙江、云南</td>
                <td>10</td>
                <td>6</td>
            </tr>
            <tr>
                <td class="gray"><strong>三区</strong></td>
                <td>新疆、西藏</td>
                <td>15</td>
                <td>10</td>
            </tr>
        </tbody>
   </table>
</body>
</html>

 

posted @ 2015-09-26 21:14  哪有公园可以住的呀  阅读(676)  评论(0)    收藏  举报