認識表格標簽 table 標簽

表格在我們的網頁中是非常常見的，比如我們要展示商品信息，工作安排，產品參數等都需要用到表格。那么在 html 中，使用表格就需要用到 table 標簽了。但是表格不僅是 table 一個標簽，需要用到和表格相關的一組標簽，這一小節我們就來學習這些標簽吧。

1. 表格的結構

在使用表格標簽之前，我們需要先認識一下在 html 中表格是由哪些結構構成的。一般情況下，表格都表頭、表身構成。表頭里面放每一列對應的字段，一般是一個描述，如姓名、年齡等，表身則放每一個表頭對應的具體的值，如張三對應表頭的姓名，20 對應表頭的年齡。表格有行和列的概念，行就代表一個數據的所有屬性，比如姓名：張三，年齡：20，而列則表示一個表頭對應的所有數據，比如姓名這一列就只有姓名，如張三、李四等。通常情況下，我們都是先確定表頭，然后再確定每行對應表頭的具體數據。

2. 表格的使用

想要編寫表格，需要用到表格的一組標簽。table 標簽表示表格整體，類似 ul 和 ol 表示列表整體一樣。在 table 標簽里， thead標簽表示表頭， tbody 標簽表示表示。 在 table 表頭中， tr 標簽代表行， th 標簽代表表頭的每一項。在 tbody 標簽中， tr 標簽代表行， td 標簽代表每一個表頭對應的具體數據。代碼如下：

 <table>
    <!-- thead 代表表頭 -->
    <thead>
      <!-- tr代表表頭這一行 -->
      <tr>
        <!-- th代表表頭的每一項 會有加粗的效果 -->
        <th>姓名</th>
        <th>年齡</th>
        <th>性別</th>
      </tr>
    </thead>
    <!-- tbody 代表表身 表格的具體內容 -->
    <tbody>
      <!-- tr代表表身的每一行 -->
      <tr>
        <!-- td代表對應表頭的具體數據 -->
        <td>小明</td>
        <td>20</td>
        <td>男</td>
      </tr>
      <tr>
        <td>小紅</td>
        <td>18</td>
        <td>女</td>
      </tr>
    </tbody>
  </table>

效果如下:

我們可以給表格添加 border屬性給表格添加邊框，border屬性的值為正整數，默認為 0，則無邊框，我們把border 設置為 1，代碼如下：

<table border='1'>
    <!-- 代碼和上面演示代碼一致 -->
    ...
</table>

則會呈現以下效果：

我們還可以給 table 設置cellpadding來使用單元格填充來創建單元格內容與其邊框之間的空白，cellpadding值也是正整數，我們把表格的 cellpadding設置為 10，代碼如下：

<table border='1' cellpadding='10'>
    <!-- 代碼和上面演示代碼一致 -->
    ...
</table>

則效果如下：

我們還可以給 table 設置cellspacing來設置單元格與單元格直接的距離，cellspacing值也是正整數，我們把表格的 cellspacing設置為 10，代碼如下：

<table border='1' cellspacing='10'>
    <!-- 代碼和上面演示代碼一致 -->
    ...
</table>

效果如下：

我們也可以為表格添加標題，那么我們就需要在 thead 標簽前加上 caption 標簽，而 caption 標簽的內容則是表格的標題，代碼如下：

<table>
    <caption>學生表</caption>
    <!-- 代碼和上面演示代碼一致 -->
    ...
</table>

效果如下：

3. 注意事項

1. tr 標簽只能嵌套 th 和 td 標簽，不能嵌套其他標簽；
2. tr 代表表格的每一行；
3. td 標簽的內容必須和表頭的信息對應。

4. 真實案例分享

北京大學官網

<table>
    <thead>
        <tr>
            <th>課號</th>
            <th>課程名稱</th>
            <th>開課單位</th>
            <th>學分</th>
            <th>總周數<br>(起止周)</th>
            <th>課程類型</th>
            <th>上課時間</th>
            <th>班號</th>
            <th>上課教師</th>
            <th>備注</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>01132632</td>
            <td><p style="text-align:center;padding:5px;"><a href="http://elective.pku.edu.cn/elective2008/edu/pku/stu/elective/controller/courseDetail/getCourseDetail.do?kclx=BK&course_seq_no=BZ1920301132632_15745" target="_blank">生物化學討論課<br>Current topics on Biochemistry</a></p></td>
            <td>生命科學學院</td>
            <td>2</td>
            <td>2(1-2)</td>
            <td>A</td>
            <td><p>星期一(第10節-第12節)</br>星期二(第10節-第12節)</br>星期三(第10節-第12節)</br>星期四(第10節-第12節)</br>星期五(第10節-第12節)</br>星期六(第10節-第12節)</br></p></td>
            <td>1</td>
            <td>鐘上威</td>
            <td><p>6月29-7月7日，10-12節，選修同學需先修生物化學理論課</p></td>
		</tr>
		<tr>
    <td>01132022</td>
    <td><p><a href="http://elective.pku.edu.cn/elective2008/edu/pku/stu/elective/controller/courseDetail/getCourseDetail.do?kclx=BK&course_seq_no=BZ1920301132022_18636" target="_blank">遺傳學討論<br>Current topics on Genetics</a></p></td>
    <td>生命科學學院</td>
    <td>2</td>
    <td>2(3-4)</td>
    <td>A</td>
    <td><p>星期一(第10節-第12節)</br>星期二(第10節-第12節)</br>星期三(第10節-第12節)</br>星期四(第10節-第12節)</br>星期五(第10節-第12節)</br></p></td>
	<td>1</td>
	<td>范六民</td>
	<td><p>上課時間：7月13日-7月24日，10-12節。選修同學需先修遺傳學理論課</p></td>
	</tr>
  </tbody>
</table>

5. 小結

1. 表格的結果為表頭和表身，可以為表格添加標題。
2. thead 代表表頭，tbody 代表表身， thead 嵌套 tr 和 th， tbody 里嵌套 tr 和 td。
3. tr 里只能嵌套 th 和 td， th 一般用來表示表頭，有加粗的樣式。 td 代表表頭對應的具體數據。
4. 原生的表格樣式比較丑，我們可以通過 CSS 為表格設置樣式。