html5 table標籤的樣式介紹（另附html5 table css居中的實例）

width: 列的寬度 

#align: 單元格內容水平排列方式：right left center

valign: 單元格內容垂直排列方式: top bottom middle baseline

colspan: 單元格可跨越的列數

rowspan: 單元格可跨越的行數

rowspan=3 tr

 nowrap：規定儲存格中的內容是否折行

##表格table特有的樣式屬性：

1、邊框合併

##取值：

# 1、separate

預設值，分離邊框模式

2、collapse

邊框合併模式

1、作用

設定相鄰單元格邊框之間的距離(類似cellspacing)

2、屬性

 border-spacing

取值：

 1、取1個值

表示水平與垂直間距相等

 2、取2個值

第一個值表示的水平間距

第二個值表示的垂直間距

兩個值之間用空格隔開

 border-collapse必須為separate

必須為分離邊框模式時有效

3、標題位置

作用：將標題位置由預設的位置改到表格之下

屬性：caption-side

取值：

 1、top

預設

 2、bottom

標題位於表格之下

看到使用display：table-cell可以將div渲染成一個cell,在表格td中的內容都是居中佈局，那麼想到了一個div中包含一個div，裡面的div垂直居中的辦法猜想可以使用： 

將外面的div設定display:table-cell，那麼裡面的div就自動垂直居中了 

測試才發現裡面的div沒有居中，那麼使用vertical-align居中，因為：

只有一個元素屬於inline或是inline-block（table-cell也可以理解為inline-block水平）水平，其身上的vertical-align屬性才會起作用。 

例如圖片，按鈕，單複選框，單行/多行文字框等HTML控件，只有這些元素預設會對vertical-align屬性起作用。

現在table-cell中可以使用vertical-align：middle讓裡面的內容垂直居中了，如果我想要實現水平居中呢？ text-algin：center，適合行內元素，那我只要將裡面的div設定為line-block就行了 

程式碼驗證：

【相關推薦】

以上是html5 table標籤的樣式介紹（另附html5 table css居中的實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！