表格 table(會使用)

為了讓我們頁面顯示的更加整齊，我們需要學習三個表（表格、表單、列表）

• 理解：

能說出表格用來做什麼的
表格的基本結構組成

表格作用：

存在即是合理的。 表格的現在還是較為常用的一種標籤，但不是用來佈局，常見顯示、展示表格式資料。
因為它可以讓資料顯示的非常的規整，可讀性非常好。

特別是後臺展示資料的時候表格運用是否熟練就顯得很重要，一個清爽簡約的表格能夠把繁雜的資料表現得很有條理
，雖然 div 佈局也可以做到，但是總沒有表格來得方便。

ps: 這些地方用表格，你會覺得很貼切。

1. 建立表格

在HTML網頁中，要想建立表格，就需要使用表格相關的標籤。

建立表格的基本語法：

<table>
  <tr>
    <td>單元格內的文字</td>
    ...
  </tr>
  ...
</table>

要深刻體會表格、行、單元格他們的構成。

在上面的語法中包含基本的三對HTML標籤，分別為 table、tr、td，他們是建立表格的基本標籤，缺一不可，下面對他們進行具體地解釋

1.table用於定義一個表格標籤。
2.tr標籤 用於定義表格中的行，必須巢狀在table標籤中。
3.td 用於定義表格中的單元格，必須巢狀在<tr></tr>標籤中。
4.字母td

總結：

• 表格的主要目的是用來顯示特殊資料的
• 一個完整的表格有表格標籤（table），行標籤（tr），單元格標籤（td）組成，沒有列的標籤
• <tr></tr>中只能巢狀<td></td> 類的單元格
• <td></td>標籤，他就像一個容器，可以容納所有的元素

2. 表格屬性

表格有部分屬性我們不常用，這裡重點記住 cellspacing 、 cellpadding。

我們經常有個說法，是三參為0， 平時開發的我們這三個引數 border cellpadding cellspacing 為 0

案例1：

<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
   <tr>  <th>姓名</th>   <th>性別</th> <th>年齡</th>  </tr>
   <tr>  <td>劉德華</td> <td>男</td> <td>55</td>  </tr>
   <tr>  <td>郭富城</td> <td>男</td> <td>52</td>  </tr>
   <tr>  <td>張學友</td> <td>男</td> <td>58</td>  </tr>
   <tr>  <td>黎明</td>   <td>男</td> <td>18</td>  </tr>
   <tr>  <td>劉曉慶</td> <td>女</td> <td>63</td>  </tr>
</table>

3. 表頭單元格標籤th

• 作用：

一般表頭單元格位於表格的第一行或第一列，並且文字加粗居中

• 語法：

只需用表頭標籤<th></th>替代相應的單元格標籤<td></td>即可。

案例2：

效果圖

程式碼：

<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
		<tr>  
			<th>姓名</th> 
			<th>性別</th>
			<th>電話</th>
		</tr>
		<tr>
			<td>小王</td>
			<td>女</td>
			<td>110</td>
		</tr>
		<tr>
			<td>小明</td>
			<td>男</td>
			<td>120</td>
		</tr>	
</table>

th 也是一個單元格 只不過和普通的 td單元格不一樣，它會讓自己裡面的文字居中且加粗

4. 表格標題caption

定義和用法

<table>
   <caption>我是表格標題</caption>
</table>

**注意： **

1.caption 元素定義表格標題，通常這個標題會被居中且顯示於表格之上。
2.caption 標籤必須緊隨 table 標籤之後。
3.這個標籤只存在表格裡面才有意義。

5. 合併單元格(難點)

合併單元格是我們比較常用的一個操作，但是不會合並的很複雜。

5.1 合併單元格2種方式

• 跨行合併：rowspan="合併單元格的個數"
• 跨列合併：colspan="合併單元格的個數"

5.2 合併單元格順序

合併的順序我們按照 先上 後下 先左 後右 的順序

5.3 合併單元格三步曲

1.先確定是跨行還是跨列合併
2.根據 先上 後下 先左 後右的原則找到目標單元格 然後寫上 合併方式 還有 要合併的單元格數量
比如 ： <td colspan="3"> </td>
3.刪除多餘的單元格 單元格

6. 總結表格

1.表格提供了HTML 中定義表格式資料的方法。
2.表格中由行中的單元格組成。
3.表格中沒有列元素，列的個數取決於行的單元格個數。
4.表格不要糾結於外觀，那是CSS 的作用。
5.表格的學習要求： 能手寫表格結構，並且能簡單合併單元格。

7. 拓展閱讀@

表格劃分結構（瞭解）

對於比較複雜的表格，表格的結構也就相對的複雜了，所以又將表格分割成三個部分：題頭、正文和腳註。而這三部分分別
用:thead,tbody,tfoot來標註， 這樣更好的分清表格結構

注意：

1.<thead></thead>：用於定義表格的頭部。用來放標題之類的東西。<thead> 內部必須擁有 <tr> 標籤！
2.<tbody></tbody>：用於定義表格的主體。放資料本體 。
3.<tfoot></tfoot>: 放表格的腳註之類。
4.以上標籤都是放到table標籤中。