HTML表格
表格
表格由 <table> 標籤來定義。每個表格均有若干行（由 <tr> 標籤定義），每行被分割爲若干單元格（由 <td> 標籤定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等。
例如：
<html>
<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>這個表格是有邊框的，即
<table border="1"
表格和邊框屬性
如果不定義邊框屬性，表格將不顯示邊框，如何顯示錶格邊框：
<table border="1">
表格邊框從 1 開始依次變粗，上面所示的代碼顯示的是帶有普通邊框的表格。
表格表頭
表格的表頭使用 <th> 標籤進行定義。
大多數瀏覽器會把表頭顯示爲粗體居中的文本：
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>在瀏覽器顯示出來就是：
| Heading | Another Heading |
|---|---|
| 100 | 200 |
| 300 | 400 |
表格中的空單元格
如果某個單元格是空的（沒有內容），瀏覽器可能無法顯示出這個單元格的邊框。
<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>表格的標題
表格的標題由使用元素：
<html>
<body>
<h4>這個表格有一個標題：</h4>
<table border="1">
<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>顯示出來是：
這個表格有一個標題：
| 100 | 200 | 300 |
| 400 | 500 | 600 |
向表格或表格單元格添加背景顏色或背景圖像
向表格添加：
<table border="1" bgcolor="顏色或url">
向表格單元格添加：
<th bgcolor="顏色或url"> 表頭 </th>
<td bgcolor="顏色或url"> 內容 </td>
在表格單元排列內容
可以使用align屬性來排列內容，如：
<html>
<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">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">化妝品</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">食物</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">總計</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
</body>
</html>除此之外，表格還能在不同的元素裏顯示元素：
<html>
<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>顯示出來是：
|
這是一個段落。 這是另一個段落。 |
這個單元包含一個表格：
|
||||
這個單元包含一個列表：
|
HELLO |
HTML列表
HTML 支持有序、無序和定義列表。
無序列表
無序列表是一個項目的列表，此列項目使用粗體圓點（小黑圓圈）進行標記。
無序列表始於 <ul> 標籤。每個列表項始於 <li>。
例如：
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>顯示：
- Coffee
- Milk
標記也可以通過<type>元素進行改變
<ul type="disc/circle/square">
有序列表
有序列表也是一列項目，列表項目使用數字進行標記。
有序列表始於 <ol> 標籤。每個列表項始於 <li> 標籤。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>顯示：
- Coffee
- Milk
標記也可以通過<type>元素改變：
<ol type="A/a/I/i">
則標記分別爲字母列表，小寫字母列表，羅馬字母列表，小寫羅馬字母列表
定義列表
自定義列表不僅僅是一列項目，而是項目及其註釋的組合。
自定義列表以 <dl> 標籤開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
<html>
<body>
<h2>一個定義列表：</h2>
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>
</body>
</html>顯示：
一個定義列表：
- 計算機
- 用來計算的儀器 … …
- 顯示器
- 以視覺方式顯示信息的裝置 … …