01-HTML基础与进阶-day4-录像249

最新推荐文章于 2019-06-16 17:30:00 发布

转载最新推荐文章于 2019-06-16 17:30:00 发布 · 154 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/HiJackykun/p/11030908.html

本文详细介绍了HTML中表格的创建方法，包括使用<thead>、<tbody>、<tfoot>等标签来构建表格结构，以及如何使用<caption>、<th>、<td>等标签来增强表格的可读性和功能性。通过实例展示了如何实现单元格的跨行和跨列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

07表格头.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h3>我开始做一个三行三列的表格思密达</h3>
    <table  width="500" align="center" cellspacing="0" height="300" border="1">
        <!--thead表示表格头部-->
        <thead>
        <!--tr表示一行-->
            <tr>
                <!--td表示列  单元格-->
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <!--tbody表示表格body-->        
        <tbody>
            <tr>
                <!--td表示列  单元格-->
                <td>张三</td>
                <td>男</td>
                <td>40</td>
            </tr>
            <tr>
                <!--td表示列  单元格-->
                <td>李四</td>
                <td>女</td>
                <td>36</td>
            </tr>
        </tbody>
        <!--tfoot表示表格尾部，一般为统计信息-->        
        <tfoot>
        </tfoot>
    </table>
</body>
</html>

08完整的表格结构.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h3>我开始做一个三行三列的表格思密达</h3>
    <table  width="500" align="center" cellspacing="0" height="300" border="1">
        <caption>学生信息表</caption>
        <thead>
        <!--tr表示一行-->
            <tr>
                <!--td表示列  单元格-->
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <!--td表示列  单元格-->
                <td>张三</td>
                <td>男</td>
                <!--rowspan表示横跨2行-->                
                <td rowspan="2">40</td>
            </tr>
            <tr>
                <!--td表示列  单元格-->
                <td>李四</td>
                <td>女</td>
            </tr>
        </tbody>
        <tfoot>
            
        </tfoot>
    </table>
    <table  width="500" align="center" cellspacing="0" height="300" border="1">
        <caption>学生信息表</caption>
        <thead>
        <!--tr表示一行-->
            <tr>
                <!--td表示列  单元格-->
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <!--td表示列  单元格-->
                <td>张三</td>
                <td>男</td>
                <td>40</td>
            </tr>
            <tr>
                <!--td表示列  单元格-->
                <td>李四</td>
                <!--colspan表示横跨2列-->                    
                <td colspan="2">女</td>
            </tr>
        </tbody>
        
        <tfoot>
            
        </tfoot>
    </table>
</body>
</html>

转载于:https://www.cnblogs.com/HiJackykun/p/11030908.html