表格有三大元素：table、tr、td。
表格
表格由<table>标簽來定義。每個表格均有若幹行（由<tr>标簽定義），每行被分割為若幹單元格（由<td>标簽定義）。
字母tr指表格行（table row）；字母td指表格資料（table data），即資料單元格的内容。
資料單元格可以包含文本、圖檔、清單、段落、表單、水準線、表格等。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>無邊框表格</title>
</head>
<body>
<table>
<tr>
<td>(1, 1)</td>
<td>(1, 2)</td>
</tr>
<tr>
<td>(2, 1)</td>
<td>(2, 2)</td>
</tr>
</table>
</body>
</html>
在浏覽器中顯示如下：
表格和邊框屬性
如果不定義邊框屬性，表格将不顯示邊框。有時這很有用，但大多數時候，我們希望顯示邊框。
使用邊框屬性border來顯示一個帶有邊框的表格。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有邊框表格</title>
</head>
<body>
<table > <!-- 機關是像素，可省略 -->
<tr>
<td>(1, 1)</td>
<td>(1, 2)</td>
</tr>
<tr>
<td>(2, 1)</td>
<td>(2, 2)</td>
</tr>
</table>
</body>
</html>
但是不建議使用border屬性定義邊框，推薦使用css
表格的表頭
表格的表頭使用<th>标簽定義。
大多數浏覽器會把表頭顯示為粗體居中的文本。
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有表頭的表格</title>
</head>
<body>
<table >
<tr>
<th>第一列</th>
<th>第二列</th>
</tr>
<tr>
<td>(1, 1)第一行第一列</td>
<td>(1, 2)第一行第二列</td>
</tr>
<tr>
<td>(2, 1)第二行第一列</td>
<td>(2, 2)第二行第二列</td>
</tr>
</table>
</body>
</html>
表格中的空單元格
在一些浏覽器中，沒有内容的表格單元顯示得不太友好。如果某個單元格是空的（沒有内容），浏覽器可能無法顯示出這個單元格的邊框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有空單元格的表格</title>
</head>
<body>
<table >
<tr>
<td>(1, 1)</td>
<td>(1, 2)</td>
</tr>
<tr>
<td> </td>
<td>(2, 2)</td>
</tr>
</table>
</body>
</html>
為了避免這種情況，在空單元格中添加一個空格占位符，就可以将邊框顯示出來
合并單元格
使用屬性colspan和rowspan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有合并單元格的表格</title>
</head>
<body>
<table >
<tr>
<th>第一列</th>
<th>第二列</th>
</tr>
<tr>
<td rowspan="2">(1, 1)第一行第一列</td>
<td>(1, 2)第一行第二列</td>
</tr>
<tr>
<td>(2, 2)第二行第二列</td>
</tr>
<tr>
<td colspan="2">(3, 1)第三行第一列</td>
</tr>
</table>
</body>
</html>
附：其實還有<thead><tbody><tfoot>這三個标簽，但是因為浏覽器支援太差，是以很少出現。