HTML 表格标签

1.表格的主要作用

    表格主要用于显示、展示数据，因为它可以让数据显示的非常完整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现的很有条理表格不是用来布局页面的，而是用来展示数据的。

2.表格标签的主要语法

    

        ●<table></table>是用于定义表格的标签
        ●<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
        ●<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
        ●字母td指表格数据（table data），即数据单元格的内容

    2.1表头单元格

        一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。

        <th>标签标示HTML表格的表头部分（table head）的缩写

        2.1.1表头单元格的语法格式

              

              表头单元格也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文本内容加粗居中显示

3.表格属性

                     表格标签这部分属性我们实际开发我们不常用，后面通过CSS来设置。

        

4.表格结构标签

    表格标签的使用场景 :因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格表头和表格主体两大部分。

    在表格标签中，分别用:<thead>标签 表格的头部区域、<tbody>标签 表格的主体区域，这样可以更好的分清表格结构。

      ①<thead></thead>:用于定义表格的头部。<thead>内部必须拥有<tr>标签。一般是位于第一行。
      ②<tbody></tbody>:用于定义表格的主体，主要用于放数据本体
      ③以上标签都是放在<table></table>标签中

5.合并单元格

    特殊情况下，可以把多个单元格合并为一个单元格

    5.1 合并单元格的方式

         >跨行合并：rowspan = "合并单元格的个数"
         >跨列合并：colspan = "合并单元格的个数"

    5.2 目标单元格

        >跨行：最上侧单元格为目标单元格，写合并代码
        >跨列：最左侧单元格为目标单元格，写合并代码

    5.3 合并单元格的步骤

        ①先确定是跨行还是跨列合并
        ②找到目标单元格.写上合并方式 = 合并单元格的数量。比如：<td colspan = "2"></td>
        ③删除多余的单元格

注：
    1.<thead></thead>：用于定义表格的头部。用来放标签之类的东西。<thead>内部必须拥有<tr>标签
    2.<tbody></tbody>: 用于表格的主体。放数据本体
    3.<tfoot></tfoot>:    放表格的注脚之类
    4.以上标签都是放到table标签中

 

酒枯推荐

  推荐使用浏览器：Google Chrome

  推荐使用Java环境：eclipse、IDEA

  本周推荐学习：HTML和CSS

  推荐学习视频链接： https://www.bilibili.com/video/BV1CK411G7m4?from=search&seid=9778818247834758128

  推荐使用HTML环境：VScode（Visual Studio Code）

  推荐练习地点:https://leetcode-cn.com/