上一節課“表格的基本結構”,我們學習了表格基本結構,下面我們逐步把表格完整的結構學習完。
表格一般都有一個標題,表格標題使用<caption>標簽。表格的標題一般位於整個表格的第1行,一個表格只能含有一個表格標題。
語法:
<table> <caption>表格標題</caption> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>表格標題標簽</title> </head> <body> <table> <caption>考試成績表</caption> <tr> <td>小明</td> <td>80</td> <td>80</td> <td>80</td> </tr> <tr> <td>小紅</td> <td>90</td> <td>90</td> <td>90</td> </tr> <tr> <td>小傑</td> <td>100</td> <td>100</td> <td>100</td> </tr> </table> </body> </html>
在浏覽器預覽效果如下:
說明:
默認情況下,表格是沒有邊框的。我們加入邊框是讓讀者更清楚地看到表格結構。
表格的表頭<th>是<td>單元格的一種變體,它的本質還是一種單元格。它一般位於第一行,用來表明這一行或列的內容類別。表頭有一種默認樣式:浏覽器會以粗體和居中的樣式顯示<th>元素中的內容。
<th>標簽和<td>在本質上都是單元格,但是並不代表這兩種可以互換使用。這兩者根本區別在於語義上。th,即“table header(表頭單元格)”。而td,即“table data cell(單元格)”。當然對於表頭,我們可以用td標簽代替th標簽,但是不建議這樣做,在“HTML中的大誤區”這一節我們詳細說到了HTML學習的目的就是在需要的地方用到正確的語義標簽。
語法:
<table> <caption>表格標題</caption> <tr> <th>表頭單元格1</th> <th>表頭單元格2</th> …… </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>表格表頭標簽</title> </head> <body> <table> <caption>考試成績表</caption> <tr> <th>姓名</th> <th>語文</th> <th>英語</th> <th>數學</th> </tr> <tr> <td>小明</td> <td>80</td> <td>80</td> <td>80</td> </tr> <tr> <td>小紅</td> <td>90</td> <td>90</td> <td>90</td> </tr> <tr> <td>小傑</td> <td>100</td> <td>100</td> <td>100</td> </tr> </table> </body> </html>
在浏覽器預覽效果如下:
分析:
默認情況下,表格是沒有邊框的。我們加入邊框是讓讀者更清楚地看到表格結構。
總結表格結構如下: