如何在Blogger加上表格及表格調整技巧

 Blogger是Google提供的免費部落格平台，好用、方便、快速，可是，它的撰寫模式很多功能都沒有，必須寫程式碼來達成，其中一項就是加入表格。

回到「Blogger教學」頁面

目錄：

1. 加入表格
2. 加入隔線
3. 調整為全螢幕
4. 文字置中
5. 平均分配欄寬
6. 重點整理

加入表格

步驟如下：

• 進入「HTML檢視」。

• 在要加入表格的地方貼入以下程式碼：

<table>

  <tr>

    <th>股票</th>

    <th>股價</th> 

    <th>本益比</th>

  </tr>

  <tr>

    <td>鴻海</td>

    <td>100</td>

    <td>10</td>

  </tr>

  <tr>

    <td>大立光</td>

    <td>3000</td>

    <td>12</td>

  </tr>

  <tr>

    <td>台灣高鐵</td>

    <td>100</td>

    <td>12</td>

  </tr>

</table>

• 結果如下：

加入隔線

• 進入「HTML檢視」。
• 在文章開頭處貼上以下程式碼：

<style>

table, th, td {

  border: 1px solid black;

}

</style>

• 結果如下

調整為全螢幕

• 進入「HTML檢視」。
• 在文章開頭處貼上以下程式碼：

<style>

table, th, td {

  border: 1px solid black;

}

table{

  width:100%

}

</style>

• 結果如下

文字置中

• 進入「HTML檢視」。
• 在文章開頭處貼上以下程式碼：

<style>

table, th, td {

  border: 1px solid black;

}

table{

  width:100%

}

th, td{

  text-align: center;

}

</style>

• 結果如下：

平均分配欄寬

• 進入「HTML檢視」。
• 在文章開頭處貼上以下程式碼：

<style>

table, th, td {

  border: 1px solid black;

}

table{

  width:100%

}

th, td{

  text-align: center;

  width: 33.33%

}

</style>

• 結果如下：

重點整理

1. <tr>是列，<th>及<td>是欄，要增加列就增加<tr>，要增加欄就增加<td>。
2. <th>是每列第一欄，標題。
3. 每一個標籤(html tag)都要有結尾標籤把內容物包著，<tr>的結尾標籤是</tr>，<td>的結尾標籤是</td>。
4. 平均分配欄寬的width是100%除以欄位數，如有兩欄，每一欄寬度就是100% / 2 = 50%，width: 50%。

回到「Blogger教學」頁面