Skip to main content

Advanced Styles

Creating two and three column layouts

Columns with tables using the 'two-column-table' and 'three-column-table' classes.

The table should ONLY have ONE row, <tr></tr>, and TWO or THREE data cells, <td></td>. The data cells represent the two or three columns.

If a header <h6> is included, it should be within the same data cell as the rest of the content, NOT in its own row and cell.

 

 

Colmn 1

paragraph one

 column2

pargraph

CORRECT

<table class="two-column-table">
<tbody>
<tr>
<td>
<h6>General Certificate Information</h6>
<p>copy</p>
</td>
<td>
<h6>For Non-Business Students</h6>
<p>copy</p>
</td>
</tr>
</tbody>
</table>

 
INCORRRECT

<table class="two-column-table">
<tbody>
<tr>
<td>
<h6>General Certificate Information</h6>
</td>
<td>
<h6>For Non-Business Students</h6>
</td>
</tr>
<tr>
<td>
<p>Copy</p>
</td>
<td>
<p>Copy</p>
</td>
</tr>
</tbody>
</table>

 

Header 1
Header 2

This doesn't flow correct on mobile!

Neither does this!