html table表格是什麼？ 標籤中各種屬性的使用方法

html table表格是什麼？

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

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

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

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

我們如何使用table表格：

定義表格：

建立表格行：

建立列(單元格): 

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

table : display:table;

html table表格的特色：

1.獨佔一行

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

html table的表格屬性：

1、< table> 屬性

    1.width：設定表格寬度

    2.height：設定表格高度

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

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

#    5.cellpadding

         單元格內邊界

         單元格內邊界

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

    6.cellspacing

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

    7.bgcolor：背景顏色

2、table中的 屬性

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

    2.valign

        此行的內容垂直對齊方式

 tom      取值：top，middle，botbot

    3.bgcolor

3、table中的 屬性

##width
height
align
#valign
bgcolor
colspan：設定單元格跨列
rowspan：設定單元格跨行

還有表格中的其他標記：

1、

        作用：定義標題為表格

#        作用：為表格定義標題

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

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

2、行標題或列標題

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

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

    行(列)標題:

3、表格的複雜應用程式

1、行分組

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

#        1、表頭

        2、表格主體< ; footgt < /tfoot>

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

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

2、不規則表格

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

1.跨列

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

語法：td 的colspan 屬性

2.跨行

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

語法：td 的rowspan 屬性

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

3、表格的巢狀

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

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

<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標籤的作用是什麼？ 和標籤的區別

html optgroup標籤是什麼意思？關於html optgroup標籤的用法與屬性實例解析

以上是html table表格是什麼？ 標籤中各種屬性的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！