|
●表格標籤-<table>及屬性應用● <table>.....</table>
<table>標籤可以說是建立表格時最重要的一個標籤，在開始時一定要加上起始標籤<table>，結果時必須加上結尾標籤</table>，不然瀏覽器無法顯示出來。
width、height-表格寬度、高度
用法： <table width="表格寬度值" height="表格寬度值">
說明：在表格中，你可以任意的設定表格的寬度、高度等，但高度對於網頁來說比較不重要，因為表格會自動的調整高度。
border-表格邊框
用法： <table border="寬度值">
說明：設定表格的框線，寬度值越大，它的框線越粗，寬度值為零或是沒有寫上border時，代表表格沒有框線。
bgcolor-表格背景顏色
用法： <table bgcolor="色碼">
說明：設定表格內的背景顏色。
background-表格背景圖片
用法： <table background="圖片路徑">
說明：表格的背景顏色除了利用色碼來顯示外，還可以加上圖片當背景顏色。
align-表格對齊方向
用法： <table align="方向">
說明：align屬性就是設定整個表格在網頁中靠左、靠中或是靠右對齊，設定型態以left、center和right來設定，和圖片的align的情況一樣。
例：
<table width="80" height="40" bgcolor="blue" border="5">
<tr>
<td>1</td>
</tr>
</table>
說明：
寬80、高40，背景顏色為藍色，邊框寬度值為5的表格
●表格列-<tr>及屬性應用● <tr>.....</tr>
表格有分欄和列，<tr>標籤就是代表著列的起頭，它是加在<table>起始標籤和</table>結尾標籤內，有多少個<tr>標籤就代表有多少列。而<tr>和</tr>標籤間可以包含著<th>或<td>兩種標籤，分別代表標題或是表格內文。
bgcolor-表格列背景顏色
用法： <tr bgcolor="色碼">
說明：設定表格中每一列的背景顏色。
align-表格列水平對齊方向
用法： <tr align="方向">
說明：設定表格中每一列所有儲存格內容的水平對齊方向，設定型態有left、center和right三種。
valign-表格列垂直對齊方向
用法： <tr valign="方向">
說明：設定表格中每一列所有儲存格內容的垂直對齊方向，設定型態有top、middle和bottom三種。top是將文字放置在最頂端；middle是將文字放置在居中的位置；bottom是將文字放置在最底端。預設值為middle。
例：
<table width="100" border="1">
<tr bgcolor="red">
<td>1</td>
</tr>
<tr align="right">
<td>2</td>
</tr>
<tr bgcolor="yellow" valign="top">
<td>3</td>
</tr>
</table>
說明：
第一列背景顏色為紅色 ，第二列內容對齊右邊 ，第三列內容對齊頂端，背景顏色為黃色
●表格欄-<td>●
<td>儲存格文字</td>
<td>標籤就是儲存格，也就是所要置資料的欄位，同樣的，<td>標籤必須和<tr>標籤一起配合使用的。
●欄位標題-<th>● <th>標題文字</th>
<th>標籤就是儲存格標題，也就是欄位的標題，被<th>標籤所包含的內容文字會變成粗體字型，並靠中對齊。
●<td>和<th>屬性應用● bgcolor-表格欄背景顏色
用法： <td bgcolor="色碼"> <th bgcolor="色碼">
說明：設定表格中每一欄的背景顏色。
align-表格欄水平對齊方向
用法： <td align="方向"> <th align="方向">
說明：設定儲存格內容水平的對齊方向。設定型態有left、chenter和right三種，預設值為center。
valign-表格欄垂直對齊方向
用法： <td valign="方向"> <th valign="方向">
說明：設定儲存格內容垂直的對齊方向。設定型態有top、middle和bottom三種，預設值為middle。
width-表格欄寬度
用法： <td width="表格寬度值"> <th valign="表格寬度值">
說明：<table>標籤可以設定寬度，它的百分比長度是相對於瀏覽器視窗，而<td>和<th>標籤的寬度是相對於表格的寬度。
height-表格欄高度
用法： <td height="表格寬度值"> <th height="表格寬度值">
說明：height屬性就是用於設定儲存格的高度，高度的設定值也是以用pixel為單位或是百分比來設定。
colspan-橫向合併
用法： <td colspan="合併的儲存格數"> <th colspan="合併的儲存格數">
說明：設定表格欄位的橫向合併。
rowspan-縱向合併
用法： <td rowspan="合併的儲存格數"> <th rowspan="合併的儲存格數">
說明：設定表格欄位的縱向合併。
例一：
<table border="1">
<tr>
<td valign="bottom">1</td>
<td bgcolor="blue">2</td>
<td width="20" align="right">3</td>
<td height="40" bgcolor="red">4</td>
</tr>
</table>
說明：
第一欄向下對齊 ，第二欄背景顏色為藍色 ，第三欄表格寬度值為20，向右對齊 ，第四欄表格高度值為40，背景顏色為紅色
例二：
<table border="1" align="center">
<tr>
<td colspan="3" align="center">1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
說明：
第一列合併第二列的三欄
例三：
<table border="1" align="center">
<tr>
<td rowspan="3" >1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
</table>
說明：
第一欄合併第二欄的三列
|
