HTML 表格

<table>標簽:

定義和用法:

<table>標簽定義HTML表格。

簡單的HTML表格由table元素以及一個或多個tr、th或td元素組成。

tr元素定義表格行,th元素定義表頭,td元素定義表格單元。

可選的屬性:

1.border

   值:pixels       規定表格邊框的寬度。

2.cellpadding

   值:pixels或%     規定單元邊沿與內容之間的空白。

3.cellspacing   

   值:pixels或%   規定單元格之間的空白。

4. frame

    值:void(不顯示外側邊框。)                       規定外側邊框的哪個部分是可見的。

         above (顯示上部的外側邊框。)

         below (顯示下部的外側邊框。)

         hsides (顯示上部和下部的外側邊框。)

         vsides  (顯示左邊和右邊的外側邊框。)

         lhs  (顯示左邊的外側邊框。)

         rhs (顯示右邊的外側邊框。)

         box  (在所有四個邊上顯示外側邊框。)

         border (在所有四個邊上顯示外側邊框。) 

5. rules    值:  none (沒有線條。)                             規定內側邊框的哪個部分是可見的。

           groups (位於行組和列組之間的線條。)

           rows   (位於行之間的線條。)

           cols    (位於列之間的線條。)

           all       (位於行和列之間的線條。)

6. summary

   值: text       規定表格的摘要。

7. width  

   值:%或pixels    規定表格的寬度。

<caption> 標簽

定義和用法

caption 元素定義表格標題。

caption 標簽必須緊隨 table 標簽之后。您只能對每個表格定義一個標題。通常這個標題會被居中於表格之上。

所有瀏覽器都支持 <caption> 標簽。

<th> 標簽

定義和用法

定義表格內的表頭單元格。

HTML 表單中有兩種類型的單元格:

  • 表頭單元格 - 包含表頭信息(由 th 元素創建)

  • 標准單元格 - 包含數據(由 td 元素創建)

th 元素內部的文本通常會呈現為居中的粗體文本,而 td 元素內的文本通常是左對齊的普通文本。

提示和注釋

提示:如果需要將內容橫跨多個行或列,請使用 colspanrowspan 屬性。

可選的屬性:

1. align

   值:left (左對齊內容(默認值)。)           規定表格的表頭單元格中內容的水平對齊方式。

         right  (右對齊內容。)

         center  (居中對齊內容。)

         justify  (對行進行伸展,這樣每行都可以有相等的長度(就像在報紙和雜志中)。

         char   (將內容對准指定字符。)注釋:幾乎沒有瀏覽器能夠正確地處理 "char" 值。

2. colspan

   值:number                              規定表頭單元格可橫跨的列數。

        注釋:沒有瀏覽器支持 colspan="0",這個值有特殊的意義。

3. rowspan

    值:number                            規定表頭單元格可橫跨的行數。

    注釋:沒有瀏覽器支持 rowspan="0",這個值有特殊的意義。

4.  valign

     值:top(對內容進行上對齊。)                   規定單元格中內容的垂直排列的方式。

           middle  (對內容進行居中對齊(默認值)。)

          bottom  (對內容進行下對齊。)

          baseline   (與基線對齊。)

         注釋:基線是一條虛構的線。在一行文本中,大多數字母以基線為基准。baseline 值設置行中的所有表格數據都分享相同的基線。該值的效果常常與 bottom 值相同。不過,如果文本的字號各不相同,那么 baseline 的效果會更好。

          例如: valign="bottom"

                   valign="baseline"

<tr> 標簽

定義和用法:

<tr> 標簽定義 HTML 表格中的行。

tr 元素包含一個或多個 th 或 td 元素。

可選屬性:

1. align

   值:left (左對齊內容(默認值)。)           規定表格行中內容的水平對齊方式。

         right  (右對齊內容。)

         center  (居中對齊內容。)

         justify  (對行進行伸展,這樣每行都可以有相等的長度(就像在報紙和雜志中)。

         char   (將內容對准指定字符。)注釋:幾乎沒有瀏覽器能夠正確地處理 "char" 值。

2.  valign

     值:top(對內容進行上對齊。)                   規定表格行中內容的垂直排列的方式。

           middle  (對內容進行居中對齊(默認值)。)

          bottom  (對內容進行下對齊。)

          baseline   (與基線對齊。)

         注釋:基線是一條虛構的線。在一行文本中,大多數字母以基線為基准。baseline 值設置行中的所有表格數據都分享相同的基線。該值的效果常常與 bottom 值相同。不過,如果文本的字號各不相同,那么 baseline 的效果會更好。

          例如: valign="bottom"

                   valign="baseline"

<td> 標簽

定義和用法:

<td> 標簽定義 HTML 表格中的標准單元格。

HTML 表格有兩類單元格:

  • 表頭單元 - 包含頭部信息(由 th 元素創建)
  • 標准單元 - 包含數據(由 td 元素創建)

td 元素中的文本一般顯示為正常字體且左對齊。

可選屬性:

1. align

   值:left (左對齊內容(默認值)。)           規定單元格中內容的水平對齊方式。

         right  (右對齊內容。)

         center  (居中對齊內容。)

         justify  (對行進行伸展,這樣每行都可以有相等的長度(就像在報紙和雜志中)。

         char   (將內容對准指定字符。)注釋:幾乎沒有瀏覽器能夠正確地處理 "char" 值。

2. colspan

   值:number                              規定單元格可橫跨的列數。

        注釋:沒有瀏覽器支持 colspan="0",這個值有特殊的意義。

3. rowspan

    值:number                            規定單元格可橫跨的行數。

    注釋:沒有瀏覽器支持 rowspan="0",這個值有特殊的意義。

4.  valign

     值:top(對內容進行上對齊。)                   規定單元格中內容的垂直排列的方式。

           middle  (對內容進行居中對齊(默認值)。)

          bottom  (對內容進行下對齊。)

          baseline   (與基線對齊。)

         注釋:基線是一條虛構的線。在一行文本中,大多數字母以基線為基准。baseline 值設置行中的所有表格數據都分享相同的基線。該值的效果常常與 bottom 值相同。不過,如果文本的字號各不相同,那么 baseline 的效果會更好。

          例如: valign="bottom"

                   valign="baseline"

<thead> 標簽

定義和用法

<thead> 標簽定義表格的表頭。該標簽用於組合 HTML 表格的表頭內容。

thead 元素應該與 tbody 和 tfoot 元素結合起來使用。

tbody 元素用於對 HTML 表格中的主體內容進行分組,而 tfoot 元素用於對 HTML 表格中的表注(頁腳)內容進行分組。

注釋:如果您使用 thead、tfoot 以及 tbody 元素,您就必須使用全部的元素。它們的出現次序是:thead、tfoot、tbody,這樣瀏覽器就可以在收到所有數據前呈現頁腳了。您必須在 table 元素內部使用這些標簽。

提示:在默認情況下這些元素不會影響到表格的布局。不過,您可以使用 CSS 使這些元素改變表格的外觀。

詳細描述

thead、tfoot 以及 tbody 元素使您有能力對表格中的行進行分組。當您創建某個表格時,您也許希望擁有一個標題行,一些帶有數據的行,以及位於底部的一個總計行。這種划分使瀏覽器有能力支持獨立於表格標題和頁腳的表格正文滾動。當長的表格被打印時,表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。

可選屬性:

1. align

   值:left (左對齊內容(默認值)。)           規定thead元素中內容的水平對齊方式。

         right  (右對齊內容。)

         center  (居中對齊內容。)

         justify  (對行進行伸展,這樣每行都可以有相等的長度(就像在報紙和雜志中)。

         char   (將內容對准指定字符。)注釋:幾乎沒有瀏覽器能夠正確地處理 "char" 值。

2.  valign

     值:top(對內容進行上對齊。)                   規定thead元素中內容的垂直排列的方式。

           middle  (對內容進行居中對齊(默認值)。)

          bottom  (對內容進行下對齊。)

          baseline   (與基線對齊。)

         注釋:基線是一條虛構的線。在一行文本中,大多數字母以基線為基准。baseline 值設置行中的所有表格數據都分享相同的基線。該值的效果常常與 bottom 值相同。不過,如果文本的字號各不相同,那么 baseline 的效果會更好。

          例如: valign="bottom"

                   valign="baseline"

<tbody> 標簽

定義和用法

<tbody> 標簽表格主體(正文)。該標簽用於組合 HTML 表格的主體內容。

tbody 元素應該與 thead 和 tfoot 元素結合起來使用。

thead 元素用於對 HTML 表格中的表頭內容進行分組,而 tfoot 元素用於對 HTML 表格中的表注(頁腳)內容進行分組。

注釋:如果您使用 thead、tfoot 以及 tbody 元素,您就必須使用全部的元素。它們的出現次序是:thead、tfoot、tbody,這樣瀏覽器就可以在收到所有數據前呈現頁腳了。您必須在 table 元素內部使用這些標簽。

提示:在默認情況下這些元素不會影響到表格的布局。不過,您可以使用 CSS 使這些元素改變表格的外觀。

詳細描述

thead、tfoot 以及 tbody 元素使您有能力對表格中的行進行分組。當您創建某個表格時,您也許希望擁有一個標題行,一些帶有數據的行,以及位於底部的一個總計行。這種划分使瀏覽器有能力支持獨立於表格標題和頁腳的表格正文滾動。當長的表格被打印時,表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。

可選屬性:

1. align

   值:left (左對齊內容(默認值)。)           規定tbody元素中內容的水平對齊方式。

         right  (右對齊內容。)

         center  (居中對齊內容。)

         justify  (對行進行伸展,這樣每行都可以有相等的長度(就像在報紙和雜志中)。

         char   (將內容對准指定字符。)注釋:幾乎沒有瀏覽器能夠正確地處理 "char" 值。

2.  valign

     值:top(對內容進行上對齊。)                   規定tbody元素中內容的垂直排列的方式。

           middle  (對內容進行居中對齊(默認值)。)

          bottom  (對內容進行下對齊。)

          baseline   (與基線對齊。)

         注釋:基線是一條虛構的線。在一行文本中,大多數字母以基線為基准。baseline 值設置行中的所有表格數據都分享相同的基線。該值的效果常常與 bottom 值相同。不過,如果文本的字號各不相同,那么 baseline 的效果會更好。

          例如: valign="bottom"

                   valign="baseline"

<tfoot> 標簽

定義和用法 

<tfoot> 標簽定義表格的頁腳(腳注或表注)。該標簽用於組合 HTML 表格中的表注內容。

tfoot 元素應該與 thead 和 tbody 元素結合起來使用。

thead 元素用於對 HTML 表格中的表頭內容進行分組,而 tbody 元素用於對 HTML 表格中的主體內容進行分組。

注釋:如果您使用 thead、tfoot 以及 tbody 元素,您就必須使用全部的元素。它們的出現次序是:thead、tfoot、tbody,這樣瀏覽器就可以在收到所有數據前呈現頁腳了。您必須在 table 元素內部使用這些標簽。

 提示:在默認情況下這些元素不會影響到表格的布局。不過,您可以使用 CSS 使這些元素改變表格的外觀。

詳細描述

thead、tfoot 以及 tbody 元素使您有能力對表格中的行進行分組。當您創建某個表格時,您也許希望擁有一個標題行,一些帶有數據的行,以及位於底部的一個總計行。這種划分使瀏覽器有能力支持獨立於表格標題和頁腳的表格正文滾動。當長的表格被打印時,表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。

可選的屬性:

1. align

   值:left (左對齊內容(默認值)。)           規定tfoot元素中內容的水平對齊方式。

         right  (右對齊內容。)

         center  (居中對齊內容。)

         justify  (對行進行伸展,這樣每行都可以有相等的長度(就像在報紙和雜志中)。

         char   (將內容對准指定字符。)注釋:幾乎沒有瀏覽器能夠正確地處理 "char" 值。

2.  valign

     值:top(對內容進行上對齊。)                   規定tfoot元素中內容的垂直排列的方式。

           middle  (對內容進行居中對齊(默認值)。)

          bottom  (對內容進行下對齊。)

          baseline   (與基線對齊。)

         注釋:基線是一條虛構的線。在一行文本中,大多數字母以基線為基准。baseline 值設置行中的所有表格數據都分享相同的基線。該值的效果常常與 bottom 值相同。不過,如果文本的字號各不相同,那么 baseline 的效果會更好。

          例如: valign="bottom"

                   valign="baseline"

提示和注釋:

注釋:<thead> 內部必須擁有 <tr> 標簽!

注釋:<thead>、<tbody> 以及 <tfoot> 很少被使用,這是因為糟糕的瀏覽器支持。我們期望在 XHTML 的未來版本中這種情況會發生變化。

 <col> 標簽

定義和用法

<col> 標簽為表格中一個或多個列定義屬性值。

如需對全部列應用樣式,<col> 標簽很有用,這樣就不需要對各個單元和各行重復應用樣式了。

您只能在 table 或 colgroup 元素中使用 <col> 標簽。

提示和注釋:

提示:請為 <col> 標簽添加 class 屬性。這樣就可以使用 CSS 來負責對齊方式、寬度和顏色等等。

提示:如果您希望在 colgroup 內部為每個列規定不同的屬性值時,請使用此元素。如果沒有 col 元素,列會從 colgroup 那里繼承所有的屬性值。

注釋:col 元素是僅包含屬性的空元素。如需創建列,您就必須在 tr 元素內部規定 td 元素。

可選屬性:

1.span 

   值:number            規定 col 元素應該橫跨的列數。

2.  valign

     值:top(對內容進行上對齊。)                   規定col元素中內容的垂直排列的方式。

           middle  (對內容進行居中對齊(默認值)。)

          bottom  (對內容進行下對齊。)

          baseline   (與基線對齊。)

         注釋:基線是一條虛構的線。在一行文本中,大多數字母以基線為基准。baseline 值設置行中的所有表格數據都分享相同的基線。該值的效果常常與 bottom 值相同。不過,如果文本的字號各不相同,那么 baseline 的效果會更好。

          例如: valign="bottom"

                   valign="baseline"

3. width

   值:pixels或%或像素       規定col元素的寬度。

通常,col 元素占用的空間就是它顯示內容需要的空間。width 屬性用於為 col 元素設置預定義的寬度。

注釋:該屬性會覆蓋 colgroup 元素中的任何寬度設置。

<colgroup> 標簽

定義與用法:

<colgroup> 標簽用於對表格中的列進行組合,以便對其進行格式化。

如需對全部列應用樣式,<colgroup> 標簽很有用,這樣就不需要對各個單元和各行重復應用樣式了。

 <colgroup> 標簽只能在 table 元素中使用。

提示和注釋:

提示:請為 <colgroup> 標簽添加 class 屬性。這樣就可以使用 CSS 來負責對齊方式、寬度和顏色等等。

注釋:col 元素是僅包含屬性的空元素。如需創建列,您就必須在 tr 元素內部規定 td 元素。

可選屬性:

1.span 

   值:number            規定列組應該橫跨的列數

2.  valign

     值:top(對內容進行上對齊。)                   定義在列組合中內容的垂直對齊方式。

           middle  (對內容進行居中對齊(默認值)。)

          bottom  (對內容進行下對齊。)

          baseline   (與基線對齊。)

         注釋:基線是一條虛構的線。在一行文本中,大多數字母以基線為基准。baseline 值設置行中的所有表格數據都分享相同的基線。該值的效果常常與 bottom 值相同。不過,如果文本的字號各不相同,那么 baseline 的效果會更好。

          例如: valign="bottom"

                   valign="baseline"

3. width

   值:pixels或%或像素                   規定列組合的寬度。

通常,col 元素占用的空間就是它顯示內容需要的空間。width 屬性用於為 col 元素設置預定義的寬度。

注釋:該屬性會覆蓋 colgroup 元素中的任何寬度設置。

 

例子:

1.跨行或跨列的表格單元格

本例演示如何定義跨行或跨列的表格單元格。

橫跨兩列的單元格:

姓名 電話
Bill Gates 555 77 854 555 77 855

 

橫跨兩行的單元格:

姓名 Bill Gates
電話 555 77 854
555 77 855
<html>

<body>

<h4>橫跨兩列的單元格:</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">電話</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>橫跨兩行的單元格:</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">電話</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

 2. 單元格邊距(Cell padding)

 本例演示如何使用 Cell padding 來創建單元格內容與其邊框之間的空白。

沒有 cellpadding:

First Row
Second Row

 

帶有 cellpadding:

First Row
Second Row
<h4>沒有 cellpadding:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>帶有 cellpadding:</h4>
<table border="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

3.框架(frame)屬性

本例演示如何使用 "frame" 屬性來控制圍繞表格的邊框。

注釋:frame 屬性無法在 Internet Explorer 中正確地顯示。

Table with frame="box":

Month Savings
January $100

 

 

Table with frame="above":

Month Savings
January $100

 

 

Table with frame="below":

Month Savings
January $100

 

 

Table with frame="hsides":

Month Savings
January $100

 

 

Table with frame="vsides":

Month Savings
January $100
<p><b>注釋:</b>frame 屬性無法在 Internet Explorer 中正確地顯示。</p>

<p>Table with frame="box":</p>
<table frame="box">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="above":</p>
<table frame="above">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="below":</p>
<table frame="below">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="hsides":</p>
<table frame="hsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="vsides":</p>
<table frame="vsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 HTML表格,table,thead,tbody,tfoot,th,tr,td,的屬性以及跨行,跨列 table的thead/tbody/tfoot/tr/th/td (轉) 前端:table、thead、th、tr、td 表格table,th,tr,td區分以及屬性 html中 table的結構 徹底搞清 caption th thead等 table標簽中thead、tbody、tfoot的作用 table標簽中thead、tbody、tfoot的作用 table標簽中thead、tbody、tfoot的作用 html表格中的tr td th用法 html表格中的tr td th用法
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM