WOO logo

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> </tr> <tr> <td class=\"left_aligned\">Left</td> <td>Row 1, Column 2</td> </tr> <tr> <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

    Header Title 1 Header Title 2Aligned Right
    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> </tr> <tr> <td class=\"left_aligned\">Left</td> <td>Row 1, Column 2</td> </tr> <tr> <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

    Header Title 1 Header Title 2Aligned Right
    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> </tr> <tr> <td class=\"left_aligned\">Left</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <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

    Header Title 1 Header Title 2 Header Title 3Aligned Right
    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 TableExpand

    <div class=\"box-content\"> <tr> </tr> <tr> <td class=\"left_aligned\">Left</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <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 TitleExpand

    Header Title 1 Header Title 2 Header Title 3Aligned Right
    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 an extra-large data table:
    <div class=\"box box--expandable\">
    

    Title of the TableExpand

    <div class=\"box-content\"> <tr> </tr> <tr> <td class=\"left_aligned\">Left</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <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 TitleExpand

    Header Title 1 Header Title 2 Header Title 3Aligned Right
    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

    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.

  • Written by: Michael Shackleford