HTML标签的基本使用：表格_html里面的tabs-bagel-CSDN博客

本文链接：https://blog.csdn.net/weixin_53469581/article/details/123074838

本文详细介绍了HTML中表格的使用，包括基本的table、tr、td和th标签，表格的表头、内容和主题分区，以及单元格的跨行、跨列合并。通过实例展示了如何创建和格式化表格，以及如何通过caption、thead和tbody标签进行表格的结构化分区。

摘要由CSDN通过智能技术生成

HTML标签的基本使用：表格

由三个标签组成

table：定义一个表格结构

tr：table rows 定义表格的行

td：table dock 定义表格的单元格

一、基本使用

    <table border="1" style="border-collapse: collapse">
        <tr>
            <td>第1行，第1列</td>
            <td>第1行，第2列</td>
            <td>第1行，第3列</td>
        </tr>

        <tr>
            <td>第2行，第1列</td>
            <td>第2行，第2列</td>
            <td>第2行，第3列</td>
        </tr>

    </table>

th:表头

    <table border="1" style="border-collapse: collapse">
        <tr>
            <th>一</th>
            <th>二</th>
            <th>三</th>
        </tr>
        <tr>
            <td>第1行，第1列</td>
            <td>第1行，第2列</td>
            <td>第1行，第3列</td>
        </tr>

        <tr>
            <td>第2行，第1列</td>
            <td>第2行，第2列</td>
            <td>第2行，第3列</td>
        </tr>

    </table>

二、单元格合并

如果需要单元格跨行、跨列合并，可以给对应的td、th标签设置相关属性。

rowspan：上下跨行合并

colspan：左右跨列合并

属性值是数字，代表跨几行/列

    <table border="1" style="border-collapse: collapse">
      
        <tr>
            <td colspan="2">1</td>
            <td rowspan="2">2</td>
            <td colspan="3">3</td>
            <td>4</td>
        </tr>

        <tr>
            <td rowspan="2">5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td rowspan="2">9</td>
            <td>10</td>

        </tr>
        <tr>
            <td rowspan="2">11</td>
            <td>12</td>
            <td colspan="2">13</td>
            <td rowspan="2">14</td>
        </tr>
        <tr>
            <td>15</td>
            <td>16</td>
            <td>17</td>
            <td colspan="2">18</td>
        </tr>

       

    </table>

三、表格分区

一个完整的表格分3部分：标题、表格、主题

table内部3个分区标签

caption：表格的主题

thead：表格的头部 tr->th

tbody:表格的内容 tr->td

    <table border="1" style="border-collapse: collapse">
       <caption>各地区固定资产投资情况</caption>
       <thead>
           <tr>
               <th rowspan="2">地区</th>
               <th colspan="2">按总量分</th>
               <th colspan="2">按比重分</th>
               
           </tr>
           <tr>
               <th>自年初累计</th>
               <th>去年同期增长</th>
               <th>自年初累计</th>
               <th>去年同期增长</th>
           </tr>
       </thead>
       <tbody>
           <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>
           <tr>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
           </tr>
           <tr>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
           </tr>
       </tbody>
        

    </table>