人生苦短，要學就只學有用的
【前端教學-Html-3】
經久不衰的table......
HTML 目標
注意：在十多年前的時候，那時候使用表格來完成網頁布局是非常參常見的技術，沒有現在的css+div布局這一回事。表格你需要掌握，但是不必須精通，對於以后的css+div 你必須精通！
- 能出說表格用來做什么的
- 能說出列表用來做什么的
- 能說出表單用來做什么的
為了讓我們頁面顯示的更加整齊，我們需要學習三個表（表格、表單、列表）
表格 table(會使用)
目標：
- 理解：
- 能說出表格用來做什么的
- 表格的基本結構組成
- 應用：
- 能夠熟練寫出n行n列的表格
- 能簡單的合並單元格
表格作用：
存在即是合理的。 表格的現在還是較為常用的一種標簽，但不是用來布局，常見顯示、展示表格式數據。
因為它可以讓數據顯示的非常的規整，可讀性非常好。
特別是后台展示數據的時候表格運用是否熟練就顯得很重要，一個清爽簡約的表格能夠把繁雜的數據表現得很有條理，雖然 div 布局也可以做到，但是總沒有表格來得方便。
1. 創建表格
創建表格的基本語法：
<table>
<tr>
<td>單元格內的文字</td>
...
</tr>
...
</table>
要深刻體會表格、行、單元格他們的構成。
在上面的語法中包含基本的三對HTML標簽，分別為 table、tr、td，他們是創建表格的基本標簽，缺一不可，下面對他們進行具體地解釋
-
table用於定義一個表格標簽。
-
tr標簽 用於定義表格中的行，必須嵌套在 table標簽中。
-
td 用於定義表格中的單元格，必須嵌套在標簽中。
-
字母 td 指表格數據（table data），即數據單元格的內容，現在我們明白，表格最合適的地方就是用來存儲數據的。
**總結： **
- 表格的主要目的是用來顯示特殊數據的
- 一個完整的表格有表格標簽（table），行標簽（tr），單元格標簽（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>
**注意： **
- caption 元素定義表格標題，通常這個標題會被居中且顯示於表格之上。
- caption 標簽必須緊隨 table 標簽之后。
- 這個標簽只存在 表格里面才有意義。你是風兒我是沙
案例3：
根據要求完成以下案例：
5. 合並單元格(難點)
合並單元格是我們比較常用的一個操作，但是不會合並的很復雜。
5.1 合並單元格2種方式
- 跨行合並：rowspan="合並單元格的個數"
- 跨列合並：colspan="合並單元格的個數"
5.2 合並單元格順序
**合並的順序我們按照 先上 后下 先左 后右 的順序 **
跟我們以前學習漢字的書寫順序完全一致。
5.3 合並單元格三步曲
- 先確定是跨行還是跨列合並
- 根據 先上 后下 先左 后右的原則找到目標單元格 然后寫上 合並方式 還有 要合並的單元格數量 比如 ：
- 刪除多余的單元格 單元格
6. 總結表格
注意以下表格中的table、tr、td、th、都是雙標簽，由於，markdown在cnblog一些現實的問題，這里顯示不出來，如果直接洗會引起 頁面的錯誤解析，
頁面直接就給你渲染成html標簽了。所有這里特此說明
| 標簽名 | 定義 | 說明 |
|---|---|---|
| table | 表格標簽 | 就是一個四方的盒子 |
| tr | 表格行標簽 | 行標簽要再table標簽內部才有意義 |
| td | 單元格標簽 | 單元格標簽是個容器級元素，可以放任何東西 |
| th | 表頭單元格標簽 | 它還是一個單元格，但是里面的文字會居中且加粗 |
| caption | 表格標題標簽 | 表格的標題，跟着表格一起走，和表格居中對齊 |
| clospan 和 rowspan | 合並屬性 | 用來合並單元格的 |
- 表格提供了HTML 中定義表格式數據的方法。
- 表格中由行中的單元格組成。
- 表格中沒有列元素，列的個數取決於行的單元格個數。
- 表格不要糾結於外觀，那是CSS 的作用。
- 表格的學習要求： 能手寫表格結構，並且能簡單合並單元格。
7. 拓展閱讀@
表格划分結構（了解）
對於比較復雜的表格，表格的結構也就相對的復雜了，所以又將表格分割成三個部分：題頭、正文和腳注。而這三部分分別用:thead,tbody,tfoot來標注， 這樣更好的分清表格結構
注意：
- ：用於定義表格的頭部。用來放標題之類的東西。 內部必須擁有 標簽！
- ：用於定義表格的主體。放數據本體 。
- 放表格的腳注之類。
- 以上標簽都是放到table標簽中。