主頁 > 知識庫 > HTML5表格_動力節(jié)點Java學(xué)院整理

HTML5表格_動力節(jié)點Java學(xué)院整理

表格的作用是顯示二維數(shù)據(jù)，在HTML5中不再允許用表格控制頁面內(nèi)容的布局，而是采用新增的CSS表格特性（這里不涉及CSS，將在后面介紹）。下面主要介紹用于制作表格的HTML元素。

構(gòu)建表格

表格的基本元素包括：table、tr和td。
table表示HTML文檔中的表格，支持border屬性，用于定義表格邊框的寬度；
tr表示表格中的行；
td表示表格中的單元格，包括如下屬性：
1）colspan：規(guī)定單元格可橫跨的列數(shù)；
2）rowspan：規(guī)定單元格可橫跨的行數(shù)；
3）headers：規(guī)定與單元格相關(guān)的標(biāo)頭，該屬性不會在普通瀏覽器中產(chǎn)生任何視覺變化，但可以被屏幕閱讀器使用。

<table>
 <tr>
  <td>Apples</td>
  <td>Green</td>
  <td>Medium</td>
 </tr>
 <tr>
  <td>Oranges</td>
  <td>Orange</td>
  <td>Large</td>
 </tr>
</table>

上面定義了一個兩行、三列的表格，使用表格的好處是：瀏覽器會保證列的寬度滿足最寬的內(nèi)容，讓行的高度滿足最高的單元格。

表格邊框

使用table元素的border屬性，可以為表格添加邊框。

<table border="1">
 <tr>
  <td>Apples</td>
  <td>Green</td>
  <td>Medium</td>
 </tr>
 <tr>
  <td>Oranges</td>
  <td>Orange</td>
  <td>Large</td>
 </tr>
</table>

瀏覽器的默認邊框不太美觀，通常還需要用CSS來為為各種元素重設(shè)邊框樣式。

不規(guī)則表格

使用單元格的colspan和rowspan屬性可以構(gòu)建不規(guī)則表格，使表格的某些行或者列跨越多個單元格，下面是一個單元格跨多列的一個例子：

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td colspan="2">January</td>
  </tr>
  <tr>
    <td colspan="2">February</td>
  </tr>
</table>

下面是一個單元格跨多行的一個例子：

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100.00</td>
    <td rowspan="2">$50</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$10.00</td>
  </tr>
</table>

表頭

th元素用于為表格添加表頭，可以用來區(qū)分數(shù)據(jù)和對數(shù)據(jù)的說明。th元素支持如下屬性：
1）colspan：規(guī)定單元格可橫跨的列數(shù)；
2）rowspan：規(guī)定單元格可橫跨的行數(shù)；
3）scope：定義將表頭數(shù)據(jù)與單元數(shù)據(jù)相關(guān)聯(lián)的方法；
3）headers：由空格分隔的表頭單元格ID列表，為數(shù)據(jù)單元格提供表頭信息，該屬性不會在普通瀏覽器中產(chǎn)生任何視覺變化，但可以被屏幕閱讀器使用。

<table>
 <tr>
  <th>Rank</th><th>Name</th>
  <th>Color</th><th>Size</th>
 </tr>
 <tr>
  <th>Favorite:</th>
  <td>Apples</td><td>Green</td><td>Medium</td>
 </tr>
 <tr>
  <th>2nd Favorite:</th>
  <td>Oranges</td><td>Orange</td><td>Large</td>
 </tr>
 <tr>
  <th>3rd Favorite:</th>
  <td>Pomegranate</td><td>A kind of greeny-red</td>
  <td>Varies from medium to large</td>
 </tr>
</table>

可以在一行中混合使用th和td。

讓單元格關(guān)聯(lián)表頭

使用td的headers屬性可以將單元格和表頭關(guān)聯(lián)，關(guān)聯(lián)的目的主要是供屏幕閱讀器和其他殘障輔助技術(shù)用來簡化對表格的處理。headers屬性可以為一個或多個th單元格的id屬性值：

<table border="1" width="100%">
  <tr>
 <th id="name">Name</th>
 <th id="Email">Email</th>
 <th id="Phone">Phone</th>
 <th id="Address">Address</th>
  </tr>
  <tr>
 <td headers="name">George Bush</td>
 <td headers="Email">someone@example.com</td>
 <td headers="Phone">+789451236</td>
 <td headers="Address">Fifth Avenue New York,USA</td>
  </tr>
</table>

構(gòu)造復(fù)雜表頭

使用th的colspan和rowspan屬性可以構(gòu)造復(fù)雜表頭。

<table border="1">
  <tr>
    <th colspan="2">Company in USA</th>
  </tr>
  <tr>
    <th>Name</th><th>Addr</th>
  </tr>
  <tr>
    <td>Apple, Inc.</td>
    <td>1 Infinite Loop Cupertino, CA 95014</td>
  </tr>
  <tr>
    <td>Google, Inc.</td>
    <td>1600 Amphitheatre Parkway Mountain View, CA 94043</td>
  </tr>
</table>

為表格添加結(jié)構(gòu)

可以使用thead、tbody和tfoot元素來為表格添加結(jié)構(gòu)，這樣可以讓為表格各個部分添加CSS樣式變得更加容易。
1）表格主題
tbody元素表示構(gòu)成表格主題的全體行，不包括表頭行（thead元素表示）和表腳行（tfoot元素表示）。
注意大多數(shù)瀏覽器在處理table元素時都會自動插入tbody元素。
2）表格表頭
thead元素用來標(biāo)記表格的標(biāo)題行。如果沒有thead元素的話，所有tr元素都會被視為表格主體的一部分。
3）添加腳注
tfoot元素用來標(biāo)記組成表腳的行。在HTML5之前tfoot元素只能出現(xiàn)在tbody元素之前，而在HTML5中則允許將tfoot元素放在tbody之后。
下面是一個綜合的例子，里面使用了tbody、thead和tfoot元素。

<table>
 <thead>
  <tr>
   <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <th>Favorite:</th>
   <td>Apples</td><td>Green</td><td>Medium</td>
  </tr>
  <tr>
   <th>2nd Favorite:</th>
   <td>Oranges</td><td>Orange</td><td>Large</td>
  </tr>
  <tr>
   <th>3rd Favorite:</th>
   <td>Pomegranate</td><td>A kind of greeny-red</td>
   <td>Varies from medium to large</td>
  </tr>
 </tbody>
</table>

為表格添加標(biāo)題

使用caption元素可以為表格定義一個標(biāo)題，并將其與表格關(guān)聯(lián)起來。

<table>
 <caption>Results of the 2011 Fruit Survey</caption>
 <thead>
  <tr>
   <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <th>Favorite:</th>
   <td>Apples</td><td>Green</td><td>Medium</td>
  </tr>
  <tr>
   <th>2nd Favorite:</th>
   <td>Oranges</td><td>Orange</td><td>Large</td>
  </tr>
  <tr>
   <th>3rd Favorite:</th>
   <td>Pomegranate</td><td>A kind of greeny-red</td>
   <td>Varies from medium to large</td>
  </tr>
 </tbody>
</table>

一個表格只能包含一個caption元素，無需是表格的第一個元素，但始終顯示在表格上方。

列分組

在表格中，由于表格都是按行組建的，導(dǎo)致對列的操作不太方便，例如為表格的某列定義樣式?？梢允褂胏olgroup元素來指定列的分組。

<html>
<head>
    <style>
        #colgroup1{background-color: red}
        #colgroup2{background-color: green; font-size=small}
    </style>
</head>
<body>
<table width="100%" border="1">
  <colgroup id="colgroup1" span="2" ></colgroup>
  <colgroup id="colgroup2"></colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>2489604</td>
    <td>My first CSS</td>
    <td>$47</td>
  </tr>
</table>
</body>
</html>

上面的例子中指定了兩個列的組，第一個包含前2列，第二個包含剩下的1列，并為不同的分組指定了不同的樣式。colgroup的span屬性指定擴展幾列，如果不指定span屬性，也可以指定一個或多個col元素，下面的例子達到了和上面例子一樣的效果。

<html>
<head>
    <style>
        #colgroup1{background-color: red}
        #col3{background-color: green; font-size=small}
    </style>
</head>
<body>
<table width="100%" border="1">
  <colgroup id="colgroup1">
 <col id="col1And2" span="2"/>
 <col id="col3"/>
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>2489604</td>
    <td>My first CSS</td>
    <td>$47</td>
  </tr>
</table>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

標(biāo)簽：泰州林芝大同延邊萍鄉(xiāng) 保定赤峰

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML5表格_動力節(jié)點Java學(xué)院整理》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。