20190906 作业 - 作业

实例

<title>css圆角表格</title>
    <style>
        /*设置表格大小边框*/
        table{
            width: 500px;
            height: 400px;
            margin:0 auto;
            text-align:center;
            border:1px solid black;
            border-radius:10px;
            box-shadow:3px 3px gray ;
        }
        table{
            background-image: url("http://img3***gtn.bdimg.com/it/u=2568114326,1575192997&fm=26&gp=0.jpg");
            background-size: cover;

        }
        /*设置单元格背景色*/
        table tbody tr:nth-of-type(1)> td:first-of-type,
        table tbody tr:nth-of-type(5)> td:first-of-type,
        table tbody tr:nth-of-type(9)> td:first-of-type {
            background-color:lightseagreen;
            opacity: 0.5;
        }
        table tbody>tr:nth-of-type(1)>td,
        table tbody>tr:nth-of-type(2)>td,
        table tbody>tr:nth-of-type(3)>td,
        table tbody>tr:nth-of-type(5)>td,
        table tbody>tr:nth-of-type(6)>td,
        table tbody>tr:nth-of-type(7)>td,
        table tbody>tr:nth-of-type(9)>td,
        table tbody>tr:nth-of-type(10)>td,
        table tbody>tr:nth-of-type(11)>td{
            background-color:lightsalmon;
            opacity: 0.5;
        }
        /*设置表格标题格式*/
        caption{
            font-size:1.5rem;
            font-weight:bolder;
            margin-bottom:15px;
        }

        /*设置表头背景色*/
        table thead tr{
            background-color: lightcyan;
        }
        /*设置小计行背景色*/
        .color{
            font-weight:bolder;
            background-color: lightgrey;
        }
        /*设置总计行背景色*/
        table tfoot tr{
            font-size:1.3rem;
            font-weight:bolder;
            background-color: lightblue;
        }
        /* 设置表格圆角 */

        table thead tr:nth-of-type(1)>th:nth-of-type(1) {
            border-radius: 10px 0 0 0;
        }

        table thead tr:nth-of-type(1)>th:nth-of-type(7) {
            border-radius: 0 10px 0 0;
        }

        table tfoot tr:nth-of-type(1)>td:nth-of-type(1) {
            border-radius: 0 0 0 10px;
        }

        table tfoot tr:last-of-type>td:last-of-type {
            border-radius: 0 0 10px 0;
        }

    </style>
</head>

<body>
<table>
    <caption>水果销量表</caption>
    <thead>
    <tr>
        <th>省份</th>
        <th>江苏</th>
        <th>山东</th>
        <th>广东</th>
        <th>北京</th>
        <th>上海</th>
        <th>天津</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td rowspan="3">苹果</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
    </tr>
    <tr>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>

    </tr>
    <tr>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
    </tr>
    <tr class="color">
        <td>小计</td>
        <td>300</td>
        <td>300</td>
        <td>300</td>
        <td>300</td>
        <td>300</td>
        <td>300</td>
    </tr>
    <tr>
        <td rowspan="3">香蕉</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
    </tr>
    <tr>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
    </tr>
    <tr>

        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
    </tr>
    <tr class="color">
        <td>小计</td>
        <td>300</td>
        <td>300</td>
        <td>300</td>
        <td>300</td>
        <td>300</td>
        <td>300</td>
    </tr>
    <tr>
        <td rowspan="3">哈蜜瓜</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
    </tr>
    <tr>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
    </tr>
    <tr>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
    </tr>
    <tr class="color">
        <td>小计</td>
        <td>300</td>
        <td>300</td>
        <td>300</td>
        <td>300</td>
        <td>300</td>
        <td>300</td>
    </tr>

    </tbody>
    <tfoot>
    <tr>
        <td>总计</td>
        <td>900</td>
        <td>900</td>
        <td>900</td>
        <td>900</td>
        <td>900</td>
        <td>900</td>
    </tr>
    </tfoot>
</table>
</body>

运行实例 »

点击 "运行实例" 按钮查看在线实例

通过使用各种选择器，可以用css设置表格的大小，字体、背景色等样式。表格背景填充图片时，图片会重复，可以通过设置background-size来进行调整。

Correction status：qualified

Teacher's comments：实际上你的作业并没有完成, 表格制作是有问题的 .... 可能你也发现了...完了再改进一下, 圆角没有做完

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例