HTML中 table
阿新 • • 發佈：2019-01-05
| 1.Html中的表格的結構 |
| 1.表格(table)>行（tr） >單元格（td） <table> <tr> <td></td> </tr> </table> |
| 2.基本結構的特點 a.三個標籤都是表格的基本構成結構，缺一不可且巢狀關係不可以改變; b.多個td形成tr,多個tr形成table; |
| 3.表格結構的拓展
|
| 4.表格的樣式 表格類的元素是比較特殊的一類元素,他們有自己獨特的display屬性; 有塊狀元素和行間元素的特點; |
| 5.樣式技巧 a.所有的表格標籤的元素都可以看做是box，使用盒子模型來設定； b.基於表格元素之間的固定的巢狀關係，使用盒子模型需要注意一下幾點 1.<table> 外圍標籤 設定外圍相關樣式:表格的整體寬高，外邊距和外邊框等,不能設定內邊距; 2.<tr> 夾層標籤 設定背景或前景，受外圍和內部的限制，盒模型設定無效，不能設定外邊距; 3.<td> 內部標籤 設定內部相關樣式，單元格的寬，內邊框和內邊距等; |
| 6.表格邊框的設定 1.預設情況下，表格的<table>和單元格 <td>都有邊框的設定; 2.通過border-collapse屬性可以將兩者的邊框進行合併; border-collapse separate/'sepəreɪt/ 預設值 ;<table>和<td>邊框獨立開來; collapse/kə'læps/: <table>和<td>邊框合併為但以邊框; |
| 3.單元格td的特性 1.可以把<td>看作box進行設定，其display模式為table-cell 2.對寬高的設定敏感且會自動分配，以適配於<table>的總高度; 3.完美呈現vertical-align屬性效果，實現td中內容元素的垂直居中;/['vɜrtɪk(ə)l/ vertical-align: top 頂部對齊 middle 垂直居中對齊 bottom 底部對齊 vertical-align這個屬性是一個比較麻煩的屬性； 塊狀元素：很多情況下，對vertical-align的屬性支援不是很友好; 行間元素: 對vertical-align的屬性支援得比較友好; |