HTML基本知識點——Table表格
表格<table>標記：
基本格式：語法
<table> <!—定義表格-->
<caption>...</caption> <!—定義表名（標題）-->
<tr> <!—定義錶行-->
<td>...</td> <!—定義表列（單元格）-->
</tr>
<tr>
<td>...</td>
</tr>
</table>
注：將<td>..</td>換成<th>...</th>定義標題欄（單元格內的內容自動加粗居中）
<caption>的屬性：
|
屬性名稱 |
屬性值 |
說明 |
|
align |
top |
標題在表格上方 |
|
bottom |
標題在表格下方 |
基本屬性：
|
屬性 |
用法 |
|
<table bgcolor=””> |
設定表格的背景色 |
|
<table background=””> |
設定表格的背景圖片 |
|
<table border=””> |
設定邊框的寬度，若不設定此屬性，則邊框寬度預設為0 |
|
<table cellpadding=””> |
設定表格單元格邊框與其內部內容之間空間的大小，預設為2（表格的邊距） |
|
<table cellspacing=””> |
設定單元格之間的空間的大小 |
|
<table bordercolor=””> |
設定表格邊框的顏色 |
|
<table bordercolorlight=””> |
設定邊框亮部分的顏色（當border值大於1時起作用）（預設下邊框和右邊框） |
|
<table bordercolordark=””> |
設定邊框暗 |
|
<table align=””> |
設定表格的對齊方式（left,right,center） |
|
<table width=””> |
設定表格的寬度，單位用絕對畫素值或百分比 |
|
<table height=””> |
設定表格的高度，單位用絕對畫素值或百分比 |
<table>標籤下的邊框設定書屬性
|
屬性名稱 |
屬性值 |
說明 |
|
frame 該屬性必須在border的屬性值不為0的狀態下 （table的外框屬性） |
void |
不顯示錶格的邊框 |
|
above |
只顯示錶格的上邊框 |
|
|
below |
只顯示錶格的下邊框 |
|
|
hsides |
只顯示錶格的上下邊線 |
|
|
vsides |
只顯示錶格的左右邊線 |
|
|
lhs |
只顯示錶格左邊線 |
|
|
border/box |
顯示錶格的邊框線 |
|
|
rules （table的內框屬性） |
rows |
只顯示水平方向的格框線 |
|
cols |
只顯示垂直方向的格框線 |
|
|
all |
顯示全部格框線 |
|
|
groups |
表示列組合水平部分 |
|
|
none |
不顯示任何框線 |
列（單元格）<td>的屬性：
|
屬性 |
用途 |
|
<td width=””> |
設定單元格的寬度 |
|
<td height=””> |
設定單元格的高度 |
|
<td bgcolor=””> |
設定單元格的背景顏色 |
|
<td background=””> |
設定單元格的背景圖片 |
|
<td align=””> |
設定單元格的水平對齊方式 |
|
<td valign=””> |
設定單元格的垂直對齊方式 |
|
<td rowspan=””> |
設定行合併數的目 |
|
<td colspan=””> |
設定列合併的數目 |
|
<td nowarp=”nowarp”> |
設定在單元格中不換行 |
|
<td bordercolorlight=””> |
設定邊框亮部分的顏色（當border值大於1時起作用）（預設下邊框和右邊框） |
|
<td bordercolordark=””> |
設定邊框暗部分的顏色（當border值大於1時起作用）（預設上邊框和左邊框） |
表格的結構化
1. 結構化格式：
<tbale>
<thead>..........</thead>-------------表頭區
<tbody>..........</tbody>——————表體區
...........................
<tfoot>....</tfoot>————————---表尾區
</table>
2. 表格列的直列化格式：<colgroup>...</colgroup> （列的組合）
|
屬性名稱 |
屬性值 |
說明 |
|
align |
left |
靠左 |
|
center |
水平居中 |
|
|
right |
靠右 |
|
|
valign |
top |
靠上 |
|
middle |
垂直居中 |
|
|
bottom |
bottom |
|
|
span |
數字 |
從第一列開始向右直列的個數 |
|
bgcolor |
顏色 |
背景顏色 |
注：個別直列設定：格式<col>功能完全和<colgroup>一樣
在HTML程式碼中圖片標記的兩側，不要有空白
錯誤程式碼：
<td>
<imgsrc=”images/pic.jpg”/>
</td>
正確的程式碼：
<td><img src=”images/pic.jpg”/></td>