制作HTML5的表格

用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>節(jié)次</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
<tr>
<td>第1節(jié)課</td>
<td>語文</td>
<td>語文</td>
<td>英語</td>
<td>英語</td>
<td>語文</td>
</tr>
<tr>
<td>第2節(jié)課</td>
<td>語文</td>
<td>數(shù)學</td>
<td>數(shù)學</td>
<td>英語</td>
<td>數(shù)學</td>
</tr>
<tr>
<td>第3節(jié)課</td>
<td>英語</td>
<td>數(shù)學</td>
<td>物理</td>
<td>化學</td>
<td>物理</td>
</tr>
<tr>
<td>第4節(jié)課</td>
<td>英語</td>
<td>政治</td>
<td>地理</td>
<td>物理</td>
<td>政治</td>
</tr>
<tr>
<td>第5節(jié)課</td>
<td>數(shù)學</td>
<td>生物</td>
<td>信息</td>
<td>數(shù)學</td>
<td>化學</td>
</tr>
<tr>
<td>第6節(jié)課</td>
<td>體育</td>
<td>化學</td>
<td>語文</td>
<td>語文</td>
<td>美術</td>
</tr>
<tr>
<td>第7節(jié)課</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>節(jié)次</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
<tr>
<td>第1節(jié)課</td>
<td>語文</td>
<td>語文</td>
<td>英語</td>
<td>英語</td>
<td>語文</td>
</tr>
<tr>
<td>第2節(jié)課</td>
<td>語文</td>
<td>數(shù)學</td>
<td>數(shù)學</td>
<td>英語</td>
<td>數(shù)學</td>
</tr>
<tr>
<td>第3節(jié)課</td>
<td>英語</td>
<td>數(shù)學</td>
<td>物理</td>
<td>化學</td>
<td>物理</td>
</tr>
<tr>
<td>第4節(jié)課</td>
<td>英語</td>
<td>政治</td>
<td>地理</td>
<td>物理</td>
<td>政治</td>
</tr>
<tr>
<td>第5節(jié)課</td>
<td>數(shù)學</td>
<td>生物</td>
<td>信息</td>
<td>數(shù)學</td>
<td>化學</td>
</tr>
<tr>
<td>第6節(jié)課</td>
<td>體育</td>
<td>化學</td>
<td>語文</td>
<td>語文</td>
<td>美術</td>
</tr>
<tr>
<td>第7節(jié)課</td>
<td>社團活動</td>
<td>社團活動</td>
<td>社團活動</td>
<td>社團活動</td>
<td>社團活動</td>
</tr>
</table>
</body>
</html>

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

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

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>節(jié)次</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
<tr>
<td>第1節(jié)課</td>
<td>語文</td>
<td>語文</td>
<td>英語</td>
<td>英語</td>
<td>語文</td>
</tr>
<tr>
<td>第2節(jié)課</td>
<td>語文</td>
<td>數(shù)學</td>
<td>數(shù)學</td>
<td>英語</td>
<td>數(shù)學</td>
</tr>
<tr>
<td>第3節(jié)課</td>
<td>英語</td>
<td>數(shù)學</td>
<td>物理</td>
<td>化學</td>
<td>物理</td>
</tr>
<tr>
<td>第4節(jié)課</td>
<td>英語</td>
<td>政治</td>
<td>地理</td>
<td>物理</td>
<td>政治</td>
</tr>
<tr>
<td>第5節(jié)課</td>
<td>數(shù)學</td>
<td>生物</td>
<td>信息</td>
<td>數(shù)學</td>
<td>化學</td>
</tr>
<tr>
<td>第6節(jié)課</td>
<td>體育</td>
<td>化學</td>
<td>語文</td>
<td>語文</td>
<td>美術</td>
</tr>
<tr>
<td>第7節(jié)課</td>
<td>社團活動</td>
<td>社團活動</td>
<td>社團活動</td>
<td>社團活動</td>
<td>社團活動</td>
</tr>
</table>
</body>
</html>

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

5、現(xiàn)在我們加上“上午、下午”的信息。

為加上“上午、下午”的信息，我們需要增加一列，并使用<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>節(jié)次</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>第1節(jié)課</td>
<td>語文</td>
<td>語文</td>
<td>英語</td>
<td>英語</td>
<td>語文</td>
</tr>
<tr>
<td>第2節(jié)課</td>
<td>語文</td>
<td>數(shù)學</td>
<td>數(shù)學</td>
<td>英語</td>
<td>數(shù)學</td>
</tr>
<tr>
<td>第3節(jié)課</td>
<td>英語</td>
<td>數(shù)學</td>
<td>物理</td>
<td>化學</td>
<td>物理</td>
</tr>
<tr>
<td>第4節(jié)課</td>
<td>英語</td>
<td>政治</td>
<td>地理</td>
<td>物理</td>
<td>政治</td>
</tr>
<tr>
<td rowspan="3">下午</td>
<td>第5節(jié)課</td>
<td>數(shù)學</td>
<td>生物</td>
<td>信息</td>
<td>數(shù)學</td>
<td>化學</td>
</tr>
<tr>
<td>第6節(jié)課</td>
<td>體育</td>
<td>化學</td>
<td>語文</td>
<td>語文</td>
<td>美術</td>
</tr>
<tr>
<td>第7節(jié)課</td>
<td>社團活動</td>
<td>社團活動</td>
<td>社團活動</td>
<td>社團活動</td>
<td>社團活動</td>
</tr>
</table>
</body>
</html>

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

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

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

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

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

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

修改一下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">節(jié)次</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>第1節(jié)課</td>
<td>語文</td>
<td>語文</td>
<td>英語</td>
<td>英語</td>
<td>語文</td>
</tr>
<tr>
<td>第2節(jié)課</td>
<td>語文</td>
<td>數(shù)學</td>
<td>數(shù)學</td>
<td>英語</td>
<td>數(shù)學</td>
</tr>
<tr>
<td>第3節(jié)課</td>
<td>英語</td>
<td>數(shù)學</td>
<td>物理</td>
<td>化學</td>
<td>物理</td>
</tr>
<tr>
<td>第4節(jié)課</td>
<td>英語</td>
<td>政治</td>
<td>地理</td>
<td>物理</td>
<td>政治</td>
</tr>
<tr>
<td rowspan="3">下午</td>
<td>第5節(jié)課</td>
<td>數(shù)學</td>
<td>生物</td>
<td>信息</td>
<td>數(shù)學</td>
<td>化學</td>
</tr>
<tr>
<td>第6節(jié)課</td>
<td>體育</td>
<td>化學</td>
<td>語文</td>
<td>語文</td>
<td>美術</td>
</tr>
<tr>
<td>第7節(jié)課</td>
<td colspan="5">社團活動</td>
</tr>
</table>
</body>
</html>

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

其實，在HTML5中，除了上面五個主要元素，還有三個較常用的的元素：

tbody元素：定義表格主體；

thead元素：定義表格頭；

tfoot元素：定義表格腳。

這三個元素主要用于將表格分為表頭、表尾、表體三個部分，便于進行編程控制，使用起來非常簡單，這里就不介紹了。

JavaScript中，可以使用DOM操作來動態(tài)生成表格。以下是一個基本的示例代碼，展示了如何通過JavaScript動態(tài)生成一個簡單的表格：

```javascript

// 創(chuàng)建一個二維數(shù)組，表示表格中的數(shù)據(jù)

var data = [

["姓名", "年齡", "性別"],

["張三", 25, "男"],

["李四", 30, "男"],

["王五", 28, "女"]

];

// 獲取要插入表格的父元素

var tableContainer = document.getElementById("table-container");

// 創(chuàng)建表格元素

var table = document.createElement("table");

// 遍歷數(shù)據(jù)數(shù)組，逐行創(chuàng)建表格行和單元格

for (var i = 0; i < data.length; i++) {

var row = document.createElement("tr"); // 創(chuàng)建表格行

for (var j = 0; j < data[i].length; j++) {

var cell = document.createElement(i === 0 ? "th" : "td"); // 第一行創(chuàng)建表頭<th>，其他行創(chuàng)建表格單元格<td>

cell.textContent = data[i][j]; // 設置單元格的內容

row.appendChild(cell); // 將單元格添加到行中

}

table.appendChild(row); // 將行添加到表格中

}

// 將表格添加到父元素中

tableContainer.appendChild(table);

```

在上述代碼中，我們首先定義一個二維數(shù)組 `data`，用于存儲表格中的數(shù)據(jù)。然后，使用 `getElementById` 方法獲取要插入表格的父元素。接下來，使用 `createElement` 方法創(chuàng)建 `<table>` 表格元素，并使用嵌套的 `for` 循環(huán)遍歷數(shù)據(jù)數(shù)組，逐行創(chuàng)建表格行和單元格。對于第一行，我們創(chuàng)建表頭元素 `<th>`，其他行則創(chuàng)建表格單元格元素 `<td>`。最后，將創(chuàng)建好的表格元素和行、單元格依次添加到父元素中。

你可以根據(jù)需要進一步修改代碼，例如添加樣式、動態(tài)更新表格數(shù)據(jù)等。希望對你有所幫助！

過昨天的學習算是對HTML有了一點點了解，知道了什么是前端，什么是HTML、前端三大標準、主流瀏覽器和html的基本結構及常用標簽。那么今天繼續(xù)看看html還有什么新的知識吧。

特殊字符（了解即可）

有常見性就有特殊性，我們使用電腦時經常會用到空格鍵，在html文檔上有時也會使用到空格鍵等等，那怎么在html上又是以什么形式展示給瀏覽器解析呢？

瀏覽器顯示結果	特殊字符名稱	HTML編輯字符
	空格	& n b s p;
<	小于號	& l t ；
>	大于號	& g t；
&	和	& a m p；
?	版權	& c o p y ；

表格標簽

作用：在瀏覽器上清晰美觀地顯示、展示數(shù)據(jù)。

表格標簽的語法

<table>

<tr>

</tr>

</table>

表格標簽：<table></table>，一個table標簽中可嵌套多個tr標簽。

行標簽：<tr></tr>，一個tr標簽代表一行。一個行標簽中可以嵌套多個單元格標簽。

單元格標簽：<td></td>，一個td標簽代表一個單元格。在單元格中可以填充文本、圖片、超鏈接等等內容。

在html中表格不是由橫線劃分行和列，而是大大小小的矩形盒子來劃分。Table是一個最大的矩形盒子，里面包含tr標簽，這個是一個和table長度差不多的矩形盒子，table一行僅容納一個tr盒子。在tr盒子中還包含有N個td盒子，td盒子就是單元格。

表格示例：

在html文檔中編輯表格標簽結構時，除了一個標簽一個標簽地敲之外，可以使用快捷方式快速操作：如五行三列的表格，可以在table標簽中輸入：“tr*5>td*3”然后敲回車，就將其表格結構迅速展現(xiàn)出來。

<h1>表格示例：</h1>
<table>
        <tr>
            <td>姓名</td>
            <td>性別</td>
            <td>年齡</td>
        </tr>
        <tr>
            <td>張三豐</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
</table>

運行界面示例：默認狀態(tài)下表格是沒有線條分界，表格對齊方式左對齊。

表頭單元格標簽

<th></th>：位于表格的第一行或第一列，可以使其內容加粗居中顯示。

語法：

<table>

<th>

</th>

</table>

表頭表格代碼示例：

<h1>表頭表格示例：</h1>
   <table>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
        <tr>
            <td>張三豐</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
    </table>

運行界面示例：

表格結構標簽

表格結構標簽分為表格頭部標簽和表格主體標簽。類似于head標簽和body標簽對于html標簽之間的關系。

表格頭部標簽：<thead></thead>。定義表格頭部，嵌套在<table></table>中，一般位于第一行。

表格主體標簽：<tbody></tbody>。定義表格主體，嵌套在<table></table>中，主要用于顯示數(shù)據(jù)。

代碼示例：

<h1>表格結構標簽</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性別</th>
                <th>年齡</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>張三豐</td>
                <td>男</td>
                <td>36</td>
            </tr>
            <tr>
                <td>李四喜</td>
                <td>女</td>
                <td>30</td>
            </tr>
        </tbody>
    </table>

運行界面：

表格屬性

雖然表格屬性在實際開發(fā)過程中不常使用，一般都是通過CSS樣式設置，但是還是需要記住這些屬性關鍵詞，在css中屬性關鍵詞也會用到。

注：這些屬性都要寫在table標簽的開始標簽中，多個屬性之間需要使用空格分隔。

align：表格的對其方式。

align=“l(fā)eft”：在瀏覽器中居左顯示。也是默認顯示。

align=“center”：在瀏覽器中居中顯示。

align=“right”：在瀏覽器中居右顯示。

border：表格是否具有邊框。

border=”1”：表格添加邊框。

cellpadding：單元格內的元素和td邊框的距離。

舉個例子，如果表格是一件教室的話，桌子就是單元格，桌子上放的書本就是單元格內的元素，書本邊緣和桌子邊緣之間產生的空白區(qū)域就是cellpadding的值。

cellspacing：單元格和單元格之間的距離。默認是有空隙的，可設置為零，使其空隙清零，成為一條直線。

還是以教室為表格，桌子為單元格。桌子和桌子之間的距離就是cellspacing的值。

width：表格的寬度，屬性值可以是像素值也可以是百分比。

height：表格的高度，屬性值可以是像素值也可以是百分比。

代碼示例：

<h1>表頭表格示例：</h1>
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="200px" height="300px">
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
        <tr>
            <td>張三豐</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>                   
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
    </table>

運行界面：

合并單元格

合并單元格是指將兩個或兩個以上的單元格合并成一個單元格。合并屬性一般寫在單元格標簽的開始標簽上。合并代碼屬性設置后，要將沒有寫合并的單元格代碼的其他合并單元格標簽刪除掉。

目標單元格：（合并代碼存在位置）

跨行合并：最上側單元格為目標單元格，寫合并代碼。

跨列合并：最左側單元格為目標單元格，寫合并代碼。

合并單元格的方式：

跨行合并：將處于不同行的單元格進行合并

語法：rowspan=“合并單元格個數(shù)”

代碼示例：

<h1>跨行合并表格：</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

運行界面：

跨列合并：將處于不同列的單元格進行合并

語法：colspan=“合并單元格個數(shù)”

代碼示例：

<h1>跨列合并表格：</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <tr>
            <td colspan="2"></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

運行示例：

今天學習的表格內容就到這里了，明天開始學習列表。

在線咨詢

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商

制作HTML5的表格

1、HTML5表格的主要元素：

2、制作一個簡單的表格

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

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

5、現(xiàn)在我們加上“上午、下午”的信息。

6、為了讓課表更美觀，我們將“上午/下午”和節(jié)次合并，將“社團活動”合并。

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

特殊字符（了解即可）

表格標簽

您的項目需求

2、制作一個簡單的表格

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

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

5、現(xiàn)在我們加上“上午、下午”的信息。

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