在这一页
格式指南
简介
不要用<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"为居中对齐
默认情况下,常规表格单元格是右对齐的,以便在显示大型数字数据表时使代码更小。