TML 表格實例:

在線實例

表格

這個例子演示如何在 HTML 文檔中創建表格。

HTML 表格

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

表格實例

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

在瀏覽器顯示如下：:

HTML 表格和邊框屬性

如果不定義邊框屬性，表格將不顯示邊框。有時這很有用，但是大多數時候，我們希望顯示邊框。

使用邊框屬性來顯示一個帶有邊框的表格：

<table border="1">

<tr>

<td>Row 1, cell 1</td>

<td>Row 1, cell 2</td>

</tr>

</table>

HTML 表格表頭

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

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

<table border="1">

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

在瀏覽器顯示如下：

更多實例

沒有邊框的表格

本例演示一個沒有邊框的表格。

表格中的表頭(Heading)

本例演示如何顯示表格表頭。

帶有標題的表格

本例演示一個帶標題 (caption) 的表格

跨行或跨列的表格單元格

本例演示如何定義跨行或跨列的表格單元格。

表格內的標簽

本例演示如何顯示在不同的元素內顯示元素。

單元格邊距(Cell padding)

本例演示如何使用 Cell padding 來創建單元格內容與其邊框之間的空白。

單元格間距(Cell spacing)

本例演示如何使用 Cell spacing 增加單元格之間的距離。

HTML 表格標簽

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

lt;table> 表格的樣式：

表格 <table>標簽的定義：

HTML 表格：<table> 標簽定義 。

簡單的 HTML 表格包括： table 元素，一個或多個 tr、th 以及 td 元素。

<table>表格結構：

<table border=1px;>
 <tr> <th> row1,col1 </th><th>row1,col2 </th> </tr>
 <tr> <th> row2,col1 </th><td>row2,col2 </td> </tr>
</table>

<table>表格元素：

tr（行標簽）、 th（表頭單元格標簽）、 td（普通單元格標簽) caption（表格標題）、 col(定義列)、 colgroup(對表格中的列進行組合)、thead（組合表頭的內容） tbody(組合表格的主題內容) 、tfoot(組合表格的腳注內容) 等

<td>（普通單元格標簽) ： 元素定義表格單元格

	<td>11,980</td>

<th>（表頭單元格標簽） ： 元素定義表格表頭

<th scope="row">工資</th>

<tr>（行標簽） ： 元素定義表格行

<tr>
		<th scope="row">工資</th>
		<td>11,980</td>
		<td>12,650</td>
		<td>9,700</td>
		<td>10,600</td>
 <td rowspan="5">工作</td>
	</tr>

<caption>(表格標題）：元素定義表格標題

<caption class="c1">月度收入4月 - 7月 </caption>

還有一些復雜的表格才能用到的元素 ：<col>、 <colgroup>、<thead>、 <tbody> 、<tfoot>等.

• thead主要用來存放表格的表頭的;
• tbody 用來存放真正的數據的;
• tfoot是表格的腳部, 主要是用來對表格做總結性的統計, 備注等.

由于thead, tbody, tfoot是從語義 上來劃分 表格結構的, 主要用于比較復雜的表格中。

<colspan>合并行元素 ：定義<table>中的行的合并

 <td colspan="5">153,629</td>

<rowspan>合并列元素 ：定義<table>中的列的合并

 <td rowspan="5">工作</td>

<table>表格的嵌套:

<tr>
		<th scope="row">總計</th>
		<td>36,060</td>
		<td>38,759</td>
		<td>38,110</td>
		<td>40,700</td>
 <td class="ct">
 <table id="t2"> 
 <tr><td></td></tr>
 </table>
 </td>
	</tr>

HTML基礎表格的應用，上面的簡單元素就可以滿足，運用表格邏輯思維去思考，可以更快的掌握<table>表格標簽。

本文部分圖片來自網絡，如有侵權，請聯系修改。