JavaWeb學習之路(21)–HTML之表格

1. 前言

表格有多重要我就不需要贅述了吧，我們日常通路的網頁處處都有表格，是以表格是非常非常重要的HTML元素。

本篇我們就來簡單介紹下表格的用法。

2. 表格标簽

我們可以使用<table>标簽來定義一個表格，然後使用border屬性來設定表格邊框的寬度，如下。

注意此時表格裡面還沒有内容，是以網頁也顯示不出什麼東西來。

<table border="1">

   </table>

1

2

3

3. 表格的行與列

HTML的表格是先編寫行<tr>，然後在行裡面編寫列<td>，是以我們定義一個表格如下：

       <tr>

           <td>張三</td>

           <td>男</td>

       </tr>

           <td>李四</td>

           <td>女</td>

4

5

6

7

8

9

10

這個表格首先有2行，即2個tr。然後每一行有兩列，即兩個td。是以效果如下：

4. 頁眉

表格一般需要有标題，我們可以把标題放到頁眉裡面。頁眉标簽為thead，标題列的标簽為th。是以帶頁眉标題的代碼如下。

需要注意的是，定義頁眉後，我們一般将行列放到表格的主體tbody标簽内部，這樣更加規範。

 <table border="1">

       <thead>

           <th>姓名</th>

           <th>性别</th>

       </thead>

       <tbody>

           <tr>

               <td>張三</td>

               <td>男</td>

           </tr>

               <td>李四</td>

               <td>女</td>

       </tbody>

11

12

13

14

15

16

效果如下，可見标題列字型是加粗的。

5. 頁腳

表格還可以添加頁腳，可以在頁腳顯示一些附加資訊，例如學生的總數，頁腳标簽為tfoot。添加頁腳後代碼如下：

      <thead>

          <th>姓名</th>

          <th>性别</th>

      </thead>

      <tbody>

          <tr>

              <td>張三</td>

              <td>男</td>

          </tr>

              <td>李四</td>

              <td>女</td>

      </tbody>

      <tfoot>

              <td>

                  學生總數:

              </td>

                  2人

      </tfoot>

  </table>

對應效果如下：

一般頁腳用的比較少。

6. 小結

HTML表格主要表達了表格的内容，具體如何将表格做的好看，還得使用CSS，後續課程我們會對CSS樣式進行講解。