WOO logo

在這一頁

格式指南

簡介

  • 不要用<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-->
                

    上述程式碼將產生以下居中表格:

    表格標題展開

    列標題 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-->
                

    上述程式碼將產生以下居中表格:

    表格標題展開

    列標題 1列標題 2列標題 3
    左邊第 1 行,第 2 列第 1 行,第 3 列
    正確的第 1 行,第 2 列第 1 行,第 3 列
    中心第 3 行,第 2 列第 3 行,第 3 列

    請注意對齊表頭(th)或表格單元格(td)的類別名稱:

    • class="left_aligned"為左對齊
    • class="right_aligned"右對齊
    • class="centered"為居中對齊

    預設情況下,常規表格儲存格是右對齊的,以便在顯示大型數字資料表時使程式碼更小。