【小练习03】CSS-表格（table）--天气预报

表格基础知识链接：http://blog.csdn.net/baidu_37107022/article/details/71713281

练习要求实现如下效果图：

这里写图片描述

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                background: #ebeff7;
            }
            /*清除表格默认样式*/
            table{
                border-collapse: collapse;
            }
            th,td{
                padding: 0;
            }




            table{
                width: 640px;
                margin: 0 auto;
            }
            th,td{
                border: 1px solid #99b0da;
                text-align: center;
            }

            th{
                font: 14px/30px "微软雅黑";
                background: #dbe3fa;
            }
            td{
                font: 12px/28px "微软雅黑";
                background: #fff;
            }
            .bg{
                background: #f4f7fc;
            }
            img{
                vertical-align: middle;
            }
            .high{
                color: #e54600;
            }
            .low{
                color: #7171d1;
            }
            .space{
                height: 4px;
                border: none;
                background: #ebeff7;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th colspan="2">日期</th>
                    <th colspan="2">天气现象</th>
                    <th>气温</th>
                    <th>风向</th>
                    <th>风力</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="2" class="bg">22日星期五</td>
                    <td class="bg">白天</td>
                    <td><img src="img/img_01.gif"/></td>
                    <td>晴间多云</td>
                    <td class="high">高温7C</td>
                    <td>无持续风向</td>
                    <td>微风</td>
                </tr>
                <tr>
                    <td class="bg">夜间</td>
                    <td><img src="img/img_02.gif"/></td>
                    <td>晴</td>
                    <td class="low">低温-4C</td>
                    <td>无持续风向</td>
                    <td>微风</td>
                </tr>
                <tr><td colspan="7" class="space"></td></tr>
                <tr>
                    <td rowspan="2" class="bg">22日星期五</td>
                    <td class="bg">白天</td>
                    <td><img src="img/img_01.gif"/></td>
                    <td>晴间多云</td>
                    <td class="high">高温7C</td>
                    <td>无持续风向</td>
                    <td>微风</td>
                </tr>
                <tr>
                    <td class="bg">夜间</td>
                    <td><img src="img/img_02.gif"/></td>
                    <td>晴</td>
                    <td class="low">低温-4C</td>
                    <td>无持续风向</td>
                    <td>微风</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

源码地址：http://download.csdn.net/detail/baidu_37107022/9840533

来源：https://www.cnblogs.com/TCB-Java/p/6853961.html

标签

html表格

table

css