1. 程式人生 > >HTML的表格元素

HTML的表格元素

col monthly header rul head scope 種類 idt 創建

一、HTML的表格元素

1、table元素

  <table> 標簽定義 HTML 表格。簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。tr 元素定義表格行,th 元素定義表頭,td 元素定義表格單元。更復雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

  table元素的屬性:

  技術分享圖片

   frame屬性值:

   技術分享圖片

   rules的屬性值:

   技術分享圖片

   summary的用法:

 1 <table border="1" summary="Monthly savings for the Flintstones family"
> 2 <tr> 3 <th>Month</th> 4 <th>Savings</th> 5 </tr> 6 <tr> 7 <td>January</td> 8 <td>$100</td> 9 </tr> 10 </table>

   summary 屬性不會對普通瀏覽器中產生任何視覺變化。

2、caption元素

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

  可選屬性:

  技術分享圖片

3.tr元素

  <tr> 標簽定義 HTML 表格中的行。tr 元素包含一個或多個 th 或 td 元素。

  技術分享圖片

   char、charoff屬性幾乎沒有瀏覽器支持。

4、td|th元素

   定義表格內的表頭單元格。HTML 表單中有兩種類型的單元格:

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

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

  技術分享圖片

   abbr、axis、char、charoff、headers、scope等屬性瀏覽器幾乎不支持。

5。colgroup、col元素

   <col> 標簽為表格中的一個或多個列定義屬性值。您只能在table或colgroup中使用該元素。

  <colgroup> 標簽定義表格列的組。通過此標簽,您可以對列進行組合,以便格式化。該元素只有在 <table> 中才是合法的.

   註釋:colgroup 元素只能包含 col 元素。

   註釋:colgroup 元素無法創建表格列。如需創建列,必須在 tr 元素內規定 td 元素。

  屬性:

  技術分享圖片

   實例:

<html>
  <body>
    <table width="100%" border="1">
       <colgroup span="3" style="background: red">
       <col width="300px">
       <col span="2" width="400px">
      <tr height="80" valign="middle">
        <th>ISBN</th>
        <th>Title</th>
        <th>Price</th>
      </tr>
      <tr height="80" valign="middle">
        <td>3476896</td>
        <td>My first HTML</td>
        <td>$53</td>
      </tr>
      <tr height="80">
        <td>2489604</td>
        <td>My first CSS</td>
        <td>$47</td>
      </tr>
    </table>
  </body>
</html>

  設置三個列的背景顏色為紅色,第一個列的寬度300px,剩余兩個列為400px;

6.thead、tfoot、tbody元素

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

 1 <table>
 2 
 3   <thead>
 4     <tr>
 5       <td>THEAD 中的文本</td>
 6     </tr>
 7   </thead>
 8 
 9   <tfoot>
10     <tr>
11       <td>TFOOT 中的文本</td>
12     </tr>
13   </tfoot>
14 
15   <tbody>
16     <tr>
17       <td>TBODY 中的文本</td> 
18     </tr>
19   </tbody>
20 
21 </table>

HTML的表格元素