首頁 >web前端 >html教學 >什麼是table表格？ html中table表格的介紹

什麼是table表格？ html中table表格的介紹

不言原創: 2018-08-23 11:04:555639瀏覽

這篇文章帶給大家的內容是關於什麼是table表格？ html中table表格的介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

什麼是表格？表格是由行和列排列而成的一種結構，按照行和列呈現數據，從而進行頁面佈局。這種佈局方式已經過時。建議使用p css實作頁面佈局。

如何建立HTML表格：HTML表格由table標籤、caption標籤以及一個或多個tr、th或td標籤組成：

1、table標籤用來定義表格，整個表格包含在f5d188ed2c074f8b944552db028f98a1和f16b1740fad44fb09bfe928bcc527e08標籤中；

2、caption標籤定義表格標題；

# 的容器，每行可以包含有多個單元格，由a34de1251f0d9fe1e645927f19a896e8和fd273fcf5bcad3dfdad3c41bd81ad3e5標籤表示；

4、td標籤和th標籤用來定義單元格，所有單元格都在tr標籤內，每個單元格由一對b6c5a531a458a2e790c1fd6421739d1c和b90dd5946f0946207856a8a37f441edf標籤或一對b4d429308760b6c2d20d6300079ed38e和01c3ce868d2b3d9bce8da5c1b7e41e5b標籤表示，具體的表格內容放置在這一對td標籤或th標籤之中，其語法如下：

<table>
	<caption>表格标题</caption>
    <tr>
        <th>1行1列的内容</th>
        <th>1行2列的内容</th>
        …
    </tr>
    <tr>
        <td>2行1列的内容</td>
        <td>2行2列的内容</td>
        …
    </tr>
    …
</table>

註：th和td的不同：th預設是以粗體和居中的方式呈現於單元格。

table的一些常用標籤屬性

1、border標籤屬性：設定表格邊框的寬度（單位：px）；border屬性會為每個儲存格新增邊框，並用邊框圍繞表格；如果border 屬性的值發生改變，那麼只有表格周圍邊框的尺寸會發生變化，表格內部的邊框則是1像素寬；建議使用border樣式屬性設定邊框，不要使用border標籤屬性設定邊框，

2、width標籤屬性：設定表格

的寬度，建議使用width樣式屬性設定表格寬度，不要使用width標籤屬性設置，該標籤屬性有多個值：

值描述 pixels 設定以像素計的寬度（範例：width="50"）。 % 設定以包含元素的百分比計的寬度（範例：width="50%"）。

3、align標籤屬性：指定表格相對於周圍標籤的對齊方式，建議使用float樣式屬性實現此效果，該標籤屬性有多個值：

值描述 left 左對齊表格。 right 右對齊表格。 center 居中對齊表格。

4、bgcolor標籤屬性：指定表格背景顏色，建議使用background-color樣式屬性實作該效果，該標籤屬性有多個值：

值描述 color_name 規定顏色值為顏色名稱的背景顏色（例如 "red"）。 hex_number 規定顏色值為十六進位值的背景顏色（例如 "#ff0000"）。 rgb_number 規定顏色值為 rgb 代碼的背景顏色（如 "rgb(255,0,0)"）。

5、cellpadding標籤屬性：設定儲存格邊界與儲存格內容之間的間距（單位：px），建議使用padding樣式屬性實現對其效果

6、cellspacing標籤屬性：指定單元格之間的間距（單位：px）

以上列出了table標籤常用的標籤屬性，除此之外table標籤還有frame、rules和summary三個標籤屬性，但因為frame和rules在Internet Explorer瀏覽器中不支援此屬性，而summary標籤屬性不會再瀏覽器中產生任何視覺效果，所以這三個標籤屬性忽略不講。

tr標籤屬性

1、align標籤屬性：設定表格行中儲存格內容的水平對齊方式，該標籤屬性有多個值：

left 左對齊內容（預設值）。 right 右對齊內容。 center 居中對齊內容。 justify 對行進行伸展，這樣每行都可以有相等的長度（就像在報紙和雜誌中）。 char 將內容對準指定字元。注意：瀏覽器不支援該標籤屬性值

2、bgcolor標籤屬性：設定表格行的背景顏色，建議使用background-color樣式屬性實作此效果，該標籤屬性有多個值：

3、valign標籤屬性：設定表格行中儲存格內容的垂直對準方式，該標籤屬性有多個值：

值描述 top 對內容進行上對齊。 middle 對內容進行居中對齊（預設值）。 bottom 對內容進行下對齊。 baseline 與基線對齊。

th和td標籤屬性

1、align標籤屬性：設定儲存格內容的水平對齊方式，該標籤屬性有多個值：

值描述 left 左對齊內容（td標籤預設值）。 right 右對齊內容。 center 居中對齊內容（th標籤預設值）。 justify 對行進行伸展，這樣每行都可以有相等的長度（就像在報紙和雜誌中）。 char 將內容對準指定字元。注意：瀏覽器不支援該標籤屬性值

2、bgcolor標籤屬性：設定單元格背景顏色，建議使用background-color樣式屬性來實現該效果，該標籤屬性有多個值：

3、valign標籤屬性：設定儲存格內容的垂直對準方式，該標籤屬性有多個值：

top 對內容進行上對齊。 middle 對內容進行居中對齊（預設值）。 bottom 對內容進行下對齊。 baseline 與基線對齊。

4、width標籤屬性與height標籤屬性：設定單元格的寬度和高度，建議使用width樣式屬性和height樣式屬性來設定單元格寬度和高度，不要使用width標籤屬性和height標籤屬性設置，該標籤屬性有多個值：

值描述 pixels 以像素計的寬度或高度值（例如 "100px"）。 percent 以包含元素百分比計的寬度或高度值（例如 "20%"）。

5、nowrap標籤屬性：設定單元格的內容是否換行

6、colspan標籤屬性和rowspan標籤屬性：分別設定單元格橫跨的列數和橫跨的行數

什麼是table表格？ html中table表格的介紹

相關文章