[HTML/HTML5]8 使用表格

標籤：包括   3.1   屬性   2.4   hit   重複   back   ack   方案   

8.1  建立基本的表格結構

8.1.1  表格結構

　　HTML表格包含4種基本元素：

• table：在HTML中table元素是一個容器，其中包含用於建立表格的其它的元素；
• tr：表示表格中的行，開始標記<tr>和結束</tr>用於包圍該行的儲存格；
• td：表示表格中的資料，在表格中用於包含儲存格實際的內容，開始標記<td>和結束標記</td>用於表示行中的一個儲存格；
• th：表示表格頭，它是一個可選標記，用於代替td標記，th標記用於定義一個包含表格頭資訊的儲存格。

8.1.2  儲存格內容

　　在表格的儲存格中，幾乎可以包含Web頁面能呈現的任何類型的內容。對於指定的儲存格，儲存格的內容應該放在開始標記 <td>和結束標記</td>之間。所有用于格式化內容的標記也應該包含在<td>和</td>標記之間。

　　要在表格中包含無內容的空儲存格，請在儲存格的<td>和</td>標記之間輸入非換行空格（&nbsp;）字元作為其內容，此時儲存格將顯示為空白。

　　預設情況下，每一個儲存格的大小將隨著儲存格內容的多少而變化。在顯示一定數量的字元之後，瀏覽器可能會對內容進行換行（wrap）顯示，即停止在當前行上顯示內容，並從下一行繼續顯示其餘內容。只有當表格碰到頁面的另一個元素，或者達到瀏覽器的邊緣時，才會發生換行的情況。在不同的瀏覽器中，對內容進行換行的預設位置可能會有所不同。

　　（1）儲存格中的文本

　　在每一個儲存格中，都可以使用前面學過的HTML元素來定製儲存格中的文本。例如，可以使用strong元素添加強調，使儲存格中的文本以粗體顯示。

　　如果想使每一個儲存格中的文本都具有相同的特徵，最好的解決方案是使用樣式表並將td標記作為選取器。

　　（2）儲存格中的映像

　　對於HTML表格，還可以在其儲存格中添加映像。只需在想顯示映像的儲存格中使用img元素添加對映像的引用即可。

8.2  格式化Web頁面中的表格

8.2.1  邊框和外邊距

　　根據表格的設計，本質上它具有內邊框和外邊框。預設情況下，絕大多數瀏覽器將邊框跨度設定為0，從而使邊框看不見。但是，對於統計資訊的表格，邊框非常有用。例如，人們需要看到不同的列，才能更好地理解表格中的資料。在表格中使用邊框的關鍵，在於理解與它有關的三個屬性。

　　（1）table標記的border屬性

　　即使最終想使表格的邊框不可見，但在建立表格時，查看錶格組成情況的一個好辦法，就是暫時開啟所有的表格邊框。只需在<table>標記中添加border屬性，並將其設定為1即可。

1 <table border="1">

　　（2）樣式表中的border屬性

　　還可以在樣式表中使用border屬性來定義表格邊框的樣式，包括border-width、border-style、border-color屬性。當需要消除或定製儲存格之間的間距時，border-collapse和border-spacing屬性將非常有用。border-collapse屬性可以按照以下兩種方式使用：

• border-collapse：collapse   關閉儲存格邊框之間的所有邊距
• border-collapse：seperate  保持儲存格邊框之間的間距

　　當把border-collapse屬性設定為seperate時，可以繼續使用border-spacing屬性精確指定儲存格之間應該包含多少間距：

1 table {border-collapse:seperate; border-spacing:10px 5px;}

　　（3）間距屬性

　　在樣式表中還可以使用padding屬性和margin屬性來定義圍繞儲存格四周的間距。注意，整個表格既可以使用padding屬性也可以使用margin屬性來定義樣式，但對於單個儲存格只能使用padding屬性，不能使用margin屬性。

8.2.2  寬度和高度

　　當在頁面中添加表格時，使用樣式表屬性width和height來定義表格的尺寸。如果沒有聲明表格的尺寸，瀏覽器將根據每一個儲存格中內容的數量以及在瀏覽器視窗中可用空間的大小來確定表格的尺寸，這可能會使表格的顯示與預期不相符。

　　在本例中，將表格的寬度和高度定義為絕對尺寸，這樣一來當瀏覽器視窗變大或縮小時，該表格的尺寸都不會發生改變。

1 table {width: 200px; height: 200px; border: 3px solid black;}

　　另一個方面，如果不關心表格的精確尺寸，但希望表格只佔瀏覽器視窗50%的空間，而不會超出這個比例，那麼可以使用百分比來定義表格的width和height屬性：

1 table {width: 50%; height: 50%; border: 3px solid black;}

8.2.3  基本對齊

　　可以使用float屬性使圖片或表格與周圍文本的左側或右側對齊，如果頁面中只有一個表格，就可以使用table元素作為選取器。

1 table {float: right;}

8.2.4  表格的顏色

　　要改變整個表格的背景顏色，使用table標記作為選取器並在樣式表中添加background-color屬性即可。

1 table {background-color: yellow;}

8.2.5  表格的背景映像

　　可以將background-image屬性添加到樣式表中，以便將一幅映像作為整個表格的背景。當把background-image屬性應用於表格時，它的工作原理與將其應用於其他Web頁面對象是一樣的。即背景映像將自動地從左至右、自上而下地重複進行填充。 如果需要，也可以利用之前學過的其它背景屬性改變重複填充的選項（如background-repeat和background-attachment屬性）。

1 table {background-image: url(‘e://Image/test.png‘);}

8.2.6  表格的標題

　　caption元素用於為表格指定標題，它並不是table元素的一個屬性，而是一個獨立的元素。caption元素用在表格的開始標記<table>之後、第一個表格行<tr>標記之前。caption元素的開始標記<caption>和結束標記</caption>，用於包圍作為表格標題的文本。預設情況下，表格標題將對齊表格頂部並置中顯示。要改變表格標題的對齊，可以使用以下兩個CSS屬性：

• text-align：用於定義標題文本是靠左對齊、靠右對齊，還是置中對齊，無論表格標題放在表格的哪一邊；
• caption-side：用於指定將表格標題放在表格的哪一邊（top、right、bottom或left）。

1 caption {text-align: right; caption-side:bottom;}

8.3  格式化表格儲存格中的內容

　　除了可以定義整個表格的樣式之外，還可以為表格中每一個儲存格分別定義樣式。可以改變儲存格的對齊、寬度、高度和背景顏色，還可以限制儲存格中的換行、使儲存格中的內容跨越多行或多列。

8.3.1  對齊

　　要改變垂直或水平對齊，可以在tr、th或td標記中添加text-align屬性以設定水平對齊，添加vertical-align屬性以設定垂直對齊。

• tr：在<tr>標記中添加text-align屬性或vertical-align屬性，所指定的對齊將對該行中的所有儲存格有效；
• td、th：在<td>或<th>標記中添加text-align屬性或vertical-align屬性，所指定的對齊僅對該儲存格有效。

　　如果想對每一列中的儲存格定義一種不同的對齊，可以先建立三個CSS類：

1 .left {text-align: left; vertical-align: top;}2 .right {text-align: right; vertical:bottom;}3 .center{text-align: center; vertical:middle;}

8.3.2  寬度和高度

　　在table標記中，使用width和height屬性來標識整個表格的尺寸。在td或th標記中也可以添加width和height屬性，以便指定各個儲存格的尺寸。

　　如果無論瀏覽器視窗的尺寸是多少，都希望所三列具有相同的寬度，則可以在樣式表中將th標記的width屬性定義為整個表格寬度的三分之一：

1 th {width: 33%;}

 8.3.3  儲存格的內邊距

　　雖然表格的儲存格沒有margin屬性，但儲存格具有padding屬性。如果想在儲存格內容的四周保留一定的緩衝區域（內邊距），只需將padding屬性添加到樣式表中即可。

1 td {padding: 10px;}

8.3.4  儲存格的顏色

　　在表格的樣式表中添加background-color屬性，就可以改變整個表格的顏色。在tr、td或th中使用background-color屬性，可以指定一行或者一個儲存格的背景顏色。

1 tr {background-color: green;}

8.3.5  禁止換行

　　有時希望儲存格中的內容保持為單行，即中間沒有換行。在這種情況下，可以使用white-space屬性並將該屬性的值設定為“nowrap”，以告訴瀏覽器儘可能地將該儲存格中的內容保持為一行（這並不總是可能，如果瀏覽器視窗非常小就會導致內容無法顯示在單行上）。使儲存格不換行的樣式定義如下：

1 td {white-space: nowrap;}

8.3.6  使儲存格跨越多列

　　到目前為止，所學習的表格都是網狀格（grit-like）的表格，其中每一行和每一列中都具有相同數量的儲存格。雖然這隻是預設情況，但是可以在td或th的開始標記中添加屬性，使儲存格與其它與之相鄰的儲存格進行合并。

　　預設情況下，每一個儲存格只能跨越一列。使用colspan屬性可以改變預設設定，使一個儲存格可以跨越兩列或多列。

1 <td colspan="2">Hello,world</td>

 　　不僅可以合併儲存格使之跨越兩列或多列，還可以合併儲存格使之跨越兩行或多行。用以實現儲存格跨越多行的屬性是rowspan。

1 <td rowspan="2">Hello,world</td>

8.4  格式化表格的其它技術

8.4.1  行分組

　　在表格中對行進行分組時，以下三個標記特別有用：

• thead：表格頭
• tfoot：表格註腳
• tbody：表格主體

　　在建立表格時使用這三個標記，瀏覽器就可以對錶格頭、表格腳註資訊和表格主體資訊進行區分。使用這三個標記的好處是：當使用者查看一個包含較長表格的頁面時，表格頭資訊會在每一頁（或每一屏視圖）的頂部重複顯示，列印表格時也是如此。這有助於避免出現在較長的表格中看不到表頭的情況。

　　雖然這三個標記並不是必需的，但是在使用這三個標記時，每一個標記中至少應該包含一個用tr標記定義的表格行。此外，如果在表格的定義中包含一個thead或tfoot（或者二者皆有），就必須包含至少一個tbody標記。

 1 <table border="1"> 2     <thead> 3         <tr> 4             <th>Age</th> 5             <th>Height</th> 6             <th>Weight</th> 7         </tr> 8     </thead> 9     <tfoot>10         <tr>11             <td colspan="3">Data Taken from the Corinna Research Society</td>12         </tr>13     </tfoot>14     <tbody>15         <tr>16             <td>Birth</td>17             <td>19.5 inches</td>18             <td>7 lbs. 9 oz.</td>19         </tr>20     </tbody>21 </table>

　　使用這三個標記的另外一個好處，就是使表格樣式的定義更加容易。假如想把表格中的資料行為定義為一種樣式，把表格頭部定義為另一種樣式，再把表格註腳定義為其它樣式。只要在建立表格結構時使用thead、tbody和tfoot標記進行分組，只需在樣式中引用這三個標記就可以為表頭、表格主體和表格註腳分別定義不同的樣式。

1 body {font-family: verdanna;}2 thead {background-color: black; color: white;}3 tbody {background-color: #ccc;}4 tfoot {font-size: 10pt; font-style: italic;}

8.4.2  列分組

　　採用類似的辦法，可以使用colgroup元素和col元素對列進行分組。理解這些標記的瀏覽器可以用遞增方式呈現表格，而不是一次性呈現全部表格。這樣一來就可以更快地載入較長的表格。另外，使用colgroup元素對列進行分組後，可以對整個列組應用樣式定義和特徵定義，而不必對每一列分別進行設定。

　　<colgroup>和</colgroup>標記將一列或多列定義為一個列組，並且可以定義這些列的呈現樣式。在樣式表中可以使用colgroup標記作為選取器，將列組中所有的列都定義為相同的樣式。還可以在colgroup標記中添加span屬性，告訴瀏覽器該列組中包含多少行。

1 <table border="1">2 <colgroup span="5" id="group1"></colgroup>3 <colgroup span="2" ic="group2"></colgroup>4 <tr>5     <td>

[HTML/HTML5]8 使用表格