html前端开发------表格table

文章目录

前言

一、思维导图

二、案例

---

前言

哈喽同学们大家好，本节我们开始学习html5基础部分------表格相关练习，本节内容作了解即可，实际应用较少。下面有具体案例和素材同学们自行取用

---

一、思维导图

 

二、案例

代码如下（示例）：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        table{
            border-collapse:collapse;
            text-align: center;
            border: 1px solid rgb(142, 176, 220);
            
        }
      
        td{
            width: 100px;
            height: 30px;

        }
        .friday{
            width: 100px;
            height: 50px;
        }
        
    </style>

<table border="1">
        <tr style="background-color: rgb(196, 216, 252); width: 100px;" >
            <td colspan="2">日期</td>
            <td style="width: 150px;" colspan="2">天气现象</td>  
            <td >气温</td>
            <td>风向</td>
            <td >风力</td>
        </tr>
        <tr>
            <td class="friday" rowspan="2">22日星期五</td>
            <td >白天</td>
            <td>*</td>
            <td>晴</td>
            <td>高温</td>
            <td >无持续风向</td>
            <td>微风</td>
        </tr>
        <tr>
            <td>夜间</td>
            <td>*</td>
            <td>晴</td>
            <td>高温</td>
            <td >无持续风向</td>
            <td>微风</td>
        </tr>
    </table>
    <table style="margin-top: 5px;" border="1">
        <tr>
            <td class="friday" rowspan="2">22日星期五</td>
            <td >白天</td>
            <td>*</td>
            <td>晴</td>
            <td>高温</td>
            <td>无持续风向</td>
            <td>微风</td>
        </tr>
        <tr>
           
            <td>夜间</td>
            <td>*</td>
            <td>晴</td>
            <td>高温</td>
            <td>无持续风向</td>
            <td>微风</td>
        </tr>
    </table>

 

---