Web前端-Html部分筆記（四）
以下是我對Web前端-Html部分的筆記，因為博主也是初學Web前端，有很多東西都還停留在表層的理解，如果我的部落格有任何錯誤，請及時評論或者私信我，我會及時更改。也歡迎同樣初學Web-前端的你願意關注我的部落格，我會把我每週的學習內容進行整理和上傳，方便大家溝通和交流學習經驗。
表格標籤
1、作用
以表格形式將資料顯示出來，當資料量非常大的時候，表格這種展現形式被認為是最為清晰的一種展現形式。
2 、格式
-
table定義表格
-
tr定義行
-
td定義單元格
<table width=* height=* bgcolor=* border=* bordercolor=* cellspacing=* cellpadding=*> <body> <tr> <td> 此處加入內容 </td> </tr> </body> </table>
3、常用屬性
-
border： 預設情況下表格的邊框寬度為0看不到, 通過border屬性給表格指定邊框寬度
-
width：預設情況下表格的寬度是由內容自動計算出來的, 可以通過width屬性指定表格的寬度
-
cellspacing：外邊距. 預設情況下單元格之間有2個畫素的間隙, 可以通過cellpadding指定表格之間的間隙
-
cellpadding：內邊距. 預設情況下單元格邊緣距離內容有1個畫素的內邊距, 可以通過cellpadding屬性指定單元格邊緣和內容之間的內邊距
-
align：
-
作用: 規定表格相對周圍元素的對齊方式, 它的取值有center、left、right
-
例如：
-
給table設定align屬性, 是讓表格在瀏覽器中居左/居右/居中
-
給tr設定align屬性, 是讓當前行中所有內容居左/居右/居中
-
給td設定align屬性,是讓當前單元格中所有內容居左/居右/居中
-
該屬性僅僅作為了解, 企業開發中用css代替, 因為HTML僅僅用於說明語義
-
如果td中設定了align屬性, tr中也設定了align屬性, 那麼單元格中的內容會按照td中設定的來對齊
-
-
-
bgcolor：
-
作用：規定表格的背景顏色
-
例如：
-
給table設定bgcolor屬性, 是給整個表格設定背景顏色
-
給tr設定bgcolor屬性, 是給當前行設定背景顏色
-
給td設定bgcolor屬性, 是給當前單元格設定背景顏色
-
該屬性僅僅作為了解, 企業開發中用css代替, 因為HTML僅僅用於說明語義
-
-
-
valign：
-
作用：規定表格相對周圍元素的對齊方式, 它的取值有center、left、right
-
例如：
-
給table設定valign屬性, 無效
-
給tr設定valign屬性, 是讓當前行中所有內容居上/居中/居下
-
給td設定valign屬性,是讓當前單元格中所有內容居上/居中/居下
-
如果td中設定了valign屬性, tr中也設定了valign屬性, 那麼單元格中的內容會按照td中設定的來對齊（就近原則）
-
-
-
其他：
-
表單中有兩種型別的單元格，一種是標準單元格td，一種是表頭單元格th
-
th標籤：給每一列設定標題，單元格中的內容會自動加粗、居中
-
caption標籤：給整個表格設定標題一定要巢狀在talbe標籤內部才有效
-
例如：
<table bgcolor="black" cellspacing="1px" width="800px" align="center"> <caption> <h2>遊戲排行榜</h2> </caption> <tr bgcolor="#a9a9a9"> <th>排名</th> <th>遊戲</th> <th>票數</th> <th>圖片</th> <th>相關連結</th> </tr> <tr bgcolor="white" align="center"> <td>1</td> <td>LOL</td> <td>26561</td> <td> <img src="img/lol.jpg" width="100"> </td> <td> <a href="#">資料</a> <a href="#">評測</a> <a href="#">禮包</a> </td> </tr> <tr bgcolor="white" align="center"> <td>2</td> <td>DOTA2</td> <td>20000</td> <td> <img src="img/dota2.jpg" width="100"> </td> <td> <a href="#">資料</a> <a href="#">評測</a> <a href="#">禮包</a> </td> </tr> <tr bgcolor="white" align="center"> <td>3</td> <td>WOW</td> <td>18065</td> <td> <img src="img/wow.jpg" width="100"> </td> <td> <a href="#">資料</a> <a href="#">評測</a> <a href="#">禮包</a> </td> </tr> </table>
-
4 、表格的複雜應用
4.1、表格的結構
開發中經常需要動態的修改單元格中的某一部分內容,如果設定了,我們就可以配合AJAX去動態的更新表格的內容
-
thead標籤:用來存放當前列的表頭，如果沒有加css頁面預設將表頭中的高度設定變小
-
tbody標籤:一般用來存放頁面中的主體資料，如果不寫會自動加上
-
tfoot標籤:用來存放表格的頁尾（腳註或表注)，如果沒有加css頁面預設將表頭中的高度設定變小，一般不會出現
-
示例程式碼
<table> <caption>表格的標題</caption> <thead> <tr> <th>每一列的標題</th> </tr> </thead> <tbody> <tr> <td>資料</td> </tr> </tbody> <tfoot> <tr> <td>資料</td> </tr> </tfoot> </table>
注意：
表格結構的意義主要是用於SEO(Search Engine Optimization), 便於搜尋引擎優化指定哪部分的內容是需要抓取的重要內容，一般情況下搜尋引擎會優先抓取tbody中的內容。
由於有一部分瀏覽器對table的這種結構支援不是很好，所以在企業開發中一般都不用嚴格的按照這種結構來編寫
4.2、合併單元格
-
橫向合併
-
colspan：合併當前行的哪幾個單元格，注意colspan只會向後合併，不會向前合併。
-
例如：
-
說明：把當前單元格當做兩個單元格來看待
-
-
縱向合併
-
rowspan:合併當前列的哪幾個單元格，注意rowspan只會向後合併，不會向前合併。
-
例如：
-
說明：把當前單元格當做兩個單元格來看待
-
5、本章小案例
-
天氣預報
<table width="1000" style="text-align: center; " bgcolor="#e9967a" border="1" cellpadding="10" cellspacing="0"> <tr> <th colspan="3">日期</th> <th colspan="2">天氣現象</th> <th>氣溫</th> <th>風向</th> <th>風力</th> </tr> <tr> <td rowspan="2" colspan="2">22日 星期五</td> <td>白天</td> <td><img src="img/weathy_01.png"></td> <td>晴間多雲</td> <td>高溫 7C</td> <td>無持續風向</td> <td>微風</td> </tr> <tr> <td>夜間</td> <td><img src="img/weathy_01.png"></td> <td>晴間多雲</td> <td>低溫 -4C</td> <td>無持續風向</td> <td>微風</td> </tr> <tr> <td rowspan="2" colspan="2" style="margin-top: 10px"> 23日 星期六</td> <td>白天</td> <td><img src="img/weathy_01.png"></td> <td>晴間多雲</td> <td>高溫 7C</td> <td>無持續風向</td> <td>微風</td> </tr> <tr> <td>夜間</td> <td><img src="img/weathy_01.png"></td> <td>晴間多雲</td> <td>低溫 -4C</td> <td>無持續風向</td> <td>微風</td> </tr> </table>
-
留堂小作業
