HTML 表格

表格由 <table> 標簽來定義。每個表格均有若幹行（由 <tr> 標簽定義），每行被分割為若幹單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

表格實例

<table border="1">
    <tr>
        <td>語文</td>
        <td>數學</td>
        <td>外語</td>
    </tr>
    <tr>
        <td>語文</td>
        <td>數學</td>
        <td>外語</td>
    </tr>
</table>

　顯示如下：

HTML 表格和邊框屬性

<table border="1">

HTML 表格表頭

表格的表頭使用 <th> 標簽進行定義。

大多數瀏覽器會把表頭顯示為粗體居中的文本：

    <tr>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>

<table border="1">
    <tr>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    <tr>
        <td>語文</td>
        <td>數學</td>
        <td>外語</td>
        <td>歷史</td>
        <td>物理</td>
    </tr>
    <tr>
        <td>語文</td>
        <td>數學</td>
        <td>外語</td>
        <td>化學</td>
        <td>生物</td>
    </tr>
</table>

實例：

沒有邊框的表格

<table>
     <tr>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    <tr>
        <td>語文</td>
        <td>數學</td>
        <td>外語</td>
        <td>歷史</td>
        <td>物理</td>
    </tr>
    <tr>
        <td>語文</td>
        <td>數學</td>
        <td>外語</td>
        <td>化學</td>
        <td>生物</td>
    </tr>
</table>

帶有標題的表格

<table border="1">
    <caption>課程表</caption>
    <tr>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    <tr>
        <td>語文</td>
        <td>數學</td>
        <td>外語</td>
        <td>歷史</td>
        <td>物理</td>
    </tr>
    <tr>
        <td>語文</td>
        <td>數學</td>
        <td>外語</td>
        <td>化學</td>
        <td>生物</td>
    </tr>
</table>

單元格合並

<div class="table">
    <table border="1" cellpadding="0">
    <!--表格頭-->
        <thead>
        <!--表格行-->
            <tr>
                <th>時間</th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>

        </thead>
        <tbody>
            <!--表格行-->
            <tr>
                <!--跨行合並-->
                <td rowspan="3">上午</td>
                <td>語文</td>
                <td>數學</td>
                <td>外語</td>
                <td>歷史</td>
                <td>物理</td>
            </tr>
            <tr>
                <td>語文</td>
                <td>數學</td>
                <td>外語</td>
                <td>化學</td>
                <td>生物</td>
            </tr>
            <tr>
                <td>語文</td>
                <td>數學</td>
                <td>外語</td>
                <td>化學</td>
                <td>生物</td>
            </tr>
            <tr>
                <td rowspan="2">下午</td>
                <td>語文</td>
                <td>數學</td>
                <td>外語</td>
                <td>化學</td>
                <td>生物</td>
            </tr>
            <tr>
                <td>語文</td>
                <td>數學</td>
                <td>外語</td>
                <td>化學</td>
                <td>生物</td>
            </tr>
        </tbody>
        <!--表格底部-->
        <tfoot>
            <tr>
                <!--跨列合並-->
                <td colspan="6">課程表</td>
            </tr>
        </tfoot>


</table>

</div>

單元格邊距：

<h4>沒有單元格邊距：</h4>
<table border="1">
    <tr>

        <td>語文</td>
        <td>數學</td>

    </tr>
</table>

<h4>有單元格邊距：</h4>
<table border="1" cellpadding="10">
    <tr>

        <td>語文</td>
        <td>數學</td>

    </tr>

HTML 表格標簽

前端開發：HTML-表格