網頁

2019/7/15

HTML <table> 表格元素 Table element 簡介

在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)。

必須依照上述的規則擺放,若沒依規則擺放則可能出現非預期的結果。


參考:

沒有留言:

張貼留言