部落格設計工具 HTML 語法

這篇記錄著撰寫部落格時，控制版面的呈現所需使用的HTML 語法。包括

 樹狀標籤 | 網頁內錨點 | 表格語法 | CSS style 格式 | Word 表格轉換 HTML 工具

樹狀標籤

使用 WFU Blog 設計的樹狀標籤 CSS。

網頁內錨點

錨點位置<a name="錨點名稱">網頁呈現文字 </a>

連結錨點起始處<a href="#錨點名稱">網頁呈現文字 </a>

表格語法

• 基本語法

<table  width="xxx" border="x" > 

<caption>表格名稱</caption>

   <tr> 

      <th>標題一</th> 

      <th>標題二</th>

      <th>標題三</th> 

   </tr> 

   <tr> 

      <td>內容格一</td>

      <td>內容格二</td>

      <td>內容格三</td>

  </tr>

</table> 

 <colspan="x"> 儲存格橫跨 x 個欄位

<rowspan="x"> 儲存格垂直跨 x 個欄位

• 具結構性語法

<table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
thread、tbody、tfoot 皆是以 tr td 組成。 

• border 格式

A

B

<table style="border-collaps: collaps; border-radius: 5px; border: 1px solid green;">

  <tbody><tr>

    <td>A</td>

    <td>B</td>

  </tr>

</tbody></table>

1.  border-collaps: collaps 內外線重疊
2.  border-radius: 5px 圓角外框 相對於直角
3.  border-spacing: 25px 儲存格之間的距離
4.  外框線名稱及樣式

• padding

儲存格內容與格線間的距離

A

B

<table style="border-collaps: collaps; border-radius: 5px; border: 6px ridge RebeccaPurple; border-spacing: 25px">
<tbody>

<tr>
     <td style="border-collaps: collaps; border-radius: 5px; inset: 2px solid red; padding: 10px 40px 20px 30px;">A</td>
     <td style="border-collaps: collaps; border-radius: 5px; border: 4px solid teal; padding: 10px 20px 30px 40px;">B</td>
</tr></tbody></table>

padding：p1px p2px p3px p4px; (依序為 上、右、下、左 間隔) 

CSS style 格式

<tagname style="property:value;">

float：浮動、left/right

text-align：文字對齊、left/center/right

color：顏色名稱對照表 (from W3 Schools) 

width：寬度

height：高度

margin：邊緣距離

background-color：背景顏色

line-height：文字行高

clear：清除浮動

參考資料: W3 Schools <https://www.w3schools.com/default.asp>

Word 表格轉換 HTML 工具

去除多餘格式設定，簡單轉換 Word 表格 https://wordhtml.com/