知識點：表格標籤、表格標籤的屬性、單元格的跨行與跨列、單元格屬性

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>定義表頭單元格。表格中的文字將以粗體顯示。
• 當表格的單元格內容為空時，在有些瀏覽器中將不能正常顯示單元格的邊框，此時可以在該單元格中放置一個空白元素&nbsp; 來解決顯示問題

3、表格的屬性

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製作百度首頁。