HTML<tr> 元素 指定包含在內(nèi)部的標(biāo)記<tr>塊包括一個(gè)表，在其內(nèi)部的一列<th>和<td>元素創(chuàng)建報(bào)頭和數(shù)據(jù)單元，分別是行內(nèi)。每個(gè)單元格放置在自己的列中; 所述用戶代理將按照特定的規(guī)則，以確定如何在每行中的單元被置于列與那些從其它行的到來。

為了提供對(duì)單元格如何適合（或跨越）列的附加控制，<th>并<td>支持該colspan屬性，使您可以指定單元格的寬度應(yīng)為多少，默認(rèn)值為1.同樣，可以使用rowspan單元格上的屬性以表明他們應(yīng)該跨越多個(gè)表格行。

這可能需要一些練習(xí)，以便在建立表格時(shí)正確使用。我們?cè)谙旅嬗幸恍├?，但是更多的例子和深入的教程，?qǐng)參閱我們的學(xué)習(xí)Web開發(fā)領(lǐng)域的HTML表格系列，在這里你將學(xué)習(xí)如何使用表格元素及其屬性來獲得正確的布局和格式化您的表格數(shù)據(jù)。

屬性

這個(gè)元素包括全局屬性以及下面的屬性。還有幾個(gè)被棄用的屬性，你應(yīng)該避免，但是在閱讀舊代碼時(shí)可能需要知道。

cells只讀只讀HTMLCollection對(duì)象，其中包含行內(nèi)單元格元素的列表。此集合中的每個(gè)項(xiàng)目都是<td>元素或<th>元素。

rowIndex只讀一個(gè)只讀的帶符號(hào)長整數(shù)，指定<tr>從零開始的偏移到包含<table>元素的列表中rows。值為-1表示該行當(dāng)前不是表的成員。

sectionRowIndex只讀一個(gè)只讀的帶符號(hào)長整數(shù)，指定它<tr>在表格部分rows列表中的偏移量。如果此元素不在表格部分中，則值為-1。表部分是報(bào)頭，主體和如使用指定的頁腳<thead>，<tbody>和<tfoot>。

一個(gè)元素可以和通常有兩個(gè)非負(fù)值rowIndex和colIndex，因?yàn)檫@是一個(gè)表的一部分的任何行會(huì)里其中一個(gè)部分，甚至在一個(gè)簡單的表不明確使用<tbody>; 這是因?yàn)闉g覽器會(huì)自動(dòng)添加一個(gè)<tbody>元素，如果缺少。

方法

這個(gè)元素支持在HTMLElement所有HTML元素派生的接口上定義的所有方法。另外，它支持以下方法：

deleteCell()從行的cells集合中刪除指定數(shù)字索引處的單元格。

insertCell()創(chuàng)建一個(gè)新<td>元素并將其插入到表格的單元格列表中。您可以選擇指定單元格列表中要插入單元格的偏移量，但值為-1（默認(rèn)值）表示“在行末尾”。

過時(shí)的屬性

以下屬性仍然可以在瀏覽器中實(shí)現(xiàn)，但不再是HTML規(guī)范的一部分，可能會(huì)丟失，也可能無法正常工作。他們應(yīng)該避免。

align 由于HTML5 A DOMString已經(jīng)過時(shí)，它指定了單元格的上下文應(yīng)該如何在行中的單元格內(nèi)水平對(duì)齊; 這是align在行中的每個(gè)單元格上單獨(dú)使用的簡寫。可能的值是：left將每個(gè)單元格的內(nèi)容對(duì)齊左邊緣。

center將每個(gè)單元格的內(nèi)容置于左右邊緣之間。

right將每個(gè)單元格的內(nèi)容與其右邊緣對(duì)齊。

justify在每個(gè)單元格的文本內(nèi)擴(kuò)展空格，以便文本填充每個(gè)單元格的全部寬度（完全對(duì)齊）。

char將行中的每個(gè)單元格與特定字符對(duì)齊（例如，以這種方式配置的列中的每一行將水平對(duì)齊該字符上的單元格）。

這使用char和charoff建立對(duì)齊字符（對(duì)齊數(shù)字?jǐn)?shù)據(jù)時(shí)通常使用“?！被颉?，”）和對(duì)齊字符后面的字符數(shù)。這種對(duì)齊類型從來沒有廣泛的支持。

如果沒有明確設(shè)置align值，則繼承父節(jié)點(diǎn)的值。

而不是使用過時(shí)的align屬性，則應(yīng)該使用的CSS text-align屬性來建立left，center，right，或justify該行的細(xì)胞排列。要應(yīng)用基于字符的對(duì)齊，請(qǐng)將CSS text-align屬性設(shè)置為對(duì)齊字符（如"."或","）。

bgcolor自HTML5以來已過時(shí)

一個(gè)DOMString指定的顏色應(yīng)用到各行的細(xì)胞的背景。這可以是一個(gè)十六進(jìn)制#RRGGBB或#RGB值（https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb（％29））或一個(gè)顏色關(guān)鍵字。忽略該屬性或?qū)⑵湓O(shè)置為nullJavaScript導(dǎo)致行的單元格繼承行的父元素的背景顏色。

該<tr>元素應(yīng)該使用CSS風(fēng)格。為了提供與bgcolor屬性類似的效果，請(qǐng)使用CSS屬性background-color。

char自HTML5以來已過時(shí)

A DOMString設(shè)置字符對(duì)齊每行的列中的單元格（使用相同字符的每一行的居中使用相同的字符與其他字符對(duì)齊，典型的值包括period（"."）或逗號(hào)（","），當(dāng)試圖對(duì)齊數(shù)字或貨幣值，如果align未設(shè)置char，則忽略此屬性。

這個(gè)屬性不僅是過時(shí)的，而且很少實(shí)現(xiàn)。要達(dá)到與char屬性相同的效果，請(qǐng)將CSS text-align屬性設(shè)置為您要為char屬性指定的相同字符串，例如text align: "."。

charoff自HTML5以來已過時(shí)

DOMString應(yīng)該由指定的對(duì)齊字符之后顯示在該列的數(shù)據(jù)的尾端的字符指示數(shù)char屬性。例如，對(duì)于使用一個(gè)單元，以百分之貨幣顯示貨幣值時(shí)（如美元，其被劃分為100分）中，一般會(huì)指定為2的值，使得在與串聯(lián)char被設(shè)置為"."，在值一列將小數(shù)點(diǎn)完全對(duì)齊，分?jǐn)?shù)正確顯示在小數(shù)點(diǎn)右側(cè)。

這個(gè)屬性已經(jīng)過時(shí)了，而且從來沒有得到廣泛的支持。

valign自HTML5以來已過時(shí)

DOMString指定行中的每個(gè)單元內(nèi)的文本的垂直對(duì)齊。這個(gè)屬性的可能值是：

baseline將每個(gè)單元格的內(nèi)容文本盡可能地與單元格底部對(duì)齊，通過沿行中使用的字體的基線對(duì)齊字符來處理不同字體和字體大小的對(duì)齊。如果該行中的所有字符都是相同的大小，效果是一樣的bottom。

bottom，將每行的單元格中的文本盡可能靠近這些單元格的底部邊緣繪制。

middle每個(gè)單元格的文本都是垂直居中。

top每個(gè)單元格的文本盡可能地繪制到包含單元格的頂部邊緣。

不要使用過時(shí)的valign屬性。相反，將CSS vertical-align屬性添加到該行。

例子

見<table>例子<tr>。

基本的例子

這個(gè)簡單的例子顯示了一張表格，列出了人們的姓名以及有關(guān)俱樂部或服務(wù)的會(huì)員資格的各種信息。

HTML

這個(gè)HTML演示了一個(gè)表的最基本的結(jié)構(gòu)。沒有組，沒有跨越多行或多列的單元格，沒有標(biāo)題，只有最基本的樣式才能在表格組件周圍創(chuàng)建線條，以便看起來清晰。

只有四行（包括一個(gè)標(biāo)題行），每行有四個(gè)列（包括一個(gè)標(biāo)題列）。甚至不使用表格部分元素; 相反，瀏覽器可以自動(dòng)確定。我們將增加<thead>，<tbody>以及<tfoot>在未來的例子。

<table>  
    <tr>    
        <th>Name</th>    
        <th>ID</th>    
        <th>Member Since</th>    
        <th>Balance</th>  
    </tr>  
    <tr>    
        <td>Margaret Nguyen</td>    
        <td>427311</td>    
        <td><time datetime="2010-06-03">June 3, 2010</time></td>    
        <td>0.00</td>  
    </tr>  
    <tr>    
        <td>Edvard Galinski</td>    
        <td>533175</td>    
        <td><time datetime="2011-01013">January 13, 2011</time></td>    
        <td>37.00</td>  
    </tr>  
    <tr>    
        <td>Hoshi Nakamura</td>    
        <td>601942</td>    
        <td><time datetime="2012-07-23">July 23, 2012</time></td>    
        <td>15.00</td>  
    </tr>
</table>

CSS

這個(gè)簡單的CSS只是在表格周圍和每個(gè)單元格周圍增加了一個(gè)黑色邊框，包括使用<th>和指定的單元格<td>。這樣，標(biāo)題和數(shù)據(jù)單元就很容易劃分。

table {
  border: 1px solid black;}th, td {
  border: 1px solid black;}

Result

行和列跨越

現(xiàn)在，讓我們介紹另一列，顯示用戶的成員資格結(jié)束的日期，以及超過稱為“成員日期”的“加入”和“取消”日期超級(jí)標(biāo)題。這涉及將行和列跨度添加到表格，以便標(biāo)題單元格可以在正確的位置。

Result

我們先來看看這個(gè)輸出：

注意這里的標(biāo)題區(qū)域?qū)嶋H上是兩行，一個(gè)是“Name”，“ID”，“Membership Dates”和“Balance”標(biāo)題，另一個(gè)是“Joined”和“Cancelled”，它們是下面的子標(biāo)題“會(huì)員日期”。這是通過：

• 具有第一行的“名稱”，“標(biāo)識(shí)”和“平衡”標(biāo)題單元格使用該rowspan屬性跨兩行，使它們每個(gè)都是兩行高。

• 具有第一行的“成員日期”標(biāo)題單元格使用該colspan屬性跨兩列，這導(dǎo)致此標(biāo)題實(shí)際上是兩列寬。

• 擁有<th>僅包含“已加入”和“已取消”標(biāo)題的第二行元素。由于其他列已被第一行單元占據(jù)，所以這些列在“成員日期”標(biāo)題下正確定位。

HTML

HTML與前面的例子類似，除了在每個(gè)數(shù)據(jù)行中添加新列以及對(duì)標(biāo)題的更改。這些更改使HTML看起來像這樣：

<table>  
    <tr>    
        <th rowspan="2">Name</th>    
        <th rowspan="2">ID</th>    
        <th colspan="2">Membership Dates</th>    
        <th rowspan="2">Balance</th>  
    </tr>  
    <tr>    
        <th>Joined</th>    
        <th>Canceled</th>  
    </tr>  
    <tr>    
        <td>Margaret Nguyen</td>    
        <td>427311</td>    
        <td><time datetime="2010-06-03">June 3, 2010</time></td>    
        <td>n/a</td>    
        <td>0.00</td>  
    </tr>  
    <tr>    
        <td>Edvard Galinski</td>    
        <td>533175</td>    
        <td><time datetime="2011-01013">January 13, 2011</time></td>    
        <td><time datetime="2017-04008">April 8, 2017</time></td>    
        <td>37.00</td>  
    </tr>  
    <tr>    
        <td>Hoshi Nakamura</td>    
        <td>601942</td>    
        <td><time datetime="2012-07-23">July 23, 2012</time></td>    
        <td>n/a</td>    
        <td>15.00</td>  
    </tr>
</table>

為了討論行和列跨度，這里的重要區(qū)別在上面代碼的前幾行。請(qǐng)注意使用rowspanon來使“名稱”，“ID”和“平衡”標(biāo)題占用兩行而不是一行，并且使用“ colspan使成員日期”標(biāo)題單元跨越兩列。

CSS從之前沒有變化。

明確指定表格內(nèi)容組

在真正進(jìn)入樣式表之前，讓我們花點(diǎn)時(shí)間添加行和列組，以幫助我們簡化CSS。

HTML

HTML就是這里的動(dòng)作，而且動(dòng)作非常簡單。

<table>  
    <thead>    
        <tr>      
            <th rowspan="2">Name</th>      
            <th rowspan="2">ID</th>      
            <th colspan="2">Membership Dates</th>      
            <th rowspan="2">Balance</th>    
        </tr>    
        <tr>      
            <th>Joined</th>      
            <th>Canceled</th>    
        </tr>  
    </thead>  
    <tbody>    
        <tr>      
            <td scope="rowgroup">Margaret Nguyen</td>      
            <td>427311</td>      
            <td><time datetime="2010-06-03">June 3, 2010</time></td>      
            <td>n/a</td>      
            <td>0.00</td>    
        </tr>    
        <tr>      
            <td scope="rowgroup">Edvard Galinski</td>      
            <td>533175</td>      
            <td><time datetime="2011-01013">January 13, 2011</time></td>      
            <td><time datetime="2017-04008">April 8, 2017</time></td>      
            <td>37.00</td>    
        </tr>    
        <tr>      
            <td scope="rowgroup">Hoshi Nakamura</td>      
            <td>601942</td>      
            <td><time datetime="2012-07-23">July 23, 2012</time></td>      
            <td>n/a</td>      
            <td>15.00</td>    
        </tr>  
    </tbody>
</table>

為了討論行和列跨度，這里的重要區(qū)別在上面代碼的前幾行。請(qǐng)注意使用rowspanon來使“名稱”，“ID”和“平衡”標(biāo)題占用兩行而不是一行，并且使用“ colspan使成員日期”標(biāo)題單元跨越兩列。

我們?cè)僖淮螞]有觸及CSS。

Result

輸出完全不變，盡管下面增加了有用的上下文信息：

基本的造型

與表格的所有部分一樣，您可以使用CSS更改表格行及其內(nèi)容的外觀。應(yīng)用于<tr>元素的任何樣式都將影響行內(nèi)的單元格，除非被應(yīng)用于這些單元格的樣式重寫。

讓我們將一個(gè)基本樣式應(yīng)用到表中，以調(diào)整正在使用的字體，并為標(biāo)題行添加背景顏色。

Result

再次，讓我們先看看結(jié)果。

CSS

這次HTML不變，所以讓我們直接進(jìn)入CSS。

table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;}thead > tr {
  background-color: rgb(228, 240, 245);}th, td {
  border: 1px solid black;
  padding:4px 6px;}

雖然我們font在<table>這里添加一個(gè)屬性來設(shè)置一個(gè)更具視覺吸引力的字體（或一個(gè)可惡的無襯線字體，這取決于你的個(gè)人意見），有趣的部分是這里的第二種風(fēng)格，我們風(fēng)格<tr>元素位于<thead>所以他們有一個(gè)淡藍(lán)色的背景顏色。這是一種快速將背景色應(yīng)用于標(biāo)題區(qū)域中的所有單元格的方法。

這并沒有影響到的風(fēng)格<th>元素在第一列，不過，在這里我們把成員名稱作為行標(biāo)題。

先進(jìn)的造型

現(xiàn)在我們將全力以赴，包括標(biāo)題和正文區(qū)域中的行，包括交替的行顏色，取決于行內(nèi)位置的不同顏色的單元格等等。

Result

以下是最后的外觀：

再次沒有HTML改變?？纯茨愕腍TML可以為你做什么適當(dāng)?shù)臏?zhǔn)備？

CSS

CSS這次涉及更多。這并不復(fù)雜，但還有很多事情要做。我們來分解一下。

表格和基礎(chǔ)樣式

table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
  border-spacing: 0;
  border-collapse: collapse;}

Here we've added the border-spacing and border-collapse properties to eliminate spacing between cells and collapse borders that touch one another to be a single border instead of winding up with double borders.

th, td {
  border: 1px solid black;
  padding:4px 6px;}th {
  vertical-align: bottom;}

這里是所有表格單元格的默認(rèn)樣式?，F(xiàn)在我們來定制！

頂部標(biāo)題：總體

我們將看兩個(gè)頂部的標(biāo)題。首先，標(biāo)題的整體造型：

thead > tr {
  background-color: rgb(228, 240, 245);}thead > tr:nth-of-type(2) {
  border-bottom: 2px solid black;}

這將設(shè)置<tr>表格標(biāo)題中所有元素的背景顏色（如使用指定的那樣<thead>）。然后我們將頂部標(biāo)題的底部邊框設(shè)置為一個(gè)兩像素寬的線。但是，請(qǐng)注意，我們正在使用:nth-of-type選擇器應(yīng)用于標(biāo)題中border-bottom的第二行。為什么？因?yàn)闃?biāo)題是由一些單元格跨越的兩行組成的。那意味著那里實(shí)際上有兩排 將樣式應(yīng)用到第一行不會(huì)給我們預(yù)期的結(jié)果。

“加入”和“取消”標(biāo)題

讓我們用綠色和紅色的色調(diào)來設(shè)計(jì)這兩個(gè)標(biāo)題單元，以表示新成員的“好”和取消成員資格的“無賴”。

thead > tr:last-of-type > th:nth-of-type(1) {
  background-color: rgb(225, 255, 225);}thead > tr:last-of-type > th:nth-of-type(2) {
  background-color: rgb(255, 225, 225);}

在這里，我們深入到表格標(biāo)題欄的最后一行，并給它的第一個(gè)標(biāo)題單元格（“Joined”標(biāo)題）一個(gè)綠色，第二個(gè)標(biāo)題單元格（“Canceled”標(biāo)題）一個(gè)微紅的色調(diào)。

以不同的顏色為每個(gè)body的其他行填色

通過交替排列顏色來提高表格數(shù)據(jù)的可讀性是很常見的。讓我們?yōu)槊恳粋€(gè)偶數(shù)行添加一點(diǎn)顏色：

tbody > tr:nth-of-type(even) {
  background-color: rgb(237, 238, 242);}

給左側(cè)的標(biāo)題一些風(fēng)格

Since we want the first column to stand out as well, we'll add some custom styling here, too.

tbody > tr > th:first-of-type {
  text-align: left;
  background-color: rgb(225, 229, 244);}

這種方式使表格正文的每一行中的第一個(gè)標(biāo)題單元格與text-align左對(duì)齊的成員名稱，并具有不同的背景顏色。

調(diào)整對(duì)齊

Finally, since it's standard practice to right-justify currency values in tables, let's do that here.

tbody > tr > td:last-of-type {
  text-align:right;}

這只是將每個(gè)正文行中text-align的最后一個(gè)的CSS 屬性設(shè)置<td>為"right"。

元素屬性

規(guī)范

瀏覽器兼容性