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"为居中对齐

    默认情况下,常规表格单元格是右对齐的,以便在显示大型数字数据表时使代码更小。