18910140161

Html

首页 >> 前端开发 >> Html

Html学习之十六（表格与表单学习--课程表制作）

顺晟科技

2022-09-15 21:26:20

37

<!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>

结果：

 

上一篇：第一个HTML制作(表单制作) 下一篇：HTML表单 - Ricky_Hua
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！