表格 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格</title>
    </head>
    <body>
        <!-- 
            表格用来表示一些格式化的数据
            
            在网页中，使用table来创建表格
         -->
        <table border="1px" align="center" width="50%">
            <!-- thead表示表格的头部 -->
            <thead>
                <!-- 在table中使用tr来表示表格中的一行，有几个tr就有几行 -->
                <tr>
                <!-- th表示表头的单元格 -->
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                </tr>
            </thead>
            
            <!--
                tbody表示表格的主体
                    
                注意：如果创建表格，没有使用tbody，浏览器会自动添加tbody，并且将所有的tr都添加到
                    tbody中，所以tr的父元素并不是table而是tbody
            -->
            <tbody>
                <tr>
                    <!-- 在tr中使用td来表示单元格，有几个td就有几个单元格 -->
                    <td>1</td>
                    <td>张三</td>
                    <td>男</td>
                </tr>
                
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>女</td>
                </tr>
                
                <tr>
                    <td>3</td>
                    <td>王二</td>
                    <td>男</td>
                </tr>
                
                <tr>
                    <td>4</td>
                    <td>麻子</td>
                    <td>女</td>
                </tr>
            </tbody>
            
            <!-- tfoot表示表格的底部 -->
            <tfoot>
                <tr>
                    <!--colspan为横向合并单元格  -->
                    <td colspan="2">合计</td>
                    <td>4人</td>
                </tr>
                
                <tr>
                    <!-- rowspan为纵向合并单元格 -->
                    <td rowspan="2">奇数为高年级</td>
                    <td>学号为</td>
                    <td>1、3的是高年级</td>
                </tr>
                
                <tr>
                    <td>高年级为</td>
                    <td>1、3</td>
                </tr>
            </tfoot>
            
        </table>
    </body>
</html>

 

posted @ 2022-05-16 22:39  氯丙嗪  阅读(9)  评论(0)  编辑  收藏  举报