2022年5月16日 星期一

簡化的 Blogger 表格範本

自從 Google 協作平台升版之後, 編輯網頁表格就沒這麼方便了, 但在 blogger 整理學習筆記有時用表格來呈現較明瞭, 我只好拿之前的舊表格修改來用, 之前的表格範本參考 : 

最近因為要用到的表格格式較多, 不只是兩欄而已, 所以只好手工先準備好各種型式的表格備用. 經使用 HTML 與編輯模式交互測試, 發現其實只要在表頭設定寬度即可, 這樣要調整欄位寬度時只要調整表頭, 表身就單純用 <td></td> 放內容, 其寬度會隨表頭而變, 其他樣式如垂直對齊等不需要, 簡化後的基本結構如下 :

<table border="1" bordercolor="#888" cellspacing="0" style="background-color: white; border-collapse: collapse; border-color: rgb(136, 136, 136); border-width: 1px; color: #534741; font-family: Arial, Verdana, sans-serif; font-size: 13.3333px; margin: 0px;">
  <tbody>
    <tr>
      <td style="width: 149.011px;">&nbsp;欄位1</td>
      <td style="width: 402.011px;">&nbsp;欄位2</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

結果如下 :


 欄位1  欄位2
   
   


欄位 1 寬度放大 40px, 整體寬度放大到與 Blogger 內容版面寬度 (590px) 的表格如下 : 


<table border="1" bordercolor="#888" cellspacing="0" style="background-color: white; border-collapse: collapse; border-color: rgb(136, 136, 136); border-width: 1px; color: #534741; font-family: Arial, Verdana, sans-serif; font-size: 13.3333px; margin: 0px;">
  <tbody>
    <tr>
      <td style="width: 189.011px;">&nbsp;欄位1</td>
      <td style="width: 402.011px;">&nbsp;欄位2</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

結果如下 :


 欄位1  欄位2
   
   


將欄位 2 寬度減半的範例如下 :

<table border="1" bordercolor="#888" cellspacing="0" style="background-color: white; border-collapse: collapse; border-color: rgb(136, 136, 136); border-width: 1px; color: #534741; font-family: Arial, Verdana, sans-serif; font-size: 13.3333px; margin: 0px;">
  <tbody>
    <tr>
      <td style="width: 149.011px;">&nbsp;欄位1</td>
      <td style="width: 201.011px;">&nbsp;欄位2</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

結果如下 :


 欄位1  欄位2
   
   


下面是三欄表格範例 1 : 

<table border="1" bordercolor="#888" cellspacing="0" style="background-color: white; border-collapse: collapse; border-color: rgb(136, 136, 136); border-width: 1px; color: #534741; font-family: Arial, Verdana, sans-serif; font-size: 13.3333px; margin: 0px;">
  <tbody>
    <tr>
      <td style="width: 149.011px;">&nbsp;欄位1</td>
      <td style="width: 201.011px;">&nbsp;欄位2</td>
      <td style="width: 201.011px;">&nbsp;欄位2</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>


 欄位1  欄位2  欄位2
     
     


下面是三欄表格範例 2 : 

<table border="1" bordercolor="#888" cellspacing="0" style="background-color: white; border-collapse: collapse; border-color: rgb(136, 136, 136); border-width: 1px; color: #534741; font-family: Arial, Verdana, sans-serif; font-size: 13.3333px; margin: 0px;">
  <tbody>
    <tr>
      <td style="width: 189.011px;">&nbsp;欄位1</td>
      <td style="width: 201.011px;">&nbsp;欄位2</td>
      <td style="width: 201.011px;">&nbsp;欄位2</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

結果如下 :


 欄位1  欄位2  欄位2
     
     


總之, 整個表格寬度不要超過 590px 即可, 欄位數目與各欄寬度可自由調校. 

沒有留言:

張貼留言