Python爬蟲、數據分析、網站開發等案例教程視頻免費在線觀看
https://space.bilibili.com/523606542
Python學習交流群：1039649593
表格
能夠利用表格、列表和表單完成注冊頁面的綜合案例
- 能出說表格用來做什么的
- 能說出列表用來做什么的
- 能說出表單用來做什么的
為了讓我們頁面顯示的更加整齊，我們需要學習三個表（表格、表單、列表）
表格 table(會使用)
目標：
理解：
- 能說出表格用來做什么的
- 表格的基本結構組成
應用：
- 能夠熟練寫出n行n列的表格
- 能簡單的合並單元格
表格作用：
存在即是合理的。 表格的現在還是較為常用的一種標簽，但不是用來布局，常見顯示、展示表格式數據。
因為它可以讓數據顯示的非常的規整，可讀性非常好。
特別是后台展示數據的時候表格運用是否熟練就顯得很重要，一個清爽簡約的表格能夠把繁雜的數據表現得很有條理，雖然 div 布局也可以做到，但是總沒有表格來得方便。
ps: 這些地方用表格，你會覺得生活還是那么美好。。。。忍不住想說 PPAP i hava a pen
1. 創建表格
在HTML網頁中，要想創建表格，就需要使用表格相關的標簽。
創建表格的基本語法：
<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標簽內部才有意義單元格標簽單元格標簽是個容器級元素，可以放任何東西表頭單元格標簽它還是一個單元格，但是里面的文字會居中且加粗表格標題標簽表格的標題，跟着表格一起走，和表格居中對齊clospan 和 rowspan合並屬性用來合並單元格的
- 表格提供了HTML 中定義表格式數據的方法。
- 表格中由行中的單元格組成。
- 表格中沒有列元素，列的個數取決於行的單元格個數。
- 表格不要糾結於外觀，那是CSS 的作用。
- 表格的學習要求： 能手寫表格結構，並且能簡單合並單元格。
7. 拓展閱讀@
表格划分結構（了解）
對於比較復雜的表格，表格的結構也就相對的復雜了，所以又將表格分割成三個部分：題頭、正文和腳注。而這三部分分別用:thead,tbody,tfoot來標注， 這樣更好的分清表格結構
注意：
：用於定義表格的頭部。用來放標題之類的東西。 內部必須擁有 標簽！：用於定義表格的主體。放數據本體 。放表格的腳注之類。* 以上標簽都是放到table標簽中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="1" cellspacing="0" align="center" width="500"> <thead> <tr> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr> </thead> <tbody> <tr> <td>劉德華</td> <td>男</td> <td>55</td> </tr> <tr> <td>劉若英</td> <td>女</td> <td>35</td> </tr> <tr> <td>劉曉慶</td> <td>女</td> <td>65</td> </tr> <tr> <td>劉三姐</td> <td>女</td> <td>15</td> </tr> </tbody> <tfoot> <tr> <td>信息地址</td> <td colspan="2"> 北京市金燕龍校區舉辦演唱會</td> </tr> </tfoot> </table> </body> </html>