資料在html表格中心_一篇文章帶你瞭解HTML表格及其主要屬性介紹
技術標籤:資料在html表格中心
一、定義一個HTML表格
使用標籤定義HTML表格。
標籤定義表中的每一行使用。使用標籤定義表頭。預設情況下,表標題是粗體和居中的。一個表的資料/單元使用 標籤定義。
Firstname Lastname Age Jill Smith 50 Eve Jackson 94
注意: 元素是表的資料容器。它們可以包含所有的HTML元素; 文字、影象、列表、其他表格等。
1. HTML表格 - 新增邊框
如果不指定表的邊框,則將不顯示邊框。
使用CSS設定表格的邊框如下:
記住為表和表單元格定義邊框。
2. HTML 表格 - 摺疊邊框
如果你想要的邊框摺疊成一個邊框,新增CSS border-collaps邊框屬性:
3. HTML 表格 - 新增單元格填充(padding)
單元格填充(padding)指定單元格內容及其邊框之間的空間。
如果不指定填充(padding),則將顯示錶單元格而不填充(padding)。
設定填充,使用css padding屬性:
4. HTML表格 - 左對齊標題
預設情況下,表標題是粗體和居中的。
左對齊的表格標題,使用CSS text-align屬性:
th { text-align: left;}
5. HTML表格 - 新增邊框間距
邊框間距指定單元格之間的空間。
設定一個表空間的邊界,使用CSS border-spacing屬性:
table { border-spacing: 15px; /*新增邊框間距*/}
注意:如果表已經是collapsed摺疊邊框,邊框間距沒有影響。
6. HTML表格 單元格跨多列
使表格單元格跨越多個列,使用colspan屬性:
姓名 電話 Bill Gates 55577854 55577855
7. HTML表中 - 單元格跨多行
使表格單元格跨多個行,使用rowspan屬性:
姓名: 比爾 電話: 55577854 55577855
8. HTML表格 - 新增標題
若要向表新增標題,請使用`標籤:
每月儲蓄 月 儲蓄 January $100 February $50
注意:` 標籤必須立即插入在``標籤之後。
二、專案
為表格指定一個特殊樣式
為表格指定一個特殊樣式, 新增一個 id 屬性:
Firstname Lastname Age Eve Jackson 94
現在您可以為這個表定義一個特殊的樣式:
table#t01 { width: 100%; background-color: #f1f1c1; border: 2px solid black; }
新增更多樣式:
table#t01 tr:nth-child(even) { background-color: #eee;}table#t01 tr:nth-child(odd) { background-color: #fff;}table#t01 th { color: white; background-color: black;}
小總結
標籤描述
定義表中的單元格 |
屬性描述border屬性定義一個邊框border-collapse定義摺疊單元格邊框的屬性padding新增到單元格中的填充text-align對齊單元格文字border-spacing設定單元格之間的間距colspan使單元格跨越多個列rowspan使單元格跨越多行id唯一表示一個表格
三、總結
本文主要介紹了HTML表格,對錶格中主要的屬性進行了詳細的介紹。對遇到的問題進行詳細的解答。方便大家表格的標籤的瞭解。希望對大家的學習有幫助。
想學習更多Python網路爬蟲與資料探勘知識,可前往專業網站:http://pdcfighting.com/