這篇記錄著撰寫部落格時,控制版面的呈現所需使用的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>
- border-collaps: collaps 內外線重疊
- border-radius: 5px 圓角外框 相對於直角
- border-spacing: 25px 儲存格之間的距離
- 外框線名稱及樣式
- 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; (依序為 上、右、下、左 間隔)
<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/


