整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML 表格實例:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
| Adam | Johnson | 67 |
在線實例
表格
這個例子演示如何在 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>
在瀏覽器顯示如下：:
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
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>
在瀏覽器顯示如下：
| Header 1 | Header 2 |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
更多實例
沒有邊框的表格
本例演示一個沒有邊框的表格。
表格中的表頭(Heading)
本例演示如何顯示表格表頭。
帶有標題的表格
本例演示一個帶標題 (caption) 的表格
跨行或跨列的表格單元格
本例演示如何定義跨行或跨列的表格單元格。
表格內的標簽
本例演示如何顯示在不同的元素內顯示元素。
單元格邊距(Cell padding)
本例演示如何使用 Cell padding 來創建單元格內容與其邊框之間的空白。
單元格間距(Cell spacing)
本例演示如何使用 Cell spacing 增加單元格之間的距離。
HTML 表格標簽
| 標簽 | 描述 |
|---|---|
| <table> | 定義表格 |
| <th> | 定義表格的表頭 |
| <tr> | 定義表格的行 |
| <td> | 定義表格單元 |
| <caption> | 定義表格標題 |
| <colgroup> | 定義表格列的組 |
| <col> | 定義用于表格列的屬性 |
| <thead> | 定義表格的頁眉 |
| <tbody> | 定義表格的主體 |
| <tfoot> | 定義表格的頁腳 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
可以使用 HTML 創建表格。
實例
表格
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>每個表格由 table 標簽開始。</p>
<p>每個表格行由 tr 標簽開始。</p>
<p>每個表格數據由 td 標簽開始。</p>
<h4>一列：</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列：</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>兩行三列：</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
[/demo]
這個例子演示如何在 HTML 文檔中創建表格。
表格邊框
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>帶有普通的邊框：</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>帶有粗的邊框：</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>帶有很粗的邊框：</h4>
<table border="15">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示各種類型的表格邊框。
表格
表格由 <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>
在瀏覽器顯示如下：
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
表格和邊框屬性
如果不定義邊框屬性，表格將不顯示邊框。有時這很有用，但是大多數時候，我們希望顯示邊框。
使用邊框屬性來顯示一個帶有邊框的表格：
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
表格的表頭
表格的表頭使用 <th> 標簽進行定義。
大多數瀏覽器會把表頭顯示為粗體居中的文本：
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</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 Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
表格中的空單元格
在一些瀏覽器中，沒有內容的表格單元顯示得不太好。如果某個單元格是空的（沒有內容），瀏覽器可能無法顯示出這個單元格的邊框。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>
表格中的空單元格
注意：這個空的單元格的邊框沒有被顯示出來。為了避免這種情況，在空單元格中添加一個空格占位符，就可以將邊框顯示出來。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td> </td>
<td>row 2, cell 2</td>
</tr>
</table>
在瀏覽器中顯示如下：
row 1, cell 1 row 1, cell 2
row 2, cell 2
更多實例
沒有邊框的表格
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>這個表格沒有邊框：</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>這個表格也沒有邊框：</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示一個沒有邊框的表格。
表格中的表頭(Heading)
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>表頭：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>電話</th>
<th>電話</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>垂直的表頭：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>電話</th>
<td>555 77 854</td>
</tr>
<tr>
<th>電話</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何顯示表格表頭。
空單元格
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="1">
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td></td>
<td>Some text</td>
</tr>
</table>
<p>正如您看到的，其中一個單元沒有邊框。這是因為它是空的。在該單元中插入一個空格后，仍然沒有邊框。</p>
<p>我們的技巧是在單元中插入一個 no-breaking 空格。</p>
<p>no-breaking 空格是一個字符實體。如果您不清楚什么是字符實體，請閱讀關于字符實體的章節。</p>
<p>no-breaking 空格由和號開始 ("&")，然后是字符"nbsp"，并以分號結尾(";")。</p>
</body>
</html>
[/demo]
本例展示如何使用 " " 處理沒有內容的單元格。
帶有標題的表格
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>這個表格有一個標題，以及粗邊框：</h4>
<table border="6">
<caption>我的標題</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示一個帶標題 (caption) 的表格
跨行或跨列的表格單元格
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>橫跨兩列的單元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">電話</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>橫跨兩行的單元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">電話</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何定義跨行或跨列的表格單元格。
表格內的標簽
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="1">
<tr>
<td>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
</td>
<td>這個單元包含一個表格：
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>這個單元包含一個列表：
<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>菠蘿</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何顯示在不同的元素內顯示元素。
單元格邊距(Cell padding)
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>沒有 cellpadding：</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>帶有 cellpadding：</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何使用 Cell padding 來創建單元格內容與其邊框之間的空白。
單元格間距(Cell spacing)
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>沒有 cellspacing：</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>帶有 cellspacing：</h4>
<table border="1"
cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何使用 Cell spacing 增加單元格之間的距離。
向表格添加背景顏色或背景圖像
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>背景顏色：</h4>
<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>背景圖像：</h4>
<table border="1"
background="./imagecopy1234567890/test.gif">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何向表格添加背景。
向表格單元添加背景顏色或者背景圖像
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>單元背景：</h4>
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td
background="./imagecopy1234567890/test.gif">
Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何向一個或者更多表格單元添加背景。
在表格單元中排列內容
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table width="400" border="1">
<tr>
<th align="left">消費項目....</th>
<th align="right">一月</th>
<th align="right">二月</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">1.10</td>
<td align="right">.20</td>
</tr>
<tr>
<td align="left">化妝品</td>
<td align="right">.00</td>
<td align="right">.45</td>
</tr>
<tr>
<td align="left">食物</td>
<td align="right">0.40</td>
<td align="right">0.00</td>
</tr>
<tr>
<th align="left">總計</th>
<th align="right">01.50</th>
<th align="right">4.65</th>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何使用 "align" 屬性排列單元格內容,以便創建一個美觀的表格。
框架(frame)屬性
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p><b>注釋：</b>frame 屬性無法在 Internet Explorer 中正確地顯示。</p>
<p>Table with frame="box":</p>
<table frame="box">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
</table>
<p>Table with frame="above":</p>
<table frame="above">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
</table>
<p>Table with frame="below":</p>
<table frame="below">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
</table>
<p>Table with frame="hsides":</p>
<table frame="hsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
</table>
<p>Table with frame="vsides":</p>
<table frame="vsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何使用 "frame" 屬性來控制圍繞表格的邊框。
表格標簽
表格 描述
<table> 定義表格
<caption> 定義表格標題。
<th> 定義表格的表頭。
<tr> 定義表格的行。
<td> 定義表格單元。
<thead> 定義表格的頁眉。
<tbody> 定義表格的主體。
<tfoot> 定義表格的頁腳。
<col> 定義用于表格列的屬性。
<colgroup> 定義表格列的組。
表格是一個非常重要的模塊，在早期被用來做頁面布局，后隨著div流體布局的出現逐漸被替代，但在數據展示上還發揮著重要作用，本次教程主要講解able表格基本屬性及跨行跨列合并。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
