Web前端，HTML表格相关标签和属性，在网页中表格结构的显示

一、表格的基本标签

场景:

在网页中以行+列的单元格的方式整齐展示和数据，如:学生成绩表

代码

    <!-- table 包含 tr, tr包含td -->
    <table border="1" width="600" height="400">
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr>
        <tr>
            <td>战三</td>
            <td>100分</td>
            <td>孩砸, 真棒啊</td>
        </tr>
        <tr>
            <td>丽丽</td>
            <td>150分</td>
            <td>丽丽最美了</td>
        </tr>
    </table>

基本标签:

注意点:

小结

完成一个简单的表格，需要由几个标签组成?分别表示什么?

表格基本标签的嵌套关系是什么?

二、表格相关属性

场景:

设置表格基本展示效果

代码

   <table border="1" width="600" height="100">
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>小哥哥</td>
            <td>100分</td>
            <td>孩砸, 真棒啊</td>
        </tr>
        <tr>
            <td>小姐姐</td>
            <td>100分</td>
            <td>小姐姐，你考的真漂亮</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>郎才女貌</td>
            <td>郎才女貌</td>
        </tr>
    </table>

常见相关属性:

注意点:

小结

给表格添加边框，可以使用什么属性完成?

设置表格整体的宽高，可以使用什么属性完成?

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

场景:

在表格中表示整体大标题和一列小标题

代码

<table border="1">
        <caption><strong>学生成绩单</strong></caption>
        <tr>
            <!-- <td></td> -->
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>100分</td>
            <td>真棒, 第一名</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>99分</td>
            <td>真棒, 第二名</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>郎才女貌</td>
            <td>真棒, 相亲成功</td>
        </tr>
    </table>

其他标签:

注意点:

小结

表示表格整体大标题，使用什么标签完成?书写在什么位置?

在表格第一行设置一列的小标题，使用什么标签完成?书写在什么位置?

四、表格的结构标签(了解)

场景:

让表格的内容结构分组，突出表格的不同部分(头部、主体、底部)，使语义更加清晰

结构标签:

注意点:

小结

表格的结构标签分别有哪些?表示什么含义?

表格结构标签书写在什么位置?

五、合并单元格

合并单元格-思路

场景:

将水平或垂直多个单元格合并成一个单元格

合并单元格-代码实现

合并单元格步骤:

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

注意点:

小结

合并单元格的步骤分哪几步?

1. 明确合并哪几个单元格
2. 通过左上原则，确定保留谁删除谁
   • 上下合并→只保留最上的，删除其他
   • 左右合并→只保留最左的，删除其他
3. 给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)
   • rowspan:跨行合并→垂直方向合并
   • colspan:跨列合并→水平方向合并

可以跨结构标签合并单元格吗?

总结

表格基本标签:table > tr > td

表格标题和表头单元格标签:table > caption + tr > th

表格结构标签:table > thead > tr > td

表格相关属性

合并单元格步骤

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