HTML-Table

Posted on Edited on In Views: Disqus:

 

一、border-collapse屬性：可用來設定Table邊框樣式，

其值可為collapse(單線)或separate(雙線)。

例如：Table的屬性border-collapse:collapse;，而separate為預設值

Jill Smith 50
Eve Jackson 94
John Doe 80 
<!DOCTYPEhtml>
<html>
<head>
    <style>
        table, th, td {
            border: 1px solid;
            border-collapse: separate;
        }
    </style>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
            </tr>
            <tr>
                <td>Eve</td>
                <td>Jackson</td>
                <td>94</td>
            </tr>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 

二、Table裡可包含<th>Tag，表示一的Table裡的Head

例如：

<!DOCTYPEhtml>
<html>
<head>
    <style>
        table, th, td {
            border: 1px solid;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>number</th>
            <th>Firstname</th>
            <th>Lastname</th>
        </tr>
        <tr>
            <th>1</th>
            <td>Lastname</td>
            <td>Points</td>
        </tr>
        <tr>
            <th>2</th>
            <td>Lastname</td>
            <td>Points</td>
        </tr>
    </table>
</body>
</html>
number Firstname Lastname
1 Lastname Points
2 Lastname Points

 

三、<caption> Tag必須接在<Table>後面

例如：

Month Savings
January $100
February $50
Monthly savings 
<table>
    <caption>Monthly savings</caption>
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$50</td>
    </tr>
</table>

 

四、<td>與<tr>的rowspan或colspan屬性

Cell that spans two columns:

Name Telephone
Bill Gates 555 77 854 555 77 855

Cell that spans two rows:

First Name: Bill Gates
Telephone: 555 77 854
555 77 855 
<h3>Cell that spans two columns:</h3>
<table>
    <tr>
        <th>Name</th>
        <th colspan="2">Telephone</th>
    </tr>
    <tr>
        <td>Bill Gates</td>
        <td>555 77 854</td>
        <td>555 77 855</td>
    </tr>
</table>

<h3>Cell that spans two rows:</h3>
<table>
    <tr>
        <th>First Name:</th>
        <td>Bill Gates</td>
    </tr>
    <tr>
        <th rowspan="2">Telephone:</th>
        <td>555 77 854</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
</table>

 

五、Tags inside a table

This is a paragraph

This is another paragraph

 This cell contains a table:
A B
C D
This cell contains a list
  • apples
  • bananas
  • pineapples
 HELLO
 

 

六、<thead>與<tbody>與<tfoot>Tag

通常出現在<Table>裡面

<thead>固定出現在Table的表頭，<tbody>用來Table的Content，<tfoot>固定出現在表尾

例如：

Month Savings
January $100
February $80
Sum $180 
<table>
    <thead>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Sum</td>
            <td>$180</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$80</td>
        </tr>
    </tbody>
</table>

 

七、<col>、<colgroup>、span屬性

對table的每一列個別指定樣式很容易，例如：

<tr style="background-color:red"></tr>

但是對table的每一行個別指定樣式，則只能利用<col>、<colgroup>、span屬性，

其用法如下範例，範例裡的兩個例子效果都是一樣的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <table>
        <colgroup span="2" style="background-color:red"></colgroup>
        <colgroup span="1" style="background-color:yellow"></colgroup>
        <tr>
            <th>ISBN</th>
            <th>Title</th>
            <th>Price</th>
        </tr>
        <tr>
            <td>3476896</td>
            <td>My first HTML</td>
            <td>$53</td>
        </tr>
        <tr>
            <td>5869207</td>
            <td>My first CSS</td>
            <td>$49</td>
        </tr>
    </table>

    <table>
        <colgroup>
            <col span="2" style="background-color:red">
            <col span="1" style="background-color:yellow">
        </colgroup>
        <tr>
            <th>ISBN</th>
            <th>Title</th>
            <th>Price</th>
        </tr>
        <tr>
            <td>3476896</td>
            <td>My first HTML</td>
            <td>$53</td>
        </tr>
        <tr>
            <td>5869207</td>
            <td>My first CSS</td>
            <td>$49</td>
        </tr>
    </table>
</body>
</html>

 

參考資料：

HTML Tables