表格是html中經常使用到的，簡單的使用可能很多人都沒問題，但是更深入的了解的人恐怕不多，下面我們先來看一下如何使用。
<table>是<tr>的上層標簽
<tr>必須在一個<table></table>里面,它不能單獨使用,相當於<table>的屬性標簽.
<table>標示一個表格,<tr>標示這個表格中間的一個行
<td>標示行中的一個列,需要嵌套在<tr></tr>中間
具體格式是:(兩行兩列)
<table>
<tr>
<td></td>
<td></td>
</tr>
</teble>
<th>和<td>一樣,也是需要嵌套在<tr>當中的,<tr>嵌套在<table>當中
<table>...</table> 用於定義一個表格開始和結束
<th>...</th> 定義表頭單元格。表格中的文字將以粗體顯示（<TH>與<TD>同樣是標示一個儲存格,唯一不同的是<TH>所標示的儲存格中的文字是以粗體出現,即可以這樣看：
<th>文字</th>=<td><b>文字</b></td>
），
在表格中也可以不用此標簽，<th>標簽必須放在<tr>標簽內
<tr>...</tr> 定義一行標簽，一組行標簽內可以建立多組由<td>或<th>標簽所定義的單元格
<td>...</td> 定義單元格標簽，一組<td>標簽將將建立一個單元格，<td>標簽必須放在<tr>標簽內
。<th>為表格標題，屬性summar為摘要，<caption>標簽為首部說明，<thead>標簽為表格頭部，<tbody>標簽為表格主體內容，<tfoot>標簽為表格尾部。
其中還可以使用scope 可用於取代headers屬性，標記含有表頭信息的單元格，其中各數值的內容如下：
row 指示當前單元格，為包含當前單元格的行提供相關的表頭信息。
col 指示當前單元格，為根據當前單元格指定的列提供相應的表頭信息。
rowgroup 指示當前單元格，為包含當前單元格的其余行組提供相關的表頭信息。
colgroup 指示當前單元格，為根據當前單元格指定的其余列組提供相應的表頭信息。
abbr 用於定義表頭單元格中的縮寫名，如果沒有定義該屬性，則將默認單元格內容為節略形式。
標准表格模型
<table>
<caption></caption>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
相關：
<th>不光是粗體，還是居中的
<caption>也是居中的，而且如果table有border的話則caption不在border之內
TFOOT 元素內包含的有效標簽有：
TD
TH
TR
任何給定的 table 對象都只能定義一個 tFoot
實際遇到的問題
1.
需要：表頭固定，tbody 部份滾動 。
操作：給 tbody 設置 display: block; overflow-y: aotu; height:5rem;
問題：table 表格的格式亂了，tbody 無法和 thead 對齊。
解決：給 thead 和 tbody 下的 <tr></tr> 設置同樣的樣式：display: flex;
2.
行合並：colspan = 3 ，包括自己 和 后面兩個 一共三個合並
列合並：rowspan = 4
<td colSpan={3} rowSpan={4}></td>