乾貨HTML中表格的使用方法（乾貨HTML中表格的使用方法）

2023-05-11 02:06:18

HTML中的表格是由標籤進行定義的，表格在HTML中的表現形式與使用方法與word中的表格非常類似。多數情況使用Dreamweaver的可視化視圖只做表格更為簡單、方便。本文主要講述如何使用代碼來編寫表格，讓大家掌握表格的代碼書寫格式與其對應的屬性。

表格的標籤組成

HTML中的表格是由為主體標籤，瀏覽器會將該標籤解釋為一個表格。表格中的行使用標籤進行定義。標籤為標籤的子類，設置若干個標籤可以將表格分割為若干個行。標籤用於定義表格的列，標籤為又是標籤的子類，因此每個行都需要設置相應數量的標籤來分割列，形成一個完整的表格。

表格的標籤組合關係為：

我是單元格1

我是單元格2

表格中可以插入文本、圖片、列表、段落、表單、水平線等任何html標籤，甚至可以用來做頁面布局。但是table布局存在代碼冗餘過長、不符合HTML規範、搜尋引擎不友好等問題。因此建議大家儘量不要使用table進行頁面布局，除非頁面中確實需要一張表格。

剩下的、、 和 很少被用到，這是由於瀏覽器對它們的支持不太好。

表格和邊框屬性

表格自身可以定義border屬性來決定表格邊框的寬度，該屬性的值默認是以數字單位進行顯示，例如border=」1″該值的單位為px。注意，不要在border的數值後面加上任何單位，否該值無法正確識別。

表格的表頭

在中可以通過標籤設置表頭，表頭的標籤與標籤屬於平級，並且表頭一般出現在標籤的前面。對於一個表格來說，表頭並不是必須的，可以根據需要插入表頭。標籤內的文字會被自動加粗。

單元格的合併

單元格的合併分為垂直合併與水平合併，在合併時需要確定其他行與列中是否有對應數量的單元格。

水平合併單元格使用colspan屬性，其值是用數字的形式確定需要合併的單元格數量，例如colspan=」2″即代表向右合併兩個單元格。

垂直合併單元格使用rowspan屬性，與水平合併的屬性相同，同樣也是以數字形式確定需要合併的單元格數量，例如rowspan=」2″代表向下合併兩個單元格。

實例演示代碼：

姓名

電話

Bill Gates

555 77 854

555 77 855

橫跨兩行的單元格：

姓名

Bill Gates

電話

555 77 854

555 77 855

單元格邊距

表格具有與padding樣式類似的內邊距功能。通過在標籤內定義cellpadding屬性，來為其標籤下的所有元素設置內邊距。cellpadding屬性的參數是值是以數字的形式來確定邊距的大小，例如cellpadding=」10″ 則表示table中的所有標籤內邊距為10px

單元格間距

單元格的間距是設置標籤的外邊距，這個也與css樣式中的margin類似，通過在標籤內定義cellspacing屬性，來為其標籤下的所有td元素設置外邊距。該屬性也是以數字的形式來確定外邊距的大小，例如cellspacing=」10″則表示這個table中的所有標籤的外邊距為10px

為表格設置背景

表格可以通過background屬性為表格或單元格設置任意圖片作為背景，其使用方法非常像css中的background。為background設置對應的圖片路徑，即可使單元格顯示相應的圖片。例如background=」table_bg.gif」

表格內容的對齊排列

表格的對齊分為水平對齊和垂直對齊。它們分別是align屬性與valign屬性，將這兩個屬性插入到對應的標籤中即可完成單元格內文本或圖像的對齊。

水平對齊align分別有三個值：left左對齊、center水平居中、right右對齊

垂直對齊valign也有三個值：top頂端對齊、middle垂直居中、bottom底部對齊、baseline為基線對齊。

其中基線對齊可能無法從字面上理解，其實基線對齊也就是文本出現在表格的中上部而不是正中央。如果文字不大的話，效果和middle差不多，比middle稍微靠上一點。

私信發送【前端】有驚喜！

,