通過學習表格屬性充分利用HTML表格
HTML表格屬性為您提供了對HTML表格的更多控制。 表格中有很多屬性可以使它們更有趣，並改變頁面的外觀。
HTML TABLE元素屬性
在HTML5中，元素使用全局屬性和另一個屬性：。 它已更改為只有值1或空（即border =“”）。 如果你想改變邊框的寬度，你應該使用border-width CSS屬性。
請參閱下文以了解有效的HTML5表格屬性。
HTML5中還有幾個屬性是HTML 4.01規範的一部分：
- - 在表格的TD和TH元素上使用CSS填充屬性。
- - 在表格上使用CSS屬性border-spacing。
- - 使用CSS樣式border-color：black; 和桌子上的邊框風格。
- - 使用CSS樣式border-color：black; 並以表格的適當元素為邊界樣式。
- 相反，您應該在CAPTION中描述表格的結構，或者將整個表格放在圖中並在FIGCAPTION中進行描述。 或者，您可以簡化表格的結構，以便不需要解釋。
- - 使用CSS寬度屬性。
還有一個在HTML 4.01中被棄用的屬性，在HTML5中也是過時的。
了解有關HTML 4.01 TABLE屬性的更多信息。
- align -使用CSS margin屬性。
還有幾個不屬於任何HTML規範的屬性。
如果您知道您支持的瀏覽器可以處理它們，並且您不關心有效的HTML，請使用這些屬性。
- - 改用CSS屬性background-color。
- bordercolor - 使用CSS屬性border-color來代替。
- bordercolorlight - 使用CSS屬性border-color代替。
- bordercolordark - 使用CSS屬性border-color代替。
- cols - 這個屬性沒有其他選擇。
- 高度 - 改為使用CSS屬性高度。
- - 改用CSS屬性邊距。
- - 改用CSS屬性邊距。
- - 改為使用CSS屬性空白。
- - 使用CSS屬性vertical-align代替。
了解有關瀏覽器特定TABLE屬性的更多信息。
HTML5 TABLE元素屬性
正如我們上面提到的，除了全局屬性之外，只有一個屬性在HTML5 TABLE元素上是有效的：border。
邊界屬性用於定義整個表格及其中所有單元格的邊框。 關於它是否會包含在HTML5規範中存在一些問題，但它仍然是因為它提供了有關表結構的信息，而不僅僅是樣式含義。
要添加邊框屬性，如果存在邊框，則將該值設置為1，如果沒有，則將該值設置為空（或離開屬性）。 大多數瀏覽器也支持0為無邊框，以及任何其他整數值（2,3,30,500等）以像素為單位聲明邊框的寬度，但這在HTML5中已過時。 相反，您應該使用CSS邊框樣式屬性來定義邊框寬度和其他樣式。
要創建一個帶有邊框的表格，請寫下：
border =“1” >
這是一張帶有邊框的表格
HTML5中有HTML 4.01屬性過時。 如果你打算編寫HTML 4.01文檔，你可以學習它們，否則，你可以忽略它們。 上述大多數屬性都有替代方案。
我們描述在HTML5 （和HTML 4.01）中有效的元素的屬性。 這將描述在HTML 4.01中有效的TABLE屬性，但在HTML5中已過時。 如果您仍然編寫HTML 4.01文檔，則可以使用這些屬性，但其中大多數都有替代方法，這些替代方法可以使您的頁面在未來移至HTML5時更具前瞻性。
有效的HTML 4.01屬性
我們上面描述的屬性。
HTML 4.01與HTML5的唯一區別在於，您可以指定任何整數（0,1,2,15,20,200等）以像素為單位定義邊框的寬度。
要建立一個5px邊框的表格，寫下：
border =“5” >
此表格有5px的邊框。
查看兩個帶有邊框的表格的示例。
該屬性定義了單元格邊框和單元格內容之間的空間量。 默認值是兩個像素。 如果內容和邊框之間不需要空格，請將cellpadding設置為0。
要將單元格填充設置為20，請寫下：
cellpadding =“20” >
該表格的cellpadding為20。
單元格邊框將被分隔20像素。
查看帶cellpadding的表的示例
該屬性定義表格單元格和單元格內容之間的空間量。 像cellpadding一樣，默認設置為兩個像素，因此如果不需要單元格間距，則必須將其設置為0。
要將單元格間距添加到表中，請寫下：
cellspacing =“20” >
此表格的單元格間隔為20。
單元格將以20像素分隔。
查看帶有細胞間距的表格
該屬性標識了表格外圍的邊界部分是可見的。 你可以在所有四邊，任何一邊，頂部和底部，左邊和右邊，或沒有框架你的桌子。
以下是只有左側邊框的表格的HTML：
frame =“lhs” >
這張表
將有
只有
左邊框。
而底部框架的另一個例子是：
frame =“below” >
該表的底部有一個框架。
查看一些帶有框架的表格
該屬性與框架屬性相似，只是它影響表格單元格周圍的邊框。 您可以在所有單元格之間，列之間，TBODY和TFOOT之間或不設置規則。
要僅在行之間建立一個只包含行的表 ，請寫下：
rules =“rows” >
這張4x4的表格有
行不是列
概述了
規則屬性。
另一個在列之間的行：
rules =“cols” >
這是
一張表
其中
列
是
高亮
這是一個包含規則的表格的例子
該屬性提供有關屏幕閱讀器和其他用戶代理的表格的信息，這些代理可能在閱讀表格時遇到困難 要使用摘要屬性，請寫下表格的簡要說明並將其作為屬性的值。 摘要將不會顯示在大多數標準網頁瀏覽器的網頁上。
以下是如何編寫一個帶有摘要的簡單表格：
summary =“這是一個包含填充信息的示例表，這個表的目的是為了展示一個總結。” >
第1行第1行
第2行第1行
第1行第2行
第2行第2列
查看帶有摘要的表格
該屬性用兩個像素或容器元素的百分比定義表格的寬度。 如果未設置寬度，則表格將只佔用顯示內容所需的盡可能多的空間，其最大寬度與父元素的寬度相同。
要以像素為單位創建具有特定寬度的表格，請寫下：
width =“300” >
這個表格是它所在容器寬度的80％。
要構建一個寬度為父元素百分比的表，請寫下：
width =“80％” >
這個表格是它所在容器寬度的80％。
查看具有寬度的表格的示例
不推薦使用HTML 4.01 TABLE屬性
有一個TABLE元素的屬性在HTML 4.01中被棄用，並在HTML5中被廢棄： align 。 通過此屬性，您可以設置表格在頁面上的位置，並與其旁邊的文本相對應。 該屬性在HTML 4.01中已被棄用，您應該避免使用它。 相反，你應該使用CSS屬性或margin-left：auto; 和margin-right：auto; 樣式。 float屬性給出的結果更接近align屬性提供的結果，但它會影響頁面內容其餘部分顯示的方式。 保證金 - 右：汽車; 和margin-left：auto; 是W3C推薦的替代方案。
以下是使用align屬性的已棄用示例：
align =“right” >
該表格是右對齊的
文本左右移動
使用align屬性查看已棄用的示例。
要獲得與有效（不推薦）HTML相同的效果，請寫下：
style =“float：right;” >
該表格是右對齊的
文本左右移動
以下解釋了不屬於任何HTML規範的TABLE屬性。
以前的信息描述了在HTML 4.01中有效的HTML元素的屬性，但在HTML5中已過時。
以下描述了當前規範中無效的TABLE屬性。 如果你不關心你的頁面是否有效，並且你的用戶使用支持這些元素的瀏覽器，那麼你可以使用這些元素。 但其中大多數在現代瀏覽器中不受支持，或者有更符合標準的替代方案。
我們不建議在HTML表格上使用這些屬性 。
該屬性是在CSS得到廣泛支持之前包含的舊屬性。 它允許您更改表格的背景顏色。 您可以設置顏色名稱或十六進制代碼。 該屬性在很多瀏覽器中仍然有效，但對於面向未來的HTML，您不應該使用它，而是使用CSS代替。
這個屬性的更好的替代方案是樣式屬性。
要更改表格的背景顏色，請寫下：
style =“background-color：#ccc;” >
這張表有一個灰色背景
與bgcolor屬性類似，bordercolor屬性允許您更改屬性的顏色。 此屬性僅受Internet Explorer支持。 相反，您應該使用邊框顏色樣式屬性。
要更改表格邊框的顏色，請寫下：
style =“border-color：red;” >
該表格有紅色邊框。
Internet Explorer中包含bordercolorlight和bordercolordark屬性，以允許您在表格周圍創建3D邊框。 但是，從IE8開始，這僅在IE7標準模式和怪癖模式下受支持。 微軟表示不再支持這些屬性。
在短時間內，TABLE元素上的cols屬性被提出來幫助瀏覽器知道表有多少個列。 前提是這將有助於加速渲染大型表格。 然而，它只是由IE瀏覽器實現的，從IE8開始，它只支持IE7標準模式和怪異模式。
因為有一個width屬性（在HTML5中是過時的），很多人都認為表格也有高度屬性。 但是因為表格符合其內容的寬度或CSS或width屬性中定義的寬度，所以高度不能被約束。 相反，瀏覽器允許height屬性定義表的最小高度。 如果桌子比這個高度高，它會顯示更高。 但你應該使用這個屬性
使用CSS高度屬性，您可以限制高度，如果您也使用CSS屬性來定義發生任何多餘的內容。
要設置表格的最小高度，請寫下：
style =“height：30em;” >
這個表格至少有30埃姆高。
表格的左/右側（hspace）和頂部/底部（vspace）周圍的兩個屬性和增加的空間。 您應該改用style屬性。
要將垂直空間設置為20像素，將水平空間設置為40像素，請寫下：
style =“margin：20px 40px;”
該表具有20像素的vspace和40像素的hspace。
該屬性是一個布爾屬性，用於定義表格的內容是應該包裝在父元素或窗口的邊緣還是強制水平滾動。 相反，您應該使用CSS屬性定義每個表格單元格的包裝特徵。
要製作一個包含大量文本的列，請寫下：
<表>
style =“white-space：nowrap;” >這是一個有很多內容的專欄。 但即使它比容器寬，文本也不應該換行到下一行，而是強制瀏覽器窗口水平滾動以查看所有內容。
最後，該屬性定義每個單元格的內容應該如何在單元格內垂直對齊。 而不是這個無效的屬性，你應該使用每個單元格上的CSS屬性來更改對齊方式。 除非單元格的內容小於其他較大單元格創建的可用空間，否則您將不會注意到該風格的影響。
要強制一個單元格對齊底部（而不是中間，作為默認），寫：
<表>
這個單元比其他單元長，所以會強制高度更高。 因此，您會看到垂直對齊的單元格與底部對齊。
style =“vertical-align：bottom;” >底部的內容。
中間內容