表格 HTML系列文章目錄 HTML網頁設計：一、HTML的基本結構HTML網頁設計：二、網頁的基本標簽HTML網頁設計：三、圖像標簽之＜img＞標簽HTML網頁設計：四、超鏈接HTML網頁設計：五、行內元素和塊元素HTML網頁設計：六、列表HTML網頁設計：七、表格HTML網頁設計：八、媒體元素HTML網頁設計：九、網頁的簡單布局HTML網頁設計：十、內聯框架HTML網頁設計：十一、表單
文章目錄
1.表格的定義
HTML中表格由標簽來定義。每個表格均有若干行（由 標簽定義），每行被分割為若干單元格（由標簽定義），表格標題由標簽指定,表頭由標簽指定。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
其定義格式如下：
<table>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>
網頁顯示如下：
1.表格的常用屬性
（1）屬性：表格和邊框屬性，如果不定義邊框屬性，表格將不顯示邊框。
代碼示例如下：
<table border="1px">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>
網頁顯示如下：
（2）屬性：規定單元格之間的空間。
一個具有標題和表頭網頁設計中表格設計的技巧與原則，取消單元格之間間距的表格代碼示例如下：
<table border="1px" cellspacing="0">
<caption>一個表格</caption>
<tr>
<th>第一列</th>
<th>第二列</th>
</tr>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>
網頁顯示如下：
（3）屬性：規定單元邊沿與其內容之間的空白。
代碼示例如下：
<table border="1px" cellspacing="0" cellpadding="10">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>
網頁顯示如下：
（4）屬性：向表格或表格單元添加背景顏色。
（5）屬性：向表格或表格單元添加背景圖像。
（6）align屬性：規定表格或單元格中內容的水平對齊方式。屬性值可以取left左對齊、right右對齊、居中對齊這三種。
align屬性練習代碼示例：
<table border="1px" cellspacing="0" width="500px" align="center">
<tr>
<td align="right">第一行第一列</td>
<td align="right">第一行第二列</td>
</tr>
<tr align="center">
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
<tr align="left">
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>
網頁顯示如下：
3.跨行、跨列單元格
表格中的跨列單元格使用屬性網頁設計中表格設計的技巧與原則，跨行單元格使用屬性。
代碼示例如下：
<table border="1" cellspacing="0" width="400px">
<caption>課程表</caption>
<tr>
<th rowspan="2">時間\星期</th>
<th colspan="5">星期</th>
</tr>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<th rowspan="2">上午</th>
<td>語文</td>
<td>語文</td>
<td>語文</td>
<td>語文</td>
<td>語文</td>
</tr>
<tr>
<td>語文</td>
<td>語文</td>
<td>語文</td>
<td>語文</td>
<td>語文</td>
</tr>
<tr>
<th rowspan="2">下午</th>
<td>數學</td>
<td>數學</td>
<td>數學</td>
<td>數學</td>
<td>數學</td>
</tr>
<tr>
<td>數學</td>
<td>數學</td>
<td>數學</td>
<td>數學</td>
<td>數學</td>
</tr>
</table>
網頁顯示如圖：
所有代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格學習</title>
</head>
<body>
<!-- 不帶邊框的表格-->
<table>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>
<br/>
<!-- 帶邊框的表格-->
<table border="1px">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>
<br/>
<!--取消單元格間距 帶邊框的表格 帶標題和表頭-->
<table border="1px" cellspacing="0" >
<caption>一個表格</caption>
<tr>
<th>第一列</th>
<th>第二列</th>
</tr>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>
<br/>
<!-- 規定單元邊沿與其內容之間的間距為10-->
<table border="1px" cellspacing="0" cellpadding="10">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>
<br/>
<!-- align屬性練習-->
<table border="1px" cellspacing="0" width="500px" align="center">
<tr>
<td align="right">第一行第一列</td>
<td align="right">第一行第二列</td>
</tr>
<tr align="center">
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
<tr align="left">
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>
<br/>
<!-- 跨行列練習-->
<table border="1" cellspacing="0" width="400px">
<caption>課程表</caption>
<tr>
<th rowspan="2">時間\星期</th>
<th colspan="5">星期</th>
</tr>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<th rowspan="2">上午</th>
<td>語文</td>
<td>語文</td>
<td>語文</td>
<td>語文</td>
<td>語文</td>
</tr>
<tr>
<td>語文</td>
<td>語文</td>
<td>語文</td>
<td>語文</td>
<td>語文</td>
</tr>
<tr>
<th rowspan="2">下午</th>
<td>數學</td>
<td>數學</td>
<td>數學</td>
<td>數學</td>
<td>數學</td>
</tr>
<tr>
<td>數學</td>
<td>數學</td>
<td>數學</td>
<td>數學</td>
<td>數學</td>
</tr>
</table>
</body>
</html>