html5表格標簽是什麼呢？

下面我們給大家介紹一下html5表格標簽吧!希望大家可以在這裡學習!表格單元格對齊位置設定

1. 首先我們來看一個最簡單的表格：

原始代碼 顯示結果

1

1

2. 利用

這個標簽來告訴浏覽器，這是一個表格，至於 BORDER=1 這參數是設定此表格的框線粗細為 1。一組 是設定一行的開始位置。一組 則是設定一個單元格。當然，文字就是要放在這裡面。

3. 現在我們再來增加兩個單元格：

原始代碼 顯示結果

1 2 3

1 2 3

4. 看見了吧，沒有增加，卻增加了兩組。那如果我要再加上一列呢?很簡單，就像這樣：

原始代碼 顯示結果

1 2 3

4 5 6

1 2 3

4 5 6

合並表格單元格

1. 並非所有的表格都是規規矩矩的只有幾行、幾列而已，有時候，我們還會希望能夠“合並單元格”，讓表格更美觀、更實用一點，而談到“合並單元格”，我們就必須知道，合並的方向有兩種：一種是上下合並(也就是行列間的合並)，一種是左右合並(也就是行間的合並)，這兩種合並方式各有不同的屬性設定方法。

2. 左右合並：基本上，你的表格已經學會了!接下來，咱們就來看看，如何將 1、2、3 單元格合並為一個大格：

原始代碼 顯示結果

1

4 5 6

1

4 5 6

你應該會發現，怎麼2、3都消失了?只剩下1，而且該行的標簽還多了一個陌生的臉孔COLSPAN="3"，沒錯，這就是“左右合並”的屬性，COLSPAN="3"的意思就是“這個行左右橫跨了3個單元格”，也正因如此，本來的兩個都可以省掉了，因為都被合並掉了!

3. 上下合並：學會了左右合並!接下來，咱們就來看看，如何上下合並，將 1、4單元格通通合並成一個大格：

原始代碼 顯示結果

1 2 3

5 6

1 2 3

5 6

有了上一次的經驗後，我們就知道，要合並單元格就一定有些單元格的屬性“犧牲”掉(也就是那些被合並的單元格!)，這次我們要“上下合並”，我們將1與4合並為一個單元格，那麼就要犧牲哪一個單元格呢?沒錯就是下面那一個倒霉的4，我們看看上圖，果然4已經被刪掉了，而在1的 標簽中則多了個生面孔ROWSPAN，這就是“上下單元格合並”的屬性，ROWSPAN=2 的意思就是“這個單元格上下連跨2個單元格”，其結果如上所士。

表格單元格對齊位置設定

1. 我可以自己設定表格的大小嗎?當然可以，你可以自由設定表格的“寬”及“高”!我們來制作一個寬100、高60的表格，做法如下：

原始代碼 顯示結果

1

1

2. 哎呀!怎麼 1 老是在表格的左邊呢?可以弄到中間嗎?當然可以，只要在加入 ALIGN=CENTER 這參數即可：

原始代碼 顯示結果

1

1

此外，利用 ALIGN=RIGHT可以讓表格中元素置右、利用 ALIGN=LEFT可以讓表格中元素置左(默認值)，至於為什麼要加在中呢?因為，是一個單元格的意思，我們要指定在這個單元格中的元素要置中或置左置右，就必須將ALIGN加在中。

3. 既然可以置中，那麼也可以控制表格內文字靠上、靠下嗎?可以的，只要利用 VALIGN=TOP 這個屬性即可讓表格內元素靠上方對齊。

原始代碼 顯示結果

1

1

利用VALIGN=MIDDLE可以讓表格中元素垂直置中(默認值)，VALIGN=BOTTOM可以讓表格中元素靠下方。

表格背景、底色設定

1. 表格可以設定底色嗎?可以的不但表格可以，你也可以指定某行或某列的顏色，方法和加背景顏色一樣，利用BGCOLOR="顏色代碼"就行了。下面是指定整個表格背景顏色的方法：

原始代碼 顯示結果

1 2

3 4

1 2

3 4

將BGCOLOR="顏色代碼"加在中，可以指定“一行”的背景顏色：

原始代碼 顯示結果

1 2

3 4

1 2

3 4

將BGCOLOR="顏色代碼"加在中，可以指定“一個單元格”的背景顏色：

原始代碼 顯示結果

1 2

3 4

1 2

3 4

2. 表格除了可以設定底色外，也可以用圖片來作背景嗎?當然可以，方法一樣簡單，只要將BACKGROUND="圖片名稱" 加到表格中就行了。和表格背景顏色一樣，不但表格可以設定背景圖片，你也可以指定某行或某列的背景圖片：

原始代碼 顯示結果

1 2

3 4

1 2

3 4

表格邊框線的設定

1. 如何設定表格粗細?只要利用BORDER="粗細值"就行了。

原始代碼 顯示結果

1

1

2. 如何設定表格顏色?只要利用BORDERCOLOR="顏色代碼"就行了。

原始代碼 顯示結果

1

1

3. 另外，我們也可以設定表格的陰影、亮面顏色，讓表格看起來更有立體感!只要利用 BORDERCOLORLIGHT="#顏色代碼"(亮面設定) BORDERCOLORDARK="顏色代碼"(暗面設定)就行了。

原始代碼 顯示結果

1

1

表格間距設定

1. 我們可以利用CELLPADDING屬性自由設定表格內容距離邊線的距離，這個屬性很好用，保持適當的距離，看起來比較舒服。一般而言內定值為2，不過建議設定為4比較漂亮。

原始代碼 顯示結果

1 2

1 2

2. 我們可以利用CELLSPACING屬性設定表格單元格邊線之間的距離。一般而言默認值為2，不過建議設置為 0 。

原始代碼 顯示結果

1 2

1 2

以上就是我們給大家介紹的html5表格標簽了。希望大家繼續關注我們的網站!