在這一頁
格式指南
簡介
不要用<p>或<div>標籤包圍<table>或<h2>標籤。
不要再使用<center>...</center>標籤。要居中,請使用<div align="center">...</div> 。
不要再使用<b>...</b>標籤。若要加粗某些內容,請使用<strong>...</strong> 。
不要再使用<i>...</i>標籤。要使某些內容斜體化,請使用<em>...</em> 。
僅使用<p>...</p>標籤來包圍其他裸露的文字。
當在連結內新增該影像的較大版本時,請使用<a class="trans" ... ><img ... ></a> 。
若要新增節標題:
<h2>標頭名稱</h2>
若要添加懸掛在右側的影像:
<div class="image--right"><img src="..." /></div>
- 新增用於格式化程式碼範例的方塊(如本頁所示):
<pre> 程式碼範例在這裡 </pre>
- 若要新增寬度為 50% 的窄資料表:
<div class="box desk-50percent"> <h3 class="box-title">表格標題</h3><!--/box-title--> <div class="box-content"> <table class="data" cellspacing="0" cellpadding="0" border="0"> <tr> <th class="data-heading">列標題 1</th> <th class="data-heading">列標題 2</th> </tr> <tr> <td class="left_aligned">左</td> <td>第 1 行,第 2 列</td> </tr> <tr> <td class="right_aligned">右</td> <td>第 1 行,第 2 列</td> </tr> <tr> <td class="centered">中心</td> <td>第 3 行,第 2 列</td> </tr> </table> </div><!--/box-content--> </div><!--/box-->
上述程式碼將產生以下居中表格:
表格標題
列標題 1 列標題 2 左邊 第 1 行,第 2 列 正確的 第 1 行,第 2 列 中心 第 3 行,第 2 列 - 要新增 75% 寬度的資料表:
<div class="box desk-75percent"> <h3 class="box-title">表格標題</h3><!--/box-title--> <div class="box-content"> <table class="data" cellspacing="0" cellpadding="0" border="0"> <tr> <th class="data-heading">列標題 1</th> <th class="data-heading">列標題 2</th> </tr> <tr> <td class="left_aligned">左</td> <td>第 1 行,第 2 列</td> </tr> <tr> <td class="right_aligned">右</td> <td>第 1 行,第 2 列</td> </tr> <tr> <td class="centered">中心</td> <td>第 3 行,第 2 列</td> </tr> </table> </div><!--/box-content--> </div><!--/box-->
上述程式碼將產生以下居中表格:
表格標題
列標題 1 列標題 2 左邊 第 1 行,第 2 列 正確的 第 1 行,第 2 列 中心 第 3 行,第 2 列 - 若要新增標準 100% 寬度資料表:
<div class="box"> <h3 class="box-title">表格標題</h3><!--/box-title--> <div class="box-content"> <table class="data" cellspacing="0" cellpadding="0" border="0"> <tr> <th class="data-heading">列標題 1</th> <th class="data-heading">列標題 2</th> <th class="data-heading">列標題 3</th> </tr> <tr> <td class="left_aligned">左</td> <td>第 1 行,第 2 列</td> <td>第 1 行,第 3 列</td> </tr> <tr> <td class="right_aligned">右</td> <td>第 1 行,第 2 列</td> <td>第 1 行,第 3 列</td> </tr> <tr> <td class="centered">中心</td> <td>第 3 行,第 2 列</td> <td>第 3 行,第 3 列</td> </tr> </table> </div><!--/box-content--> </div><!--/box-->
上述程式碼將產生以下居中表格:
表格標題
列標題 1 列標題 2 列標題 3 左邊 第 1 行,第 2 列 第 1 行,第 3 列 正確的 第 1 行,第 2 列 第 1 行,第 3 列 中心 第 3 行,第 2 列 第 3 行,第 3 列 - 若要新增大型資料表:
<div class="box box--expandable"> <h3 class="box-title">表格標題<span class="box-title-expand desk-visible">展開 <i class="fa-regular fa-arrow-right-long"></i></span></h3><!--/box-title--> <div class="box-content"> <table class="data" cellspacing="0" cellpadding="0" border="0"> <tr> <th class="data-heading">列標題 1</th> <th class="data-heading">列標題 2</th> <th class="data-heading">列標題 3</th> </tr> <tr> <td class="left_aligned">左</td> <td>第 1 行,第 2 列</td> <td>第 1 行,第 3 列</td> </tr> <tr> <td class="right_aligned">右</td> <td>第 1 行,第 2 列</td> <td>第 1 行,第 3 列</td> </tr> <tr> <td class="centered">中心</td> <td>第 3 行,第 2 列</td> <td>第 3 行,第 3 列</td> </tr> </table> </div><!--/box-content--> </div><!--/box-->
上述程式碼將產生以下居中表格:
- 若要新增超大型資料表:
<div class="box box--expandable"> <h3 class="box-title">表格標題<span class="box-title-expand desk-visible">展開 <i class="fa-regular fa-arrow-right-long"></i></span></h3><!--/box-title--> <div class="box-content"> <table class="data" cellspacing="0" cellpadding="0" border="0"> <tr> <th class="data-heading">列標題 1</th> <th class="data-heading">列標題 2</th> <th class="data-heading">列標題 3</th> </tr> <tr> <td class="left_aligned">左</td> <td>第 1 行,第 2 列</td> <td>第 1 行,第 3 列</td> </tr> <tr> <td class="right_aligned">右</td> <td>第 1 行,第 2 列</td> <td>第 1 行,第 3 列</td> </tr> <tr> <td class="centered">中心</td> <td>第 3 行,第 2 列</td> <td>第 3 行,第 3 列</td> </tr> </table> </div><!--/box-content--> </div><!--/box-->
上述程式碼將產生以下居中表格:
請注意對齊表頭(th)或表格單元格(td)的類別名稱:
- class="left_aligned"為左對齊
- class="right_aligned"右對齊
- class="centered"為居中對齊
預設情況下,常規表格儲存格是右對齊的,以便在顯示大型數字資料表時使程式碼更小。