web-6. 組織頁面的表格
6. 組織頁面的表格
6.1 表格的概念與基本結構
表格就是一些用來劃分稱為矩形區域的類似於柵格的結構。最初，表格是用來組織並顯示相關數據的，這種表現形式可以極大地增強數據的可視性。在HTML語言中，表格的另一個作用就是用來進行頁面布局。
表格可以相互嵌套。
表格的格式如下;
<table>
<tr>
<td>......</td>
......
</tr>
<tr>
<td>......</td>
......
</tr>
......
</table>
其中<table>是表格標記，
例如：
<html>
<head>
<title>表格實例</title>
</head>
<body bgcolor="#dddddd">
<div align=center>
<br><br>
<table border=2 width=600 height=300>
<caption><h2>課程表</h2></caption>
<tr>
<th></th><th>星期一
<th>星期三</th><th>星期四</th><th>星期五</th>
</tr>
<tr>
<th>第1大節</th><th>數學</th><th>英語</th>
<th>數學</th><th>英語</th><th>哲學</th>
</tr>
<tr>
<th>第2大節</th><th>
<th>數學</th><th>英語</th><th>哲學</th>
</tr>
<tr>
<th>第3大節</th><th>數學</th><th>英語</th>
<th>數學</th><th>英語</th><th>哲學五</th>
</tr>
</table>
</div>
</body>
</html>
6.2 常用表格標記及其使用方法
- <table>標記，一個表格的所有的內容都包含在<table>和</table>之間
<table border=”” width=”” heigth=”” bgcolor=”” align=””>
五個參數分別對應：邊框、寬度、長度、背景色、對齊方式
- <tr>標記，用來標識表格中的行。語法格式如下：
<tr align=”” bgcolor=””>
......
</tr>
- <td>與<th>
<td>標記用來標識表格中的單元格，<th>用來標識表格中的標題單元格。標題單元格是一些內容居中、用粗體顯示的單元格。
<th>和<td>屬性與<table>的屬性非常類似，都有bgcolor、width、heigth屬性。另外，<td>與<th>標記還有跨行屬性rowspan與跨列屬性colspan。
<th>標記是居中顯示，所以沒有align屬性。
例子：
<html>
<head>
<title>表格實例</title>
</head>
<body bgcolor="#dddddd">
<div align=center>
<br><br>
<table border=2 width=70% height=50%>
<caption><h2>旅遊計劃表</h2></caption>
<tr bgcolor="#616DDC">
<th></th><th>第一周</th><th>第二周</th>
<th>第三周</th><th>第四周</th>>
</tr>
<tr>
<th>星期一到星期五</th>
<td>到北京旅遊</td><td>到上海旅遊</td>
<td>到澳門旅遊</td><td>到澳門旅遊</td>
</tr>
<tr>
<th>第2大節</th><th>數學</th><th>英語</th>
<th>數學</th><th>英語</th>
</tr>
</table>
</div>
</body>
</html>
- <caption>標識，用來標識表格的標題語句。
<caption align=””>......</caption>
用來設置表格標題的位置，屬性值是“top”（位於表格的上方）或者“bottom”（位於表格的下方），默認值是“top”。
6.3 利用表格進行頁面布局
在設計HTML的時候，一般編程人員會在之上繪制出一個頁面草稿。在草稿中，主要應該標識出頁面的大概布局與主要元素的放置位置。
在進行表格的布局時，可以進行表格的嵌套。
web-6. 組織頁面的表格