標籤中各種屬性的使用方法

html table表格是什麼？

標籤中各種屬性的使用方法

寻∝梦原創: 2018-08-22 13:59:0924637瀏覽

html table表格是什麼？ f5d188ed2c074f8b944552db028f98a1標籤中的各種屬性和使用全在這篇文章中，非常適合初識table標籤的人來學習，這篇文章把表格的基礎屬性全部都說了清楚，html table表格的作用還有屬性以及一些用法都在這上面了

首先讓我們了解什麼是表格，還有表格的作用

什麼是table表格：由一些被稱為單元格的矩形框按照從左到右從上到下的順序排列到一起組成的

table表格的作用：以一定的結構來顯示資訊的。

我們如何使用table表格：

定義表格：f5d188ed2c074f8b944552db028f98a1f16b1740fad44fb09bfe928bcc527e08

建立表格行：a34de1251f0d9fe1e645927f19a896e8 fd273fcf5bcad3dfdad3c41bd81ad3e5

建立列(單元格):b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf

注意：預設情況下，每行中的列數是統一的。

table : display:table;

html table表格的特色：

1.獨佔一行

2.寬度自適應(由內容決定)

html table的表格屬性：

1、43c4707103c6cc3650c2aeb71d2b1e8d 屬性

1.width：設定表格寬度

2.height：設定表格高度

3.align：其父元素中設定表格的水平對齊方式，取值：left,center,right

4.border：邊框,邊框寬度，以px為單位的數值，px可以省略

# 5.cellpadding

單元格內邊界

單元邊框與內容之間的距離

6.cellspacing

# 單元格之間或單元格與表格之間的距離

7.bgcolor：背景顏色

2、table中的a34de1251f0d9fe1e645927f19a896e8 屬性

1.align：該行的內容水平對齊方式

2.valign

此行的內容垂直對齊方式

tom 取值：top，middle，botbot

3.bgcolor

3、table中的b6c5a531a458a2e790c1fd6421739d1c 屬性

還有表格中的其他標記：

1、63bd76834ec05ac1f4c0ebbeaafb099437eb775bb5a9e6f3d094e96a76117fe8

作用：定義標題為表格

# 作用：為表格定義標題

位置：表格正上方居中顯示

<table>
    <caption>标题</caption>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

2、行標題或列標題

# 列標題：第一行中的每一列，加粗，水平居中的效果顯示

行標題：每行裡面的第一列, 加粗，水平居中的效果顯示

行(列)標題:b4d429308760b6c2d20d6300079ed38e01c3ce868d2b3d9bce8da5c1b7e41e5b

3、表格的複雜應用程式

1、行分組

#表格可以分割成3個部分

# 1、表頭ae20bdd317918ca68efdc799512a9b397943277d65306330563feb42dc8c705a

2、表格主體92cee25da80fac49f6fb6eec5fd2c22a< ; footgt 29ef2a7480190e02cff1c62c6e19ab01

<table>
    <tbody>
         <tr></tr>
         <tr></tr>
    </tbody>
</table>

注意：如果不對表格行分組的話，那麼預設都屬於tbody 中

2、不規則表格

#每行中的列數，不是統一化的。

1.跨列

合併列，讓指定的單元格，橫向向右，合併幾個單元格(包含自己)

語法：td 的colspan 屬性

2.跨行

合併行，讓指定的單元格，縱向向下，合併幾個單元格(包含自己)

語法：td 的rowspan 屬性

注意：無論是跨行或跨列，合併的儲存格一定從程式碼中刪除出去

3、表格的巢狀

在在一個表格中，又嵌入了另一個表格

被嵌套的表格必須出現在b6c5a531a458a2e790c1fd6421739d1c中

<table>
    <tr>
       <td>
<table>
    <tr>
        <td>
        </td>
    </tr>
</table>
       </td>
    </tr>
</table>

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

1、html table表格樣式屬性之邊框合併

#屬性：border-collapse

為值：

1.separate：預設值，分離邊框模式

1.collapse：邊框合併模式

2、html table表格樣式屬性之邊框邊距

1.作用：設定相鄰單元格邊框之間的距離(類似cellspacing)

#2.屬性：border-spacing

取值：

1、取1個值

表示水平和垂直間距相等

2.取2個值

第一個值表示的水平間距

第二個值表示的垂直間距

兩個值之間以空格隔開

3.要求

border-collapse必須為separate

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

3、html table表格樣式屬性之標題位置

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

屬性：caption-side

##取值：

1、top：預設

2、bottom：標題位於表格之下

4、html table表格樣式屬性之顯示規則

#1.作用

指定瀏覽器以什麼樣的方式來佈局一個表格。實際上是指定了單元格的演算法規則

預設演算法：單元格的寬由內容來決定，不受設定的width值來限定。

2.屬性：table-layout

取值：

1、auto：預設值，自動，列寬由內容決定

2 、fixed：固定表格佈局，列寬由設定的數值決定。

3、自動表格佈局&固定表格佈局

1.自動表格佈局(auto)

儲存格的大小會適應內容大小

# 在表格複雜時，載入會比較慢

適用於不確定每列大小時使用

傳統表格表現方式

2.固定表格佈局(fixed)

儲存格的大小由設定的值決定，與內容無關

會加速顯示表格，瀏覽器在載入完第一行的時候就不用再計算了。

4、隱藏的顯示效果

屬性： visibility:collapse

用在表格元素上，刪除一行或一列，不影響表格整個佈局

#謝謝你看完了這篇文章，如果有什麼疑問或是什麼關於這上面的問題你都可以在下面提問。

還有一篇是這個進階版的文章，歡迎點擊：

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

【小編的相關文章】

html em標籤的作用是什麼？ 907fae80ddef53131f3292ee4f81644b和5a8028ccc7a7e27417bff9f05adf5932標籤的區別