表格-移入監(jiān)聽(tīng)-合并

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            /*
             * 設(shè)置表格的寬度
             */
            table{
                width: 300px;
                /*居中*/
                margin: 0 auto;
                /*邊框*/
                /*border:1px solid black;*/
                /*
                 * table和td邊框之間默認(rèn)有一個(gè)距離
                 *  通過(guò)border-spacing屬性可以設(shè)置這個(gè)距離
                 */
                /*border-spacing:0px ;*/
                
                /*
                 * border-collapse可以用來(lái)設(shè)置表格的邊框合并
                 * 如果設(shè)置了邊框合并，則border-spacing自動(dòng)失效
                 */
                border-collapse: collapse;
                /*設(shè)置背景樣式*/
                /*background-color: #bfa;*/
            }
            
            /*
             * 設(shè)置邊框
             */
            td , th{
                border: 1px solid black;
            }
            
            /*
             * 設(shè)置隔行變色
             */
            tr:nth-child(even){
                background-color: #bfa;
            }
            
            /*
             * 鼠標(biāo)移入到tr以后，改變顏色
             */
            tr:hover{
                background-color: #ff0;
            }
            
            
        </style>
    </head>
    <body>
        <!--
            table是一個(gè)塊元素
        -->
        
        <table>
            <tr>
                <!--
                    可以使用th標(biāo)簽來(lái)表示表頭中的內(nèi)容，
                        它的用法和td一樣，不同的是它會(huì)有一些默認(rèn)效果
                -->
                <th>學(xué)號(hào)</th>
                <th>姓名</th>
                <th>性別</th>
                <th>住址</th>
            </tr>
            <tr>
                <td>1</td>
                <td>孫悟空</td>
                <td>男</td>
                <td>花果山</td>
            </tr>
            <tr>
                <td>2</td>
                <td>豬八戒</td>
                <td>男</td>
                <td>高老莊</td>
            </tr>
            <tr>
                <td>3</td>
                <td>沙和尚</td>
                <td>男</td>
                <td>流沙河</td>
            </tr>
            <tr>
                <td>4</td>
                <td>唐僧</td>
                <td>男</td>
                <td>女兒國(guó)</td>
            </tr>
            <tr>
                <td>1</td>
                <td>孫悟空</td>
                <td>男</td>
                <td>花果山</td>
            </tr>
            <tr>
                <td>2</td>
                <td>豬八戒</td>
                <td>男</td>
                <td>高老莊</td>
            </tr>
            <tr>
                <td>3</td>
                <td>沙和尚</td>
                <td>男</td>
                <td>流沙河</td>
            </tr>
            <tr>
                <td>4</td>
                <td>唐僧</td>
                <td>男</td>
                <td>女兒國(guó)</td>
            </tr>
            <tr>
                <td>1</td>
                <td>孫悟空</td>
                <td>男</td>
                <td>花果山</td>
            </tr>
            <tr>
                <td>2</td>
                <td>豬八戒</td>
                <td>男</td>
                <td>高老莊</td>
            </tr>
            <tr>
                <td>3</td>
                <td>沙和尚</td>
                <td>男</td>
                <td>流沙河</td>
            </tr>
            <tr>
                <td>4</td>
                <td>唐僧</td>
                <td>男</td>
                <td>女兒國(guó)</td>
            </tr>
            <tr>
                <td>1</td>
                <td>孫悟空</td>
                <td>男</td>
                <td>花果山</td>
            </tr>
            <tr>
                <td>2</td>
                <td>豬八戒</td>
                <td>男</td>
                <td>高老莊</td>
            </tr>
            <tr>
                <td>3</td>
                <td>沙和尚</td>
                <td>男</td>
                <td>流沙河</td>
            </tr>
            <tr>
                <td>4</td>
                <td>唐僧</td>
                <td>男</td>
                <td>女兒國(guó)</td>
            </tr>
            <tr>
                <td>1</td>
                <td>孫悟空</td>
                <td>男</td>
                <td>花果山</td>
            </tr>
            <tr>
                <td>2</td>
                <td>豬八戒</td>
                <td>男</td>
                <td>高老莊</td>
            </tr>
            <tr>
                <td>3</td>
                <td>沙和尚</td>
                <td>男</td>
                <td>流沙河</td>
            </tr>
            <tr>
                <td>4</td>
                <td>唐僧</td>
                <td>男</td>
                <td>女兒國(guó)</td>
            </tr>
            <tr>
                <td>1</td>
                <td>孫悟空</td>
                <td>男</td>
                <td>花果山</td>
            </tr>
            <tr>
                <td>2</td>
                <td>豬八戒</td>
                <td>男</td>
                <td>高老莊</td>
            </tr>
            <tr>
                <td>3</td>
                <td>沙和尚</td>
                <td>男</td>
                <td>流沙河</td>
            </tr>
            <tr>
                <td>4</td>
                <td>唐僧</td>
                <td>男</td>
                <td>女兒國(guó)</td>
            </tr>
        </table>
        
    </body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容