在HTML網頁可使用表格元素(Table elements)<table>來顯示表格。
<table>是所有表格元素的最外層，其餘的表格元素如
<thead>，
<tbody>，
<tr>，
<th>，
<td>等都必須寫在<table>...</table>裡面。
下面是一個簡單的<table>範例。因為<table>及裡面的<th>，<tr>欄位邊界預設為不顯示，所以用CSS調整為solid顯示邊界，並把邊界寬度設為1px。
billboard.html
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border:1px solid
}
</style>
</head>
<body>
<h1>HITO排行榜上週前三名</h1>
<p>統計日期：7月1日~7月7日</p>
<table>
<thead>
<tr>
<th>排名</th>
<th>歌手</th>
<th>歌曲</th>
</tr>
</thead>
<tbody>
<tr>
<td>第一名</td>
<td>MC HotDog熱狗 feat. 艾怡良</td>
<td>怨偶</td>
</tr>
<tr>
<td>第二名</td>
<td>蔡依林</td>
<td>愛的羅曼死</td>
</tr>
<tr>
<td>第三名</td>
<td>Bii畢書盡</td>
<td>IF YOU CATCH ME WHEN I FALL</td>
</tr>
</tbody>
</table>
</body>
</html>
瀏覽器開啟顯示效果如下。
從上面範例可看到表格元素的最外層是<table>，
其次是<thead>與<tbody>；
接著是<tr>；
最後是<th>與<td>。
<thead>及<tbody>上一層必須是<table>。
<thead>必須放在<tbody>之前。
<thead>代表表格的標題區塊；
<tbody>代表表格的內容主體區塊。
<tr>代表表格橫排的一列(row)。上一層可以是<table>，<thead>及<tbody>。
<th>必須放在<thead>中的<tr>...</tr>；
<td>必須放在<tbody>中的<tr>...</tr>。
<th>代表表格標頭(header)的一格(cell)。
<td>代表表格的一格(cell)。
必須依照上述的規則擺放，若沒依規則擺放則可能出現非預期的結果。
參考：
沒有留言:
張貼留言