HTML常见标签（二）

1.表格标签

        1.cellspacing  设置单元格与单元格之间的距离

        2.cellpadding  设置内容与边框之间的间距

<table cellspacing="0" cellpadding="0">
      <!-- 表格头部 -->
      <thead>
             <!-- 行 -->
              <tr>
                   <!-- 列 (加粗字体) -->
                    <th>名称</th>
                    <th>价格</th>
                    <th>库存</th>
                    <th>日期</th>
                    <th>地址</th>
              </tr>
      </thead>

      <!-- 表格主体 -->
       <tbody>
            <tr>
                <!-- 列 (没有加粗) -->
                <td>短袖</td>
                <td>29.9 </td>
                <td>50</td>
                <td>2024/07-11</td>
                <td>广州</td>
            </tr>

            <tr>
                <td>鞋子</td>
                <td>19.9  </td>
                <td>60</td>
                <td>2024/07-11</td>
                <td>深圳</td>
            </tr>
       </tbody>
</table>

        3.<caption></caption>标签：描述表格信息

        4.rowspan="2"   表示跨行 数字2 跨2行的意思

        5. colspan="4"   表示跨列 数字4 跨4列的意思

        6.<tfoot></tfoot>标签：表格尾部

   <table cellspacing="0">
        <caption>
            <h3>描述表格信息</h3>
        </caption>
        <!-- 表头 -->
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>班级</th>
                <th>成绩</th>
                <th>备注</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td></td>
                <td></td>
                <td></td>
                <td rowspan="4"> （跨行） </td>
            </tr>
            <tr>
                <td>2</td>
                <td></td>
                <td></td>
                <td></td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <td>3</td>
                <td></td>
                <td></td>
                <td></td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <td>4</td>
                <td></td>
                <td></td>
                <td></td>
                <!-- <td></td> -->
            </tr>
        </tbody>
        <tfoot>
             <tr>
                 <td colspan="4">
                    这是表格尾部（跨列）
                 </td>
                 <!-- 
                    <td></td>
                    <td></td>
                    <td></td> 
                -->
             </tr>
        </tfoot>
    </table>

         7.必须/可选标签   

                table 必须

                thead 可选

                tbody 可选

                caption 可选

                tfoot 可选

                tr 必须

                th 可选

                td 必须

        8.注意：

                （1） 合并边框线 ：border-collapse: collapse;

    table {
      border: 2px solid red;
      width: 600px;
      /* 合并边框线 */
      border-collapse: collapse;
    }

                （2）将描述边框的下边框合并到表格的上边框：

    caption {
      border: 2px solid red;
      /* 将描述边框的下边框合并到表格的上边框 */
      border-bottom: 0;
      height: 50px;
      color: black;
      text-align: center;
      line-height: 50px;
      font-weight: 700;
    }