1.表格這個例子演示如何在 HTML 文檔中創建表格。
<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>
2.表格邊框
本例演示各種類型的表格邊框。 ###border="1" 加粗和加深邊框，值越大越好
<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>
3.沒有邊框的表格
本例演示一個沒有邊框的表格。 border="1" #等於1 是有邊框的， 等於0 就沒有邊框了
<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>
</table>
4.表格中的表頭(Heading)
本例演示如何顯示表格表頭。
<h1>表格中的表頭</h1>
<table border="1">
<tr>
<th>姓名</th>
<th>電話</th>
<th>性別</th>
</tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td> 男</td>
</table>
<h4>垂直表頭</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>鄒立翔</td>
</tr>
<tr>
<th>電話</th>
<td>1234545</td>
</tr>
<tr>
<th>性別</th>
<td>男</td>
</tr>
</table>
<h4>這個表格也沒有邊框</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
32.帶有標題的表格
本例演示一個帶標題 (caption) 的表格
<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>
33.跨行或跨列的表格單元格
本例演示如何定義跨行或跨列的表格單元格。 ##colspan ="2" 跨兩列
<h4>橫向兩列的單元格</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">電話</th>
</tr>
<tr>
<td>鄒立翔</td>
<td>123213</td>
<td>223434</td>
</tr>
##################
<h4>橫跨兩行的單元格</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>鄒立翔</td>
</tr>
<tr>
<th rowspan="2">電話</th>
<td>2132432</td>
</tr>
<tr>
<td>2434343</td>
</tr>
</table>
34.表格內的標簽
本例演示如何顯示在不同的元素內顯示元素。
<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>
35.單元格邊距(Cell padding)
本例演示如何使用 Cell padding 來創建單元格內容與其邊框之間的空白。
<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>
36.單元格間距(Cell spacing)
本例演示如何使用 Cell spacing 增加單元格之間的距離。
<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>
37.向表格添加背景顏色或背景圖像
本例演示如何向表格添加背景。
<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="1.png">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
38.向表格單元添加背景顏色或者背景圖像
本例演示如何向一個或者更多表格單元添加背景。
<h4>單元背景</h4>
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td background="1.png">
Sedcond</td>
<td>Row</td>
</tr>
</table>
39.在表格單元中排列內容
本例演示如何使用 "align" 屬性排列單元格內容,以便創建一個美觀的表格。
<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">$241</td>
<td align="right">$200</td>
</tr>
<tr>
<td align="left">化妝品</td>
<td align="right">$30</td>
<td align="right">$40</td>
</tr>
<tr>
<td align="f=left">食物</td>
<td align="right">$730</td>
<td align="right">$650</td>
</tr>
<tr>
<th align="left">總計</th>
<th align="right">$1200</th>
<th align="right">$744</th>
</tr>
</table>
40.框架(frame)屬性
本例演示如何使用 "frame" 屬性來控制圍繞表格的邊框。
<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>$100</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>$100</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>$100</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>$100</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>$100</td>
</tr>
</table>