HTML學習之表格

標籤：color   io   使用   ar   資料   div   sp   html   on   

HTML建立表格：

§使用表格可以劃分頁面的布局

格式：<table>..</table>

<table>

<tr><td>表格中的一行資料</td></tr>  <!--表格中的一行資料-->

<tr><td>表格中的二行資料</td></tr>  <!--表格中的一行資料-->

<tr><td>表格中的三行資料</td></tr>  <!--表格中的一行資料-->

</table>

測試執行個體如下：

<html><head><title>標題</title></head><body><table border="1"><tr><td>表格中的一行資料</td><td>表格中的一行資料</td></tr>  <tr><td>表格中的二行資料</td><td>表格中的二行資料</td></tr><tr><td>表格中的三行資料</td><td>表格中的三行資料</td></tr>  </table></body></html>

<table>標籤的屬性：

border  設定表格邊框

caption  設定表格標題

align     設定表格在網頁中的布局

width     設定表格寬度

height     設定表格高度

cellspacing  設定表格各單元格之間距離

cellpadding  設定單元格內部與文本之間的間距

bordercolor  設定表格邊框顏色

bordercolorlight   設定表格亮面顏色

Bordercolordark       設定表格暗面顏色

測試程式如下：

<html><head><title>標題</title></head><body><table border="1" width="50%" height="100" bordercolorlight="#FF0000" bordercolordark="#00FF00"><tr><td>表格中的一行資料</td><td>表格中的一行資料</td></tr>  <tr><td>表格中的二行資料</td><td>表格中的二行資料</td></tr>     <tr><td>表格中的三行資料</td><td>表格中的三行資料</td></tr></table></body></html>

<tr>標籤的屬性：  bgcolor設定背景顏色。align 設定行對齊。   valign 設定單元格垂直對齊

測試程式如下：

<html><head><title>標題</title></head><body><table  width="400" border="1"><tr bgcolor="#0099FF"><td>表格中的一行資料</td><td>表格中的一行資料</td></tr>  <tr align="right"><td>表格中的二行資料</td><td>表格中的二行資料</td></tr>     <tr valign="top"><td height="50">表格中的三行資料</td><td>表格中的三行資料</td></tr></table></body></html

<td>和<th>標籤的屬性：

bgcolor    設定單元各背景顏色

rowspan   設定單元格所佔行數

colspan    設定單元格所佔的列數

align          設定對齊

valign        設定單元格垂直對齊

width         設定單元格寬度

height        設定單元格高度

測試程式如下：

<html><head><title>標題</title></head><body><table  width="400" border="1"><tr><td bgcolor="#0099FF">表格中的一行資料</td><td align="center">表格中的一行資料</td></tr>  <tr><td>表格中的二行資料</td><td>表格中的二行資料</td></tr>     <tr><td>表格中的三行資料</td><td>表格中的三行資料</td></tr></table><hr><B>rowspan</B>      <table  width="400" border="1"><tr> <td rowspan="3">一行資料</td> <td>第一行資料</td></tr>  <tr>       <td>第二行資料</td></tr>     <tr>                               <td>第三行資料</td></tr></table><hr><B>colspan</B><table  width="400" border="1"><tr><td colspan="2">第一行資料</td></tr>  <tr><td>第二行資料</td><td>第二行資料</td></tr>     <tr><td>第三行資料</td><td>第三行資料</td></tr></table><hr><B>th</B><table border="1"><tr><th>表格中的一行資料</th><th>表格中的一行資料</th></tr><!--前者用來顯示資料的名稱，後者用來顯示資料的內容。--><tr><td>表格中的二行資料</td><td>表格中的二行資料</td></tr>     <tr><td>表格中的三行資料</td><td>表格中的三行資料</td></tr></table></body></html>

HTML學習之表格