HTML table基礎

前言

HTML 中的<table>標籤表示表格數據----經過二維數據表來展現信息。

表格相關的HTML標籤：<table> <tr> <td> <th> <thead> <tbody> <tfoot> <caption> <col> <colgroup>
表格標籤的編寫順序：

• <table> 定義表格 每一個表格從 <table> 開始

• <caption> 定義表格標題，可選（可寫可不寫，根據須要）

• <colgroup> 用於對錶格的列進行組合，以方便對列設置屬性，可選

• <col> 用於爲表格的列設置屬性，可選

• <thead> 用於對錶格的表頭內容進行分組，可選

• <tfoot> 用於對錶格的頁腳、腳註或表注進行分組，可選

• <tbody> 用於組合表格的主體內容，可選

• <tr> 定義表格中的行 每一個表格行從 <tr> 開始

• <td> 定義單元格 每一個單元格從 <td> 開始

• <th> 定義表頭單元格

• <thead>、<tbody> 以及 <tfoot> 不多被使用

表格實驗

1 . 無邊框表格

<table>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

---

2 . 普通邊框表格

<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

---

3 . 粗邊框表格

<table border="15">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

---

4 . 爲表格設置cellpadding屬性

<table border="1" cellpadding="100">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

---

5 . 爲表格設置cellspacing屬性

<table border="1" cellspacing="20">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<table border="1" cellspacing="0">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

---

6 . 爲表格設置border-collapse屬性

<table border="1" style="border-collapse: collapse;">
<tr>
  <td>First </td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

---

7 . 爲表格設置frame屬性

<table frame="box">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<table frame="above">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<table frame="hsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

---

8 . 表格跨列、跨行

<!-- 橫跨兩列的單元格 -->
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">電話</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>


<!-- 橫跨兩行的單元格 -->
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">電話</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

---

9 . 使用<col> <colgroup>爲列設置屬性

爲行設置屬性? 設置<tr>便可。

<table width="100%" border="1">
  <col style='background: #ccc;' />
  <col style='background: #444;' />
  <col style='background: #888;' />
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>2489604</td>
    <td>My first CSS</td>
    <td>$47</td>
  </tr>
</table>

<table width="100%" border="1">
  <colgroup span="2" style="background: #ddd;font-weight: bold;"></colgroup>
  <colgroup style="background:blue;"></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>
  <tr>
    <td>2489604</td>
    <td>My first CSS</td>
    <td>$47</td>
  </tr>
</table>

---

後語

• 第一次是用 segmentfault 寫文章就發現能夠將剪切板的圖片粘貼（Ctrl + V）添加到文章，很驚喜。 以前使用的是做業部落，會員才能上傳圖片。

參考資料：
【1】W3school http://www.w3school.com.cn/ta...
【2】MDN https://developer.mozilla.org...