1. 程式人生 > 其它 >資料在html表格中心_一篇文章帶你瞭解HTML表格及其主要屬性介紹

資料在html表格中心_一篇文章帶你瞭解HTML表格及其主要屬性介紹

技術標籤:資料在html表格中心

一、定義一個HTML表格

使用標籤定義HTML表格。

標籤定義表中的每一行使用。使用標籤定義表頭。預設情況下,表標題是粗體和居中的。一個表的資料/單元使用 標籤定義。

Firstname Lastname Age Jill Smith 50 Eve Jackson 94 89c8fcc498d0a536789403cc530cd702.png

注意: 元素是表的資料容器。它們可以包含所有的HTML元素; 文字、影象、列表、其他表格等。


1. HTML表格 - 新增邊框

如果不指定表的邊框,則將不顯示邊框。

使用CSS設定表格的邊框如下:

d6e1ac8c389a6c74ffe72c622d5a7834.png

記住為表和表單元格定義邊框。


2. HTML 表格 - 摺疊邊框

如果你想要的邊框摺疊成一個邊框,新增CSS border-collaps邊框屬性:

b620453badc826c13af42c7d88763a2e.png

3. HTML 表格 - 新增單元格填充(padding)

單元格填充(padding)指定單元格內容及其邊框之間的空間。

如果不指定填充(padding),則將顯示錶單元格而不填充(padding)。

設定填充,使用css padding屬性:

97a216fe49dec86b7e2fb7c2336e043d.png

4. HTML表格 - 左對齊標題

預設情況下,表標題是粗體和居中的。

左對齊的表格標題,使用CSS text-align屬性:

th {   text-align: left;}
4a384aa09fe9fbc741cfb2e567e28461.png

5. HTML表格 - 新增邊框間距

邊框間距指定單元格之間的空間。

設定一個表空間的邊界,使用CSS border-spacing屬性:

table {   border-spacing: 15px; /*新增邊框間距*/}

注意:如果表已經是collapsed摺疊邊框,邊框間距沒有影響。


6. HTML表格 單元格跨多列

使表格單元格跨越多個列,使用colspan屬性:

姓名 電話 Bill Gates 55577854 55577855 ec62ef6750b02b8482c2bb4b18adaa8f.png

7. HTML表中 - 單元格跨多行

使表格單元格跨多個行,使用rowspan屬性:

姓名: 比爾 電話: 55577854 55577855 16c1dd21297c8deccea44d13a9ec15a5.png

8. HTML表格 - 新增標題

若要向表新增標題,請使用`標籤:

每月儲蓄 月 儲蓄 January $100 February $50 e9ac2d73bbb5fd8a565958326a953c21.png

注意:` 標籤必須立即插入在``標籤之後。


二、專案

為表格指定一個特殊樣式

為表格指定一個特殊樣式, 新增一個 id 屬性:

Firstname Lastname Age Eve Jackson 94

現在您可以為這個表定義一個特殊的樣式:

table#t01 {   width: 100%;   background-color: #f1f1c1;   border: 2px solid black; }
699cae08d37885add38fb226fae493f9.png

新增更多樣式:

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;}
b8c534c7bc132b84e8692c2d1f5c5c46.png

小總結

標籤描述

定義一個表格標題
定義表中的單元格

屬性描述border屬性定義一個邊框border-collapse定義摺疊單元格邊框的屬性padding新增到單元格中的填充text-align對齊單元格文字border-spacing設定單元格之間的間距colspan使單元格跨越多個列rowspan使單元格跨越多行id唯一表示一個表格

三、總結

本文主要介紹了HTML表格,對錶格中主要的屬性進行了詳細的介紹。對遇到的問題進行詳細的解答。方便大家表格的標籤的瞭解。希望對大家的學習有幫助。

想學習更多Python網路爬蟲與資料探勘知識,可前往專業網站:http://pdcfighting.com/