html中<table>標簽如何使用

小編給大家分享一下html中<table>標簽如何使用，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

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

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

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

我們如何使用table表格：

定義表格：<table></table>

創建表行：<tr></tr>

創建列(單元格):<td></td>

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

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中的<tr> 屬性

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

2.valign

該行的內容 垂直對齊方式

取值：top，middle，bottom

3.bgcolor

3、table中的<td> 屬性

• width

• height

• align

• valign

• bgcolor

• colspan：設置單元格跨列

• rowspan：設置單元格跨行

還有表格中的其他標記：

1、<caption></caption>

作用：為表格定義標題

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

<table>
    <caption>標題</caption>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

2、行標題或列標題

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

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

行(列)標題:<th></th>

3、表格的復雜應用

1、行分組

表格可以被劃分成3個部分

1、表頭 <thead></thead>

2、表主體 <tbody></tbody>

3、表尾     <tfoot></tfoot>

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

注意：如果不對表格行進行分組的話，那么默認都屬于 tbody 中

2、不規則表格

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

1.跨列

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

語法：td 的 colspan 屬性

2.跨行

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

語法：td 的 rowspan 屬性

注意：無論是跨行還是跨列，被合并的單元格一定從代碼中刪除出去

3、表格的嵌套

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

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

<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></caption>

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

屬性：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

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

看完了這篇文章，相信你對html中<table>標簽如何使用有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！