Share this

Wizard Recommends

  • $7777 + 300 Free Spins Play
  • $3000 Welcome Bonus Play
  • $8,888 + 350 Free Spins Play
Last Updated: March 8, 2019

On This Page

Formatting Guidelines

Introduction

  • Do not surround <table> or <h2> tags with <p> or <div> tags.

  • Do not use <center>...</center> tags any more. To center something, use <div align="center">...</div>.

  • Do not use <b>...</b> tags any more. To embolden something, use <strong>...</strong>.

  • Do not use <i>...</i> tags any more. To italicize something, use <em>...</em>.

  • Only use <p>...</p> tags to surround otherwise naked text.

  • When adding an image inside a link to a larger version of that image, use <a class="trans" ... ><img ... ></a>.

  • To add a section header:

    <h2>Header Name</h2>

  • To add an image that hangs off to the right:

    <div class="image--right"><img src="..." /></div>

  • To add a box for formatting code samples (as seen on this page):
    <pre>
    	Code Sample Here
    </pre>
                
  • To add a narrow 50% width data table:
    <div class="box desk-50percent">
      <h3 class="box-title">Table Title</h3><!--/box-title-->
      <div class="box-content">
    	<table class="data" cellspacing="0" cellpadding="0" border="0">
    	<tr>
    		<th class="data-heading">Column Title 1</th>
    		<th class="data-heading">Column Title 2</th>
    	</tr>
    	<tr>
    		<td class="left_aligned">Left</td>
    		<td>Row 1, Column 2</td>
    	</tr>
    	<tr>
    		<td class="right_aligned">Right</td>
    		<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 above code will produce the following centered table:

    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">
      <h3 class="box-title">Table Title</h3><!--/box-title-->
      <div class="box-content">
    	<table class="data" cellspacing="0" cellpadding="0" border="0">
    	<tr>
    		<th class="data-heading">Column Title 1</th>
    		<th class="data-heading">Column Title 2</th>
    	</tr>
    	<tr>
    		<td class="left_aligned">Left</td>
    		<td>Row 1, Column 2</td>
    	</tr>
    	<tr>
    		<td class="right_aligned">Right</td>
    		<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 above code will produce the following centered table:

    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">
      <h3 class="box-title">Table Title</h3><!--/box-title-->
      <div class="box-content">
    	<table class="data" cellspacing="0" cellpadding="0" border="0">
    	<tr>
    		<th class="data-heading">Column Title 1</th>
    		<th class="data-heading">Column Title 2</th>
    		<th class="data-heading">Column Title 3</th>
    	</tr>
    	<tr>
    		<td class="left_aligned">Left</td>
    		<td>Row 1, Column 2</td>
    		<td>Row 1, Column 3</td>
    	</tr>
    	<tr>
    		<td class="right_aligned">Right</td>
    		<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 above code will produce the following centered table:

    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">
      <h3 class="box-title">Table Title<span class="box-title-expand desk-visible">Expand <i class="icon-long-arrow-right"></i></span></h3><!--/box-title-->
      <div class="box-content">
    	<table class="data" cellspacing="0" cellpadding="0" border="0">
    	<tr>
    		<th class="data-heading">Column Title 1</th>
    		<th class="data-heading">Column Title 2</th>
    		<th class="data-heading">Column Title 3</th>
    	</tr>
    	<tr>
    		<td class="left_aligned">Left</td>
    		<td>Row 1, Column 2</td>
    		<td>Row 1, Column 3</td>
    	</tr>
    	<tr>
    		<td class="right_aligned">Right</td>
    		<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 above code will produce the following centered table:

    Table TitleExpand

    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">
      <h3 class="box-title">Table Title<span class="box-title-expand desk-visible">Expand <i class="icon-long-arrow-right"></i></span></h3><!--/box-title-->
      <div class="box-content">
    	<table class="data" cellspacing="0" cellpadding="0" border="0">
    	<tr>
    		<th class="data-heading">Column Title 1</th>
    		<th class="data-heading">Column Title 2</th>
    		<th class="data-heading">Column Title 3</th>
    	</tr>
    	<tr>
    		<td class="left_aligned">Left</td>
    		<td>Row 1, Column 2</td>
    		<td>Row 1, Column 3</td>
    	</tr>
    	<tr>
    		<td class="right_aligned">Right</td>
    		<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 above code will produce the following centered table:

    Table TitleExpand

    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

    Note the class names to align a table header (th) or table cell (td):

    • class="left_aligned" to left-align
    • class="right_aligned" to right-align
    • class="centered" to center-align

    By default, regular table cells are right-aligned, to make the code smaller when showing large tables of numeric data.


Written by: 

Wizard Recommends

  • $7777 + 300 Free Spins Play
  • $3000 Welcome Bonus Play
  • $8,888 + 350 Free Spins Play

On This Page