<table> 標籤

定義 HTML 表格。一個 HTML 表格包括 <table> 元素，一個或多個<tr> 行、<th> 表頭以及<td> 單元格 元素。更復雜的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。

<p>位於行之間的線條:</p>
<table rules="rows">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </
 
tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>位於列之間的線條:</p>
<table rules="cols">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <
 
td>$100</td>
  </tr>
</table>

<p>位於行和列之間的線條:</p>
<table rules="all">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<caption>標籤

定義表格的標題，必須直接放置到 <table> 標籤之後,只能對每個表格定義一個標題。

<colgroup>標籤

用於對錶格中的列進行組合，以便對其進行格式化。

<col> 標籤 規定了 元素內部的每一列的列屬性。
span 屬性 : number ，規定 <col>， <colgroup> 元素應該橫跨的列數。

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

<thead>、<tbody>、<tfoot>標籤

<thead> 元素的使用條件：

1、 <thead>、 <tbody> 和 <tfoot> 元素結合起來使用（表頭、主體、頁尾）。

2、必須作為 <table> 元素的子元素，出現在 <caption>、<colgroup> 元素之後， <tbody>、 <tfoot> 和 <tr> 元素之前。

<style type="text/css">
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
</style>

<table border="1">
  <thead>    <!--表頭-->
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>    <!--註腳-->
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>     <!--主體-->
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

<tr>標籤

定義 HTML 表格中的行，一個 <tr> 元素包含一個或多個 <th> 或 <td> 元素。

HTML 表格有兩種單元格型別

<th>標籤

表頭單元格 - 包含 頭部資訊（由 <th> 元素建立），粗體並且居中

<td>標籤

標準單元格 - 包含 資料（由 <td> 元素建立），左對齊

<table border="1">
  <caption>Monthly savings</caption>  //表格標題：Monthly savings
  <!--表頭一欄，包含了兩個表頭單元格，兩列兩行-->
  <tr>
    <th valign="middle">Month</th>    //垂直居中對齊
    <th valign="bottom">Savings</th>  //垂直向底部對齊
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>