html入门（四）—— 表格（table）

1. 基本标签
    A. 表格的基本标签包括
        table（表格），必要标签
        caption（表名）
        tr（行，即table row），必要标签
        th（表头，即table header，浏览器将其解释为加粗且居中显示）
        td（单元格，即table data cell，浏览器将其解释为居左显示），必要标签
        e.g. <table>
               <caption>成绩表</caption>
               <tr>
                 <th>姓名</th>
                 <th>语文</th>
                 <th>数学</th>
               </tr>
               <tr>
                 <td>小明</td>
                 <td>90</td>
                 <td>80</td>
               </tr>
               <tr>
                 <td>小丽</td>
                 <td>98</td>
                 <td>90</td>
               </tr>
               <tr>
                 <td>平均</td>
                 <td>94</td>
                 <td>85</td>
               </tr>
            </table>
    B. 默认情况下，表格没有边框，需要使用CSS添加。
2. 表格语义话
    A. 可通过使用thead、tbody和tfoot标签增加表格的语义话
        e.g. <table>
               <caption>成绩表</caption>
               <thead>
                 <tr>
                   <th>姓名</th>
                   <th>语文</th>
                   <th>数学</th>
                 </tr>
               <thead/>
               <tbody>
                 <tr>
                   <td>小明</td>
                   <td>90</td>
                   <td>80</td>
                 </tr>
                 <tr>
                   <td>小丽</td>
                   <td>98</td>
                   <td>90</td>
                 </tr>
               <tbody>
               <tfoot>     
                 <tr>
                   <td>平均</td>
                   <td>94</td>
                   <td>85</td>
                 </tr>
               <tfoot>
            </table>
        注：可以看出，有没有thead、tbody和tfoot标签对显示效果没有影响，只是增强了html代码的语义话。
3. 合并行
    使用th或td标签的rowspan属性，rowspan=x表示合并当前单元格下侧的x个单元格（包括当前单元格），也就是当前单元格横跨的行数。
4. 合并列
    使用th或td标签的colspan属性，colspan=x表示合并当前单元格右侧的x个单元格（包括当前单元格），也就是当前单元格横跨的列数。

来源：CSDN

作者：码农学院

链接：https://blog.csdn.net/weixin_40633131/article/details/104267603