HTML+CSS第三課:表格標籤的使用
知識點:表格標籤、表格標籤的屬性、單元格的跨行與跨列、單元格屬性
1、表格的基本結構
表格是由指定的數目的行和列組成的。
單元格:表格的最小單位,一個表格由一個或多個單元格組成。
行:表格是由一個或多個行堆疊而成。
列:表格是由一個或多個列堆疊而成。
2、表格的基本語法
在HTML文件中,表格通過<table>、<tr>、<td>標籤來完成
<table><!--定義一個表格開始--> <caption>表格標題</caption><!--定義一個表格的標題。可以不用--> <tr><!--定義一行標籤開始,一組行標籤內可以建立多組由<td>標籤所定義的單元格--> <td>第1行中的第1列</td><!--定義一個單元格標籤--> <td>第1行中的第2列</td> <td>第1行中的第3列</td> </tr> <tr> <td>第2行中的第1列</td> <td>第2行中的第2列</td> <td>第2行中的第3列</td> </tr> </table><!--定義一個表格結束-->
程式碼演示效果
注意:
- 在一個最基本的表格中,必須包含一組<table>標籤,一組<tr>標籤和一組<td>或<th>標籤。
- <th></th>定義表頭單元格。表格中的文字將以粗體顯示。
- 當表格的單元格內容為空時,在有些瀏覽器中將不能正常顯示單元格的邊框,此時可以在該單元格中放置一個空白元素 來解決顯示問題
3、表格的屬性
屬性 | 值 | 描述 |
width | % | 規定表格的寬度。 |
pixels | ||
height | % | 規定表格的高度。 |
pixels | ||
border | pixels | 規定表格邊框的寬度。 |
bordercolor | 顏色 | 規定表格邊框的顏色。 |
align(水平對齊方式) | left | 不贊成使用。請使用樣式代替。 |
center | ||
right | 規定表格相對周圍元素的對齊方式。 |
|
bgcolor(表格背景顏色) | rgb(x,x,x) | 不贊成使用。請使用樣式代替。 |
#xxxxxx | ||
colorname | 規定表格的背景顏色。 | |
cellpadding | pixels | 規定單元格邊框與其內容之間的空白。 |
% | ||
cellspacing | pixels | 規定單元格之間的空白。 |
% |
4、單元格的跨行與跨列
一般使用<td>元素的rowspan屬性來實現單元格的跨行操作,使用<td>元素的colspan屬性來實現單元格跨列操作。
rowspan跨行:單元格在垂直方向上合併。
colspan跨列:單元格的橫向合併。
舉例實現單元格的跨行或跨列,可以分為以下幾個步驟:
1)首先將無跨行跨列的表格的程式碼編寫好;
2)將需要最終合併成一個單元格的所有單元格視為一組;
3)將該組的第一個單元格里設定跨行或跨列屬性,如colspan=“2”;
4)刪除這一組中的其他的單元格
<table border="1px"> <!--單元格的跨列練習-->
<caption>表格標題</caption>
<tr>
<th colspan="2">第一行的第一個單元格</th>
<th>第一行的第二個單元格</th>
</tr>
<tr align="right">
<td>第二行的第一個單元格</td>
<td>第二行的第二個單元格</td>
<td>第二行的第三個單元格</td>
</tr>
</table>
跨列程式碼演示結果:
<table border="1px"> <!--單元格的跨行練習-->
<caption>表格標題</caption>
<tr>
<th rowspan="2">第1行的第一個單元格</th>
<th>第1行的第二個單元格</th>
<th>第1行的第三個單元格</th>
</tr>
<tr>
<td>第2行的第二個單元格</td>
<td>第2行的第三個單元格</td>
</tr>
</table>
跨行程式碼演示結果:
注意:同一個單元格,不能出現又跨行、又跨列。
5、單元格的對齊-單元格內文字相對於邊框的位置
設定<td>標籤的屬性
align:水平對齊屬性,取值為left、center、right
valign:垂直對齊屬性,取值為top、middle、bottom
練習:1、使用table標籤製作課程表,並且美化課程表(如給表格設定背景影象/顏色、設定單元格對齊方式等)
思考:如何製作一個寬度為1px的細實線表格(提示:可以設定表格table標籤的屬性border為0,bgcolor為黑色,cellspacing為1px,tr的背景為白色。原理:表格每一行的白色背景會覆蓋表格的黑色背景,只有單元格間距會露出1px的黑色背景。)
練習:2、利用table製作百度首頁。