<caption>我是表格的標題</caption>

<thead></thead>

<tbody></tbody>

<tfoot></ftood>

<tr>
	<th>姓名</th>
	<th>電話</th>
</tr>
<tr>
	<td rowspan="2">小明</td>
	<td>123</td>
</tr>
<tr>
	<td>321</td>
</tr>

<tr>
	<th>姓名</th>
	<th colspan="2">電話</th>
</tr>
<tr>
	<td >小明</td>
	<td>123</td>
	<td>321</td>
</tr>

格是頁面中常見的一中標簽，通常是用來數據展示的，而不是用來布局。

一、創建表格

• 語法

<table>

<tr>

<td>單元格內的文字</td>

...

</tr>

...

</table>

• 說明
• table 標簽：定義一個表
• tr 標簽：定義表格中的一行，必須嵌套在table標簽中，有幾對，表示表格有幾行
• td 標簽：定義表格中的單元格，必須嵌套在標簽中，一對 中包含幾對，就表示該行中有多少列（或多少個單元格）

• 注意
• 中只能嵌套
• 標簽，就像一個容器，可以容納所有的元素

表格屬性

設置表格的外觀樣式

表頭標簽

• 說明
• 表頭一般位于表格的第一行或第一列，其文本加粗居中，如下圖所示，即為設置了表頭的表格。設置表頭非常簡單，只需用表頭標簽<th></th>替代相應的單元格標簽<td></td>即可
• 示例

• 代碼

<table border=1>

<tr>

<th>姓名</th>

<th>性別</th>

<th>電話</th>

</tr>

<tr>

<th>張三</th>

<td>女</td>

<td>18611110000</td>

</tr>

<tr>

<th>李四</th>

<td>男</td>

<td>18711110000</td>

</tr>

<tr>

<th>王五</th>

<td>男</td>

<td>18811110000</td>

</tr>

</table>

標題標簽

表格標題標簽，為表格添加標題，跟隨表格的位置而移動。設置標題，我們用的是caption標簽。

• 語法

<table border="1">

<caption style="text-align:left">My savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

<td>0</td>

</tr>

</table>

• 說明

將標題定位在表格的左|右|上|下位置。

• 示例

合并單元格（重點）

• 分類

跨行合并 rowspan=“合并單元格的個數”

跨列合并 colspan=“合并單元格的個數”

合并順序：先上后下，先左后右

• 代碼

...

```

• 合并方法：

（1）先確定是跨行還是跨列合并

（2）根據先上后下，先左后右的原則，找到目標單元格，寫上合并方式（rowspan/colspan）和要合并的單元格數量

（3）刪除多余的單元格

表格結構劃分（了解）

表格的結構劃分，使用thead、tbody 、tfoot 三種標簽

• 說明
• 標簽用于組合 HTML 表格的表頭內容 元素應該與和元素結合起來使用，用來規定表格的各個部分（表頭、主體、頁腳）
• 語法

<table border="1">

<thead>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

</thead>

<tfoot>

<tr>

<td>Sum</td>

<td>0</td>

</tr>

</tfoot>

<tbody>

<tr>

<td>January</td>

<td>0</td>

</tr>

<tr>

<td>February</td>

<td></td>

</tr>

</tbody>

</table>

• 提示

（1） 元素內部必須包含一個或者多個 標簽。

（2） thead, tbody, 和 tfoot 元素默認不會影響表格的布局。用途主要是可以使用 CSS 來為這些元素定義樣式，從而改變表格的外觀。

嘍大家好，我是作者“未來”，本期分享的內容是Web前端系列課程，本系列總共29個階段，堅持學習3個月蛻變為Web前端高手哦！

志同道合的小伙伴跟我一起學習交流哦！

因為在的編輯中“<”和“>”中的內容都會被識別為代碼，顯示不出來內容，所以，在文本中會省略“<”和“>”，圖片中的“<”和“>”不會省略。

第一階段 01 HTML5

07表格

1 表格table（會使用）

在HTML網頁中，要想創建表格，就需要使用表格相關的標簽。創建表格的基本語法格式如下：

2 表格的注意事項

1 tr和 /tr中只能嵌套td和/td標簽

2 td和/td標簽，他就像一個容器，可以容納所有的元素

3 表格屬性

使用方法：

4 表頭標簽

只需用表頭標記th和/th替代相應的單元格標記td和/td即可。

顯示效果為加粗和居中。

5 表格結構（了解）

在使用表格進行布局時，可以將表格劃分為頭部、主體和頁腳（頁腳因為有兼容性問題，我們不在贅述），具體如下所示：

1 thead和/ thead：用于定義表格的頭部。

2 必須位于table和/ table標簽中，一般包含網頁的logo和導航等頭部信息

3 tbody和/ tbody：用于定義表格的主體。

4 位于

6 瀏覽器審查HTML標簽元素

瀏覽器頁面按F12打開

左邊顯示為HTML，右邊顯示為CSS（后面會學到）

7 表格標題標簽

表格的標題：caption

caption元素定義表格標題。

caption標簽必須緊隨table標簽之后。只能對每個表格定義一個標題。通常這個標題會被居中于表格之上。

8 合并單元格

跨行合并：rowspan

跨列合并：colspan

“2”表示合并兩個單元格，數值是多少就合并多少個單元格。

看不懂的小伙伴不要氣餒，后續的分享中將持續解釋，只要你跟著我分享的課程從頭到尾去學習，每篇文章看三遍，一個月后，回過頭來看之前的文章就會感覺簡單極了。

本章已結束，下篇文章將分享《08 表單和表單控件》小伙伴們不要錯過喲！上述內容是作者本人的學習筆記，需要原視頻學習資料可以在公眾號回復關鍵詞“前端資料”