HTML 表格标签

目标：能够使用表格相关标签和属性，实现网页中表格结构的搭建

1、表格的基本标签

• 场景：在网页中一行+列的单元格的方式整齐展示和数据，如：学生成绩表
• 基本标签：
• 注意点：标签的嵌套关系：table>tr>td

2、表格相关属性

• 场景：设置表格基本展示效果
• 常见相关属性：

属性名	属性值	效果
bordoer	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

• 注意：实际开发时针对于样式效果推荐用CSS设置
• 代码：

<table border="1" width="500" height="300">
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr>
        <tr>
            <td>小李</td>
            <td>100分</td>
            <td>小李真棒</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>100分</td>
            <td>小红真棒</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>100分</td>
            <td>都很棒</td>
        </tr>
    </table>

• 效果：

姓名	成绩	评语
小李	100分	小李真棒
小红	100分	小红真棒
总结	100分	都很棒

3、表格标题和表头单元格标签

• 场景：在表格中表示整体大标题和一列小标题
• 其他标签：
• 注意点：
  • caption标签书写在table标签内部
  • th标签书写tr标签内部（用于替换td标签）
• 代码：

<table border="1" width="500" height="300">
        <caption>学生成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>

            <!-- <td>姓名</td>
            <td>成绩</td>
            <td>评语</td> -->
        </tr>
        <tr>
            <td>小李</td>
            <td>100分</td>
            <td>小李真棒</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>100分</td>
            <td>小红真棒</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>100分</td>
            <td>都很棒</td>
        </tr>
    </table>

• 效果：

学生成绩单

姓名	成绩	评语
小李	100分	小李真棒
小红	100分	小红真棒
总结	100分	都很棒

4、表格的结构标签

• 场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
• 结构标签：
• 注意点：
  • 表格结构标签内部用于包裹tr标签
  • 表格的结构标签可以省略
• 代码：

 <table border="1" width="500" height="300">
        <caption>学生成绩单</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>

                <!-- <td>姓名</td>
                <td>成绩</td>
                <td>评语</td> -->
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小李</td>
                <td>100分</td>
                <td>小李真棒</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>100分</td>
                <td>小红真棒</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>总结</td>
                <td>100分</td>
                <td>都很棒</td>
            </tr>
        </tfoot>
    </table>
	

• 效果：

学生成绩单

姓名	成绩	评语
小李	100分	小李真棒
小红	100分	小红真棒
总结	100分	都很棒

4、合并单元格

• 场景：将水平或垂直多个单元格合并成一个单元格

5、合并单元格-代码实现

5.1 合并单元格步骤：

1. 明确合并哪几个单元格
2. 通过左上原则，确定保留谁删除谁
   • 上下合并->只保留最上的，删除其他
   • 左右合并->只保留最左的，删除其他
3. 给保留的单元格设置：跨行合并（rowspan)或跨列合并(colspan)
   

• 注意点：只有同一个标签中的单元格才能合并，不能跨结构标签合并（不能跨：thread，tbody，tfoot）
• 代码：

<table border="1" width="500" height="300">
        <caption>学生成绩单</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
                <!-- <td>姓名</td>
                <td>成绩</td>
                <td>评语</td> -->
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小李</td>
                <td rowspan="2">100分</td>
                <td>小李真棒</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>小红真棒</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="2">100分</td>
            </tr>
        </tfoot>
    </table>

• 效果

学生成绩单

姓名	成绩	评语
小李	100分	小李真棒
小红		小红真棒
总结	100分