前端編程之路一一表格標籤table

在 HTML 中，咱們使用 <table> 標籤來定義表格。HTML 中的表格和 Excel 中的表格是相似的，都包括行、列、單元格、表頭等元素。可是 HTML 表格在功能方面遠沒有 Excel 表格強大，HTML 表格不支持排序、求和、方差等數學計算，它通常用來展現數據。瀏覽器

在學習表格以前，咱們不妨先來看一段簡單的 HTML 代碼：學習

1.  <table border="1">
2.  <tr>
3.  <th>名稱</th>
4.  <th>官網</th>
5.  <th>性質</th>
6.  </tr>
7.  <tr>
8.  <td>C語言中文網</td>
9.  <td>http://c.biancheng.net/</td>
10.  <td>教育</td>
11.  </tr>
12.  <tr>
13.  <td>百度</td>
14.  <td>http://www.baidu.com/</td>
15.  <td>搜索</td>
16.  </tr>
17.  <tr>
18.  <td>噹噹</td>
19.  <td>http://www.dangdang.com/</td>
20.  <td>圖書</td>
21.  </tr>
22.  </table>

運行效果以下圖：spa

這是一個 4 行 3 列的表格。第一行爲表頭，其他三行爲內容。.net

在上述代碼中，咱們使用了<table>、<tr>、<td> 及 <th> 四個標籤：code

<table> 表示表格，表格的全部內容須要寫在 <table> 和 </table> 之間。blog
<tr> 是 table row 的簡稱，表示表格的行。表格中有多少個 <tr> 標籤就表示有多少行數據。排序
<td> 是 table datacell 的簡稱，表示表格的單元格，這纔是真正存放表格數據的標籤。單元格的數據能夠是文本、圖片、列表、段落、表單、水平線、表格等多種形式。圖片
<th> 是 table heading 的簡稱，表示表格的表頭。<th> 實際上是 <td> 單元格的一種變體，本質上仍是一種單元格。<th> 通常位於第一行，充當每一列的標題。大多數的瀏覽器會把表頭顯示爲粗體居中的文本。數學

默認狀況下，表格是沒有邊框的。可是咱們可使用 <table> 標籤中的 border 屬性來設置表格的邊框寬度，單位是像素（px）。本例中咱們將表格的邊框寬度設置爲 1px。注意，px 是默認的單位，不用顯式指明。io

1. 表格的邊框合併：

細心的讀者可能已經發現了，網頁中常見的表格樣式大多爲單層邊框，上例中展現的表格爲雙層邊框。爲了不這種狀況，咱們能夠利用 CSS 中的 border-collapse 屬性來設置表格的邊框。border-collapse 是「邊框塌陷」的意思，當屬性值爲 collapse 時，可使表格的雙邊框變爲單邊框。

示例代碼以下：

1.  <table border="1" style="border-collapse: collapse;">
2.  <tr>
3.  <th>名稱</th>
4.  <th>官網</th>
5.  <th>性質</th>
6.  </tr>
7.  <tr>
8.  <td>C語言中文網</td>
9.  <td>http://c.biancheng.net/</td>
10.  <td>教育</td>
11.  </tr>
12.  <tr>
13.  <td>百度</td>
14.  <td>http://www.baidu.com/</td>
15.  <td>搜索</td>
16.  </tr>
17.  <tr>
18.  <td>噹噹</td>
19.  <td>http://www.dangdang.com/</td>
20.  <td>圖書</td>
21.  </tr>
22.  </table>

運行效果以下圖所示：

2. 表格的標題

HTML 容許使用 <caption> 標籤來爲表格設置標題，標題用來描述表格的內容。

咱們常見的表格通常都有標題，表格的標題使用 <caption> 標籤來表示。默認狀況下，表格的標題位於整個表格的第一行而且居中顯示。一個表格只能有一個標題，也就是說 <table> 標籤中只能有一個 <caption> 標籤。

請看下面的例子：

1.  <table border="1" style="border-collapse: collapse;">
2.  <caption>這是表格的標題</caption>
3.  <tr>
4.  <th>名稱</th>
5.  <th>官網</th>
6.  <th>性質</th>
7.  </tr>
8.  <tr>
9.  <td>C語言中文網</td>
10.  <td>http://c.biancheng.net/</td>
11.  <td>教育</td>
12.  </tr>
13.  <tr>
14.  <td></td>
15.  <td>http://www.baidu.com/</td>
16.  <td>搜索</td>
17.  </tr>
18.  <tr>
19.  <td>噹噹</td>
20.  <td>http://www.dangdang.com/</td>
21.  <td>圖書</td>
22.  </tr>
23.  </table>

瀏覽器運行結果如圖：

3. 單元格的合併

和 Excel 相似，HTML 也支持單元格的合併，包括跨行合併和跨列合併兩種。

rowspan：表示跨行合併。在 HTML 代碼中，容許咱們使用 rowspan 特性來代表單元格所要跨越的行數。
colspan：表示跨列合併。一樣的，在 HTML 中，容許咱們使用 colspan 特性來代表單元格所要跨越的列數。

具體格式以下：

<td rowspan="n">單元格內容</td>
<td colspan="n">單元格內容</td>

n 是一個整數，表示要合併的行數或者列數。

此處需注意，不管是 rowspan 仍是 colspan 都是 <td> 標籤的屬性。

下面的例子中，咱們將表格第 1 列的第三、4 行單元格合併（跨行合併），將第 4 行的第二、3 列合併（跨列合併）。具體代碼以下：

1.  <table border="1" style="border-collapse: collapse;">
2.  <tr>
3.  <th>名稱</th>
4.  <th>官網</th>
5.  <th>性質</th>
6.  </tr>
7.  <tr>
8.  <td>C語言中文網</td>
9.  <td>http://c.biancheng.net/</td>
10.  <td>教育</td>
11.  </tr>
12.  <tr>
13.  <td rowspan="2">百度</td>
14.  <td>http://www.baidu.com/</td>
15.  <td>搜索</td>
16.  </tr>
17.  <tr>
18.  <td colspan="2">http://www.dangdang.com/</td>
19.  </tr>
20.  </table>

運行效果如圖：

經過運行結果能夠發現：

rowspan 屬性表示向下合併單元格，colspan 屬性表示向右合併單元格。
每次合併 n 個單元格都要少寫 n-1 個<td>標籤。

提示：即便一個單元格中沒有任何內容，咱們仍需使用 <td> 或 <th> 元素來表示一個空單元格的存在，建議在 <td> 或 <th> 中加入  （空格），不然低版本的 IE 可能沒法顯示出這個單元格的邊框。