HTML表格允許web作者將文本、圖像、連結、其他表格等數據排列成單元格的行和列。
HTML表格使用<table>標記創建，其中<tr>標記用於創建表格行，<td>標記用於創建數據單元格。默認情況下，<td>下的元素是規則的和左對齊的
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
這將產生以下結果&負;
在這裡，邊框是<table>標記的一個屬性，用於在所有單元格中放置邊框。如果不需要邊框，則可以使用border=「0」。
Table Heading
可以使用<th>標記定義表標題。此標記將替換用於表示實際數據單元格的標記。通常，您會將最上面一行作爲表標題，如下所示，否則您可以在任何行中使用<th>元素。默認情況下，<th>標記中定義的標題居中且粗體。
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
這將產生以下結果&負;
Cellpadding and Cellspacing Attributes
有兩個屬性稱爲cellpadding和cellspacing，用於調整表格單元格中的空白。cellspacing屬性定義表單元格之間的空間，而cellpadding表示單元格邊框與單元格內內容之間的距離。
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
這將產生以下結果&負;
Colspan and Rowspan Attributes
如果要將兩列或多列合併爲一列，則將使用colspan屬性。如果要合併兩個或多個行，則使用rowspan的類似方法。
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
這將產生以下結果&負;
Tables Backgrounds
您可以使用以下兩種方法之一設置表背景−
bgcolorattribute−您可以爲整個表格設置背景色，也可以僅爲一個單元格設置背景色。
background屬性−您可以爲整個表格或僅爲一個單元格設置背景圖像。
也可以使用border color屬性設置邊框顏色。
注意：HTML5中不推薦使用的bgcolor、background和bordercolor屬性。不要使用這些屬性。
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
這將產生以下結果&負;
下面是使用background屬性的示例。在這裡，我們將使用/images目錄中提供的圖像。
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
這將產生以下結果。此處背景圖像不適用於表的標題。
Table Height and Width
您可以使用width和height屬性設置表格的寬度和高度。可以按像素或可用螢幕面積百分比指定表格寬度或高度。
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
這將產生以下結果&負;
Table Caption
標題標記將用作表的標題或說明，並顯示在表的頂部。在較新版本的HTML/XHTML中不推薦使用此標記。
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>
這將產生以下結果&負;
Table Header, Body, and Footer
桌子可以分爲三部分：頭、身和腳。head和foot與word處理的文檔中的header和footer非常相似，每個頁面的header和footer都保持不變，而body是表的主要內容持有者。
分隔桌子的頭、身和腳的三個元素是&負;
<thead>−創建單獨的表格標題。
<tbody>−表示表格的主體。
<tfoot>−創建單獨的表頁腳。
一個表可以包含多個<tbody>元素來指示不同的頁或數據組。但值得注意的是，<thead>和<tfoot>標記應該出現在<tbody>
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
這將產生以下結果&負;
Nested Tables
你可以在另一張桌子裡面用一張桌子。不僅是表，您還可以使用表數據標記中的幾乎所有標記<td>。
Example
下面是在表單元格中使用另一個表和其他標記的示例。
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
這將產生以下結果&負;