自從 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;"> 欄位1</td>
<td style="width: 402.011px;"> 欄位2</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </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;"> 欄位1</td>
<td style="width: 402.011px;"> 欄位2</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </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;"> 欄位1</td>
<td style="width: 201.011px;"> 欄位2</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </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;"> 欄位1</td>
<td style="width: 201.011px;"> 欄位2</td>
<td style="width: 201.011px;"> 欄位2</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </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;"> 欄位1</td>
<td style="width: 201.011px;"> 欄位2</td>
<td style="width: 201.011px;"> 欄位2</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
結果如下 :
| 欄位1 | 欄位2 | 欄位2 |
總之, 整個表格寬度不要超過 590px 即可, 欄位數目與各欄寬度可自由調校.
沒有留言:
張貼留言