內容定位
：






　如果將儲存格放大，內容也跟著亂跑，有沒有方法把它們定位呢？

　當然可以，寫法是：



<td align="left">

　利用align這個屬性，可以控制橫向定位，left、center、right分別代表

　置左、置中、置右。如果沒有沒有特別設定，預設值是置左。



<td valign="top">

　利用valign這個屬性，可以控制縱向定位，top、middle、bottom分別

　代表置上、置中、置下。預設值是置中。





原始碼
結果


    
<table border="1" width="110" height="150">
<tr><td align="right">置右</td>
    <td align="center">置中</td></tr>
<tr><td valign="top">置上</td>
    <td valign="bottom">置下</td></tr>
</table>



置右
置中
置上
置下















表格顏色
：






　我們也可以控制整個表格，甚至任何一個儲存格的顏色。寫法是：



<table bgcolor="#FFD350">

　控制整個表格的顏色。



　其中  #FFD350 是網頁所使用的顏色代碼，變換這些色碼，可自行

　設定顏色。



<tr bgcolor="#FFD350">

　控制單一列的顏色。



<td bgcolor="#FFD350">

　控制單一儲存格的顏色。





　有了這個屬性，我們可以來玩一點特別的，稱之為色塊，簡單的說

　，就是把框線的粗細變成 0，再配合背景的顏色，就可以出現下面

　的效果了。





原始碼
結果


    
<table border="0">
<tr>
<td bgcolor="#FFD350">暱稱</td>
<td bgcolor="#FFD350">傲楓</td>
</tr>
<tr>
<td bgcolor="#FFD350">綽號</td>
<td bgcolor="#FFD350">轉轉龜</td>
</tr>
<tr>
<td bgcolor="#FFD350" colspan="2">痞子一個</td>
</tr>
</table>



暱稱
傲楓
綽號
轉轉龜
痞子一個















進階控制
：





<caption>...</caption>

　夾在這組配對標籤中的文字，會變成表格的標題。




<table cellpadding="20">

　cellpadding 這個屬性可以控制內容與框線的距離，數字越大距離越遠。







原始碼
結果


    
<table border="1" cellpadding="25">
<caption>數字遊戲</caption>
<tr><td>1</td><td>2</td><tr>
<tr><td>3</td><td>4</td><tr>
</table>



數字遊戲
1
2
3
4










<table cellspacing="10">

　cellspacing 這個屬性，控制框線與框線之間的間距，如下圖所示。















框線裝飾
：





　最後是框線裝飾部分了，配色好的框線，可以大大的美化表格。



<table bordercolor="#000080">

　其中bordercolor用來控制所有框線的顏色。






原始碼
結果


    
<table border="3" bordercolor="#000080">
<tr><td>1-1</td><td>1-2</td></tr>
</table>



1-1
1-2








<table bordercolorlight="blue" bordercolordark="red">

　其中bordercolorlight用來控制亮邊框線的顏色。

　　　bordercolordark用來控制暗邊框線的顏色。







原始碼
結果


    
<table border="3" bordercolorlight="blue" bordercolordark="red">
<tr><td>1-1</td><td>1-2</td></tr>
</table>



1-1
1-2













回上一章　繪製表格　　　　　　到下一章　分割視窗