On this page
Formatting Guidelines
Introduction
Do not surround<table>or<h2>tags with<p>or<div>tags.
Do not use<center>..</center>To horizontally align an element to the center, you should use<div align=\"center\">..</div>.
Do not use<b>..</b>To make text bold, utilize the<strong>..</strong>.
Do not use<i>..</i>To apply italics to text, take advantage of the<em>..</em>.
Only use<p>..</p>Use these tags to enclose plain text that requires formatting.
When you wish to incorporate an image that links to its larger version, you should use<a class=\"trans\" .. ><img .. ></a>.
To add a section header:
<h2>Header Name</h2>
To position an image that aligns to the right, you can use:
- If you need a designated area for displaying code examples (as illustrated here):
<pre> Code Sample Here </pre>
- To add a narrow 50% width data table:
<div class=\"box desk-50percent\">
Title of the Table
<div class=\"box-content\"><tr>
Header Title 1 Header Title 2 </tr> <tr> <td class=\"left_aligned\">Left</td> <td>Row 1, Column 2</td> </tr> <tr>Aligned Right <td>Row 1, Column 2</td> </tr> <tr> <td class=\"centered\">Center</td> <td>Row 3, Column 2</td> </tr> </table> </div><!--/box-content--> </div><!--/box-->The provided code will generate a centered table as shown below:
Table Title
Column Title 1 Column Title 2 Left Row 1, Column 2 Right Row 1, Column 2 Center Row 3, Column 2 - To add a 75% width data table:
<div class=\"box desk-75percent\">
Title of the Table
<div class=\"box-content\"><tr>
Header Title 1 Header Title 2 </tr> <tr> <td class=\"left_aligned\">Left</td> <td>Row 1, Column 2</td> </tr> <tr>Aligned Right <td>Row 1, Column 2</td> </tr> <tr> <td class=\"centered\">Center</td> <td>Row 3, Column 2</td> </tr> </table> </div><!--/box-content--> </div><!--/box-->The provided code will generate a centered table as shown below:
Table Title
Column Title 1 Column Title 2 Left Row 1, Column 2 Right Row 1, Column 2 Center Row 3, Column 2 - To add a standard 100% width data table:
<div class=\"box\">
Title of the Table
<div class=\"box-content\"><tr>
Header Title 1 Header Title 2 Header Title 3 </tr> <tr> <td class=\"left_aligned\">Left</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr>Aligned Right <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <td class=\"centered\">Center</td> <td>Row 3, Column 2</td> <td>Row 3, Column 3</td> </tr> </table> </div><!--/box-content--> </div><!--/box-->The provided code will generate a centered table as shown below:
Table Title
Column Title 1 Column Title 2 Column Title 3 Left Row 1, Column 2 Row 1, Column 3 Right Row 1, Column 2 Row 1, Column 3 Center Row 3, Column 2 Row 3, Column 3 - To add a large data table:
<div class=\"box box--expandable\">
Title of the Table
<div class=\"box-content\"><tr>
Header Title 1 Header Title 2 Header Title 3 </tr> <tr> <td class=\"left_aligned\">Left</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr>Aligned Right <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <td class=\"centered\">Center</td> <td>Row 3, Column 2</td> <td>Row 3, Column 3</td> </tr> </table> </div><!--/box-content--> </div><!--/box-->The provided code will generate a centered table as shown below:
- To add an extra-large data table:
<div class=\"box box--expandable\">
Title of the Table
<div class=\"box-content\"><tr>
Header Title 1 Header Title 2 Header Title 3 </tr> <tr> <td class=\"left_aligned\">Left</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr>Aligned Right <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <td class=\"centered\">Center</td> <td>Row 3, Column 2</td> <td>Row 3, Column 3</td> </tr> </table> </div><!--/box-content--> </div><!--/box-->The provided code will generate a centered table as shown below:
Pay attention to the class names used to align table headers (th) or table data cells (td):
- class=\"left_aligned\"to left-align
- class=\"right_aligned\"to right-align
- class=\"centered\"to center-align
Typically, standard table data cells are right-aligned in order to minimize code length when displaying extensive numerical tables.
- To add a 75% width data table: