使用HTML5製作表格，是特別容易的事情，下面介紹一下製作方法。

1、HTML5表格的主要元素：

HTML5的表格包括table、caption、tr、td、th五個主要元素：

table元素：定義一個表格；

caption元素：定義表格的標題；

tr元素：定義表格的一行，tr是table row的縮寫；

td元素：定義表格單元，td是table data的縮寫；

th元素：定義表頭，th是table head的縮寫。

2、製作一個簡單的表格

下面這個HTML文檔，制定了一個學生常用的課表：

<!DOCTYPE html>
<html>
    <head>
        <title>table001</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <table>
            <tr>
                <th>節次</th>
                <th>周一</th>
                <th>周二</th>
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
            </tr>
            <tr>
                <td>第1節課</td>
                <td>語文</td>
                <td>語文</td>
                <td>英語</td>
                <td>英語</td>
                <td>語文</td>
            </tr>
            <tr>
                <td>第2節課</td>
                <td>語文</td>
                <td>數學</td>
                <td>數學</td>
                <td>英語</td>
                <td>數學</td>
            </tr>
            <tr>
                <td>第3節課</td>
                <td>英語</td>
                <td>數學</td>
                <td>物理</td>
                <td>化學</td>
                <td>物理</td>
            </tr>
            <tr>
                <td>第4節課</td>
                <td>英語</td>
                <td>政治</td>
                <td>地理</td>
                <td>物理</td>
                <td>政治</td>
            </tr>
            <tr>
                <td>第5節課</td>
                <td>數學</td>
                <td>生物</td>
                <td>信息</td>
                <td>數學</td>
                <td>化學</td>
            </tr>
            <tr>
                <td>第6節課</td>
                <td>體育</td>
                <td>化學</td>
                <td>語文</td>
                <td>語文</td>
                <td>美術</td>
            </tr>
            <tr>
                <td>第7節課</td>
                <td>社團活動</td>
                <td>社團活動</td>
                <td>社團活動</td>
                <td>社團活動</td>
                <td>社團活動</td>
            </tr>
        </table>
    </body>
</html>

使用瀏覽器打開這個文檔時，效果如下：

這個表格一點都不好看，因為沒有表格線。

3、給<table>元素設置border屬性的值，為表格加上表格線。

對HTML文檔進行修改，設置<table>元素的border值為1，修改後的HTML文檔為：

<!DOCTYPE html>
<html>
    <head>
        <title>table002</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <table border="1">
            <tr>
                <th>節次</th>
                <th>周一</th>
                <th>周二</th>
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
            </tr>
            <tr>
                <td>第1節課</td>
                <td>語文</td>
                <td>語文</td>
                <td>英語</td>
                <td>英語</td>
                <td>語文</td>
            </tr>
            <tr>
                <td>第2節課</td>
                <td>語文</td>
                <td>數學</td>
                <td>數學</td>
                <td>英語</td>
                <td>數學</td>
            </tr>
            <tr>
                <td>第3節課</td>
                <td>英語</td>
                <td>數學</td>
                <td>物理</td>
                <td>化學</td>
                <td>物理</td>
            </tr>
            <tr>
                <td>第4節課</td>
                <td>英語</td>
                <td>政治</td>
                <td>地理</td>
                <td>物理</td>
                <td>政治</td>
            </tr>
            <tr>
                <td>第5節課</td>
                <td>數學</td>
                <td>生物</td>
                <td>信息</td>
                <td>數學</td>
                <td>化學</td>
            </tr>
            <tr>
                <td>第6節課</td>
                <td>體育</td>
                <td>化學</td>
                <td>語文</td>
                <td>語文</td>
                <td>美術</td>
            </tr>
            <tr>
                <td>第7節課</td>
                <td>社團活動</td>
                <td>社團活動</td>
                <td>社團活動</td>
                <td>社團活動</td>
                <td>社團活動</td>
            </tr>
        </table>
    </body>
</html>

使用瀏覽器打開這個文檔，效果如下：

現在的表格好看一些了，但是還有個缺點，就是沒有標題。

4、添加<caption>元素，為表格添加標題

這裡修改HTML文檔，加上“華南師大附中初二（12）班課程表”標題，修改後的HTML文檔如下；

<!DOCTYPE html>
<html>
    <head>
        <title>table003</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <table border="1">
            <caption>華南師大附中初二（12）班課程表</caption>
            <tr>
                <th>節次</th>
                <th>周一</th>
                <th>周二</th>
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
            </tr>
            <tr>
                <td>第1節課</td>
                <td>語文</td>
                <td>語文</td>
                <td>英語</td>
                <td>英語</td>
                <td>語文</td>
            </tr>
            <tr>
                <td>第2節課</td>
                <td>語文</td>
                <td>數學</td>
                <td>數學</td>
                <td>英語</td>
                <td>數學</td>
            </tr>
            <tr>
                <td>第3節課</td>
                <td>英語</td>
                <td>數學</td>
                <td>物理</td>
                <td>化學</td>
                <td>物理</td>
            </tr>
            <tr>
                <td>第4節課</td>
                <td>英語</td>
                <td>政治</td>
                <td>地理</td>
                <td>物理</td>
                <td>政治</td>
            </tr>
            <tr>
                <td>第5節課</td>
                <td>數學</td>
                <td>生物</td>
                <td>信息</td>
                <td>數學</td>
                <td>化學</td>
            </tr>
            <tr>
                <td>第6節課</td>
                <td>體育</td>
                <td>化學</td>
                <td>語文</td>
                <td>語文</td>
                <td>美術</td>
            </tr>
            <tr>
                <td>第7節課</td>
                <td>社團活動</td>
                <td>社團活動</td>
                <td>社團活動</td>
                <td>社團活動</td>
                <td>社團活動</td>
            </tr>
        </table>
    </body>
</html>

使用瀏覽器打開這個文檔，效果如下：

5、現在我們加上“上午、下午”的信息。

為加上“上午、下午”的信息，我們需要增加一列，並使用<td>元素的rowspan屬性對行進行合併。修改後的HTML文檔如下：

<!DOCTYPE html>
<html>
    <head>
        <title>table004</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <table border="1">
            <caption>華南師大附中初二（12）班課程表</caption>
            <tr>
                <th>上午/下午</th>
                <th>節次</th>
                <th>周一</th>
                <th>周二</th>
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
            </tr>
            <tr>
                <td rowspan="4">上午</td>
                <td>第1節課</td>
                <td>語文</td>
                <td>語文</td>
                <td>英語</td>
                <td>英語</td>
                <td>語文</td>
            </tr>
            <tr>
                <td>第2節課</td>
                <td>語文</td>
                <td>數學</td>
                <td>數學</td>
                <td>英語</td>
                <td>數學</td>
            </tr>
            <tr>
                <td>第3節課</td>
                <td>英語</td>
                <td>數學</td>
                <td>物理</td>
                <td>化學</td>
                <td>物理</td>
            </tr>
            <tr>
                <td>第4節課</td>
                <td>英語</td>
                <td>政治</td>
                <td>地理</td>
                <td>物理</td>
                <td>政治</td>
            </tr>
            <tr>
                <td rowspan="3">下午</td>
                <td>第5節課</td>
                <td>數學</td>
                <td>生物</td>
                <td>信息</td>
                <td>數學</td>
                <td>化學</td>
            </tr>
            <tr>
                <td>第6節課</td>
                <td>體育</td>
                <td>化學</td>
                <td>語文</td>
                <td>語文</td>
                <td>美術</td>
            </tr>
            <tr>
                <td>第7節課</td>
                <td>社團活動</td>
                <td>社團活動</td>
                <td>社團活動</td>
                <td>社團活動</td>
                <td>社團活動</td>
            </tr>
        </table>
    </body>
</html>

使用瀏覽器打開該HTML文件，效果如下：

6、為了讓課表更美觀，我們將“上午/下午”和節次合併，將“社團活動”合併。

我們通過設置<td>元素的colspan屬性，實現這個目標。修改後的HTML文檔如下：

<!DOCTYPE html>
<html>
    <head>
        <title>table005</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <table border="1">
            <caption>華南師大附中初二（12）班課程表</caption>
            <tr>
                <th colspan="2">節次</th>
                <th>周一</th>
                <th>周二</th>
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
            </tr>
            <tr>
                <td rowspan="4">上午</td>
                <td>第1節課</td>
                <td>語文</td>
                <td>語文</td>
                <td>英語</td>
                <td>英語</td>
                <td>語文</td>
            </tr>
            <tr>
                <td>第2節課</td>
                <td>語文</td>
                <td>數學</td>
                <td>數學</td>
                <td>英語</td>
                <td>數學</td>
            </tr>
            <tr>
                <td>第3節課</td>
                <td>英語</td>
                <td>數學</td>
                <td>物理</td>
                <td>化學</td>
                <td>物理</td>
            </tr>
            <tr>
                <td>第4節課</td>
                <td>英語</td>
                <td>政治</td>
                <td>地理</td>
                <td>物理</td>
                <td>政治</td>
            </tr>
            <tr>
                <td rowspan="3">下午</td>
                <td>第5節課</td>
                <td>數學</td>
                <td>生物</td>
                <td>信息</td>
                <td>數學</td>
                <td>化學</td>
            </tr>
            <tr>
                <td>第6節課</td>
                <td>體育</td>
                <td>化學</td>
                <td>語文</td>
                <td>語文</td>
                <td>美術</td>
            </tr>
            <tr>
                <td>第7節課</td>
                <td colspan="5">社團活動</td>
            </tr>
        </table>
    </body>
</html>

使用瀏覽器打開該文件，效果如下：

7、現在表格內容基本上完整了，就是顯得有點小。

修改一下HTML文檔，添加一下列寬的信息，修改後的HTML文檔如下：

<!DOCTYPE html>
<html>
    <head>
        <title>table006</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <table border="1" style="width:800px;text-align:center">
            <caption>華南師大附中初二（12）班課程表</caption>
            <tr>
                <th colspan="2">節次</th>
                <th>周一</th>
                <th>周二</th>
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
            </tr>
            <tr>
                <td rowspan="4">上午</td>
                <td>第1節課</td>
                <td>語文</td>
                <td>語文</td>
                <td>英語</td>
                <td>英語</td>
                <td>語文</td>
            </tr>
            <tr>
                <td>第2節課</td>
                <td>語文</td>
                <td>數學</td>
                <td>數學</td>
                <td>英語</td>
                <td>數學</td>
            </tr>
            <tr>
                <td>第3節課</td>
                <td>英語</td>
                <td>數學</td>
                <td>物理</td>
                <td>化學</td>
                <td>物理</td>
            </tr>
            <tr>
                <td>第4節課</td>
                <td>英語</td>
                <td>政治</td>
                <td>地理</td>
                <td>物理</td>
                <td>政治</td>
            </tr>
            <tr>
                <td rowspan="3">下午</td>
                <td>第5節課</td>
                <td>數學</td>
                <td>生物</td>
                <td>信息</td>
                <td>數學</td>
                <td>化學</td>
            </tr>
            <tr>
                <td>第6節課</td>
                <td>體育</td>
                <td>化學</td>
                <td>語文</td>
                <td>語文</td>
                <td>美術</td>
            </tr>
            <tr>
                <td>第7節課</td>
                <td colspan="5">社團活動</td>
            </tr>
        </table>
    </body>
</html>

使用瀏覽器打開這個文件，效果如下：