首頁  >  文章  >  web前端  >  HTML中的表格元素

HTML中的表格元素

黄舟
黄舟原創
2016-12-17 14:01:191318瀏覽

--  HTML中的表格元素[轉帖]
一,

標籤。
標籤是表格的標識符,用來界定表格的範圍。
標籤是成對使用的標籤,手標籤和和尾標籤之間的內容就是表格的內容。
標籤的屬性主要有border,width,height,align,cellapcing,cellpasdding.它們都是可選的。 

 

1,border屬性的參數值是數字,表示表格邊框寬度所佔的像素點數。它也可以不帶有參數值使用,僅表示該表格是有邊框的。例如,

表示該表格的邊框寬度為10 個像素點。 

2,width和height屬性的功能是指定表格的大小。其中width屬性用來規定表格的寬度,height屬性用以指定表格的高度。這兩個屬性的參數值可以是數字或百分數,其中數字表示表格的寬(高)所佔的像素點,百分數表示表格的寬(高)佔據瀏覽器視窗的寬(高)度的百分比。例如:

表示表格的寬度為200個像素點,高度為瀏覽器視窗高度的50%。 

3,align屬性的參數值為left,center和right之一,分別表示表格位於其相鄰文字的左側、表格水平居中和表格位於相鄰文字的右側。例如: 

 

 
測試頁 
 
 
單元 
 

 
 
 
 
 
 
 
單元單元 單元 單元
1 解釋項目解釋項目 同上 同上
2 解釋項目 同上另一個單元 接著來 
 

文字說明,這個就是表格居於相鄰文字左側的範例,只要改變一下align的屬性參數就可以改變表格的位置了。 


 

4,cellspacing屬性。 cellspacing屬性用來指定表格各單元格之間的空隙。此屬性的參數值是數字,表示單元格間隙所佔的像素點數。 

5,cellpadding屬性。用來指定儲存格內容與儲存格邊界之間的空白距離的大小。此屬性的參數值也是數字,表示單元格內容與上下邊界之間空白距離的高度所佔像素點數以及單元格內容與左右邊界之間空白距離的寬度所佔的像素點數。例如: 

 

 
測試頁 
 
 

 
沒加如單元格屬性的規定之前的樣子:
 
border=3> 
 
儲存格 儲存格 
儲存格 儲存格 單元格 
 
 
1 儲存格 
儲存格 儲存格 儲存格 
 
2 儲存格 
儲存格 單元格 儲存格  
 

 
加入儲存格屬性規定之後的情形:
 
 
 
 
 
 
  

  

  

儲存格 儲存格儲存格 儲存格 儲存格
1 儲存格 儲存格 儲存格 儲存格
2 儲存格儲存格 儲存格 單元
  

 

接著我們來看看剛剛看到的幾個不熟悉的標籤是怎麼個意思。 

一,

標籤。是表格的標題的標籤。它是成對使用的標籤。在首標籤和尾標籤之間的內容就是表個的標題。 有兩個屬性:align和valign它們都是可選的。 

其中,align屬性的參數值為left,center,right之一,分別表示表格標題與表格的左邊沿兒對齊,位於表格中間和表格的右邊沿兒對齊。預設時,表格標題位於表格的中間;valign屬性的參數值是top和bottom之一,分別表示表格標題位於表格的上方和下方,缺省時,表格的標題位於表格的上方。例如: 

 
 
測試頁 
 

 
 
標籤。是行標籤。 HTML的表格是按行組織的。一個表格由幾行組成,就要有幾個標籤與之對應。行標籤是成對使用的標籤。它必須和和之間,用來規定該行中各單元格的內容。 標籤有兩個屬性。即align和valign屬性,他們都是可選的。

其中align屬性的參數值為left,center和right之一(以後如我特別說明,該屬性的參數都是這三個)分別表示個行中各單元格內容是左對齊、水平居中和右對齊的。缺省時為left(居左);valign屬性的參數值是top,middle和bottom之一,分別表示該行中各單元格內容是緊靠上沿兒,垂直居中和緊靠下沿兒的。缺省時為middle(居中)。

三,

 
 

 
 
 
 
  

  🎜 🎜 🎜 🎜
單元格 單元單元 單元格 儲存格
1 儲存格儲存格 儲存格 儲存格
2 儲存格單元格 單元 單元
 🎜
 🎜 🎜 🎜🎜這個例子中的表格標題是與表格的右邊沿兒對齊的。 🎜

二,

標籤配合使用,後者在使用時嵌套在
標籤 

標籤都是用來規定單元格內容的,表頭標籤 用來規定表頭元素的內容,表頭元素一般位於每列的首行,用來說明該列的具體資料是關於哪個物件的。 標籤是成對的。資料標籤 也是成對使用的,首標籤和尾標籤之間的內容就是該單元格的具體資料(也就是對錶頭的解釋內容)由於兩者都是用於規定單元內容的,和 標籤的所有屬性及對應的屬性功能是完全一樣的。 標籤的屬性有rowspancolspanalignvalign。 

(1)rowspan屬性的參數值是數字,表示該儲存格所跨越的行數。缺省值為1。 

(2)colspan屬性的參數值也是數字,表示該儲存格所跨的列數。缺省值為1。 

(3)align屬性用來規定儲存格內容在水平方向上的位置。三個參數值分別表示該儲存格是左對齊,居中還是右對齊。缺省時為left(左對齊) 

(4)valign屬性用於規定單元格內容在垂直方向上的位置。屬性的參數值為top,,middle和bottom之一,分別表示該單元格內容是緊靠上沿兒,垂直居中還是緊靠下沿兒。缺省時為middle(垂直居中)。 

好了,今天差不多就到這裡吧!太多了看不過來,不容易記憶。


 以上就是HTML中的表格元素的內容,更多相關文章請關注PHP中文網(www.php.cn)! 


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn