Html學習之十六（表格與表單學習--課程表制作）

本文轉載自查看原文 2019-03-31 16:40 915 Html學習

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>課程表</title>
        <style>
            table{/*設置外部相關屬性,不要設置內部屬性*/
                width: 500px;
                height: 300px;
                border: 3px black solid;
                margin: 100px auto;
                /*padding: 20px;*/
                border-collapse: collapse;/*合並邊框屬性 ，使邊框之間沒有間距*/
                
            }
            td,th{/*設置內部相關屬性,不要設置外部屬性*/
                border: 1px black solid;
                padding: 0px 22px;
                /*padding: 20px;*/
                /*margin: 20px;*/
            }
            .td1{
                background: #A9A9A9;
                font-weight: bold;
            }
            th{
                background: brown;
                font-size:20px;
                color: aliceblue;
            }
        </style>
    </head>
    <body>
        <table><!--table是塊狀元素的-->
            <tr><!--使用th會使12345加粗並居中-->
                <th colspan="6">課程表</th><!--和並列即是合並的是將6列合為1列使用colspan-->
                <!--<th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>-->
            </tr>
            <tr>
                <td class="td1"></td>
                <td class="td1">周一</td>
                <td class="td1">周二</td>
                <td class="td1">周三</td>
                <td class="td1">周四</td>
                <td class="td1">周五</td>
            </tr>
            <tr>
                <td rowspan="2" class="td1">上午</td><!--合並行使用rowspan，這是合並兩行-->
                <td>數學</td>
                <td>語文</td>
                <td>外語</td>
                <td>體育</td>
                <td>歷史</td>
            </tr>
            <tr>
                <td>數學</td>
                <td>語文</td>
                <td>外語</td>
                <td>體育</td>
                <td>歷史</td>
            </tr>
            <tr>
                <td rowspan="2" class="td1">下午</td><!--合並行使用rowspan-->
                <td>數學</td>
                <td>語文</td>
                <td>外語</td>
                <td>體育</td>
                <td>歷史</td>
            </tr>
            <tr>
                <td>數學</td>
                <td>語文</td>
                <td>外語</td>
                <td>體育</td>
                <td>歷史</td>
            </tr>
        </table>
    </body>
</html>

結果：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 課程表WPF制作學習步驟二 Html學習之十八（表格與表單學習--統計表制作） Html用表格標簽寫一個課程表 html菜單和課程表 Word2010制作課程表軟件破解逆向安全②-基礎游戲內存逆向分析-學習及其課程表 SIRI課程表 HTML5作業3超級課程表模板 LeetCode：課程表【207】 android課程表的實現