表格標(biāo)簽

1. table用于定義一個表格標(biāo)簽。

2. tr標(biāo)簽 用于定義表格中的行，必須嵌套在 table標(biāo)簽中。

3. td 用于定義表格中的單元格，必須嵌套在<tr></tr>標(biāo)簽中。

4. 字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容，現(xiàn)在我們明白，表格最合適的地方就是用來存儲數(shù)據(jù)的。

<table>
  <tr>
    <td>單元格內(nèi)的文字</td>
    ···
  </tr>
  ···
</table>

表格屬性

tt.png

<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="10">
  <tr>
    <td>單元格內(nèi)的文字</td>
    ···
  </tr>
  ···
</table>

07table表格屬性.jpg

表頭單元格標(biāo)簽th

一般表頭單元格位于表格的第一行或第一列，并且文本加粗居中
th 也是一個單元格 只不過和普通的 td單元格不一樣，它會讓自己里面的文字居中且加粗

<table border="1" align="center" width="300" height="100" cellpadding="20" cellspacing="0">
        <tr>
            <th>姓名</th>
            <th>年齡</th>
            <th>性別</th>
        </tr>
        <tr>
            <td>張三</td>
            <td>24</td>
            <td>男</td>
        </tr>
        <tr>
            <td>里斯</td>
            <td>24</td>
            <td>男</td>
        </tr>
    </table>

01-表頭.PNG

表格標(biāo)題caption

1. caption 元素定義表格標(biāo)題，通常這個標(biāo)題會被居中且顯示于表格之上。
2. caption 標(biāo)簽必須緊隨 table 標(biāo)簽之后。
3. 這個標(biāo)簽只存在 表格里面才有意義。

<table>
   <caption>表格標(biāo)題</caption>
</table>

合并單元格

• 跨行合并：rowspan="合并單元格的個數(shù)"
• 跨列合并：colspan="合并單元格的個數(shù)"
  合并的順序我們按照先上后下，先左后右的順序
  步驟：

1. 先確定是跨行還是跨列合并
2. 根據(jù) 先上 后下 先左 后右的原則找到目標(biāo)單元格 然后寫上 合并方式 還有 要合并的單元格數(shù)量 比如 ： <td colspan="3"> </td>
3. 刪除多余的單元格 單元格

<td rowspan="2">目標(biāo)單元格</td>

<td >合并后多余的單元格</td>  （直接刪除）

表格總結(jié)

總結(jié)表.PNG

拓展：表格劃分結(jié)構(gòu)

1. <thead></thead>：用于定義表格的頭部。用來放標(biāo)題之類的東西。<thead> 內(nèi)部必須擁有 <tr> 標(biāo)簽！
2. <tbody></tbody>：用于定義表格的主體。放數(shù)據(jù)本體 。
3. <tfoot></tfoot>放表格的腳注之類。

4. 以上標(biāo)簽都是放到table標(biāo)簽中。

   
   
   thead.png