HTML学习11：表格

目录

表格的结构

表格代码结构具体如下：

表格结构网页预览：

 合并单元格

单元格合并代码示意

合并单元格网页预览

---

表格的结构

表格代码结构具体如下：

    <!-- table就是表格的最大标签 -->
    <!-- border 表格边框 -->
    <!-- align 表格在父元素中 对齐方式 -->
    <!-- cellpadding 控制的是内容和边框之间的距离 -->
    <!-- cellspacing 控制的是边框与边框之间的距离 -->
<table border="1" align="center" cellpadding="20" cellspacing="0" width="400" height="300">
        <!-- 在表格上面水平居中,书写的时候紧跟table标签，意思就是table下面就写这个标签 -->
        <caption>表格的标题</caption>
        <!-- tr是行 -->
    <thead>
        <tr>
            <!-- 如果是第一行 我们称为表头 表头用th标签 -->
            <th>姓名</th>
            <th>年龄</th>
            <th>体重</th>
        </tr>
    </thead>
        <!-- 其它行用td -->
        <tr>
            <td>高航航</td>
            <td>25</td>
            <td>125</td>
        </tr>
        <tr>
            <td>申木木</td>
            <td>22</td>
            <td>100</td>
        </tr>
    </table>

表格结构网页预览：

---

 合并单元格

合并单元格在如今的开发中已经很少用到了，理解即可。

练习单元格合并的时候不要在里面写内容，看起来会更加清晰明了！

跨行（从上到下）rowspan

跨列（从左到右）colspan

单元格合并代码示意

<table border="1" width="600" height="300" cellspacing="0">
        <tr>
            <!-- 练习合并单元格切记写内容 -->
            <!-- 1.先确定跨行还是跨列合并 -->
            <!-- 2.找到目标单元格，找的规律是 先上后下 先左后右 -->
            <!-- 3.删除多余的单元格 -->
            <td colspan="5"></td>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td rowspan="4"></td>
        </tr>
        <tr>
            <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></td>
            <td></td>
            <td></td>
            <td></td>
            <!-- <td></td> -->
        </tr>
    </table>

合并单元格网页预览