Using Table Layouts
Table Layouts
| Col 1 | Padding | Col 2 | Padding | Col 3 | Padding | |
| Table 1 | 415 | 10 | 255 | 0 | ||
| Table 2 | 255 | 10 | 415 | 0 | ||
| Table 3 | 415 | 10 | 150 | 10 | 95 | 0 |
| Table 4 | 150 | 10 | 95 | 10 | 415 | 0 |
How to use the table layouts
Define the table with a class of l1, l2, l3 or l4
<table class=”l3″>
Define each data cell in the first row with a class of td1, td2 and td3.
<td class=”td1″>
Table Layout 1: 2 Column Left
| Column 1 | Column 2 |
Fusce ut aliquet velit. Ut urna leo, semper ut pulvinar sit amet, euismod non libero. Duis viverra, enim a volutpat porttitor, leo metus sollicitudin sem, eu varius erat elit at massa. Pellentesque ullamcorper, tellus condimentum pulvinar tristique, est tellus consectetur tellus, in placerat nisi odio elementum lorem. Maecenas sodales sodales magna at auctor.
Nulla a ullamcorper dolor. Morbi ullamcorper porttitor neque, ac posuere mauris placerat eu. Sed viverra facilisis eros, eget molestie dui mollis et. Ut posuere venenatis turpis, non laoreet tortor cursus nec. Aliquam at augue sed risus sollicitudin venenatis. Donec ac lorem quis libero commodo elementum eu eget nunc. |
 Nullam in sapien eget elit ultricies scelerisque in vitae urna. Suspendisse ac enim quis metus posuere tincidunt sagittis quis dui. Sed varius erat nec nisl posuere sed dapibus libero elementum. Nulla purus est, sollicitudin sit amet consequat viverra, accumsan bibendum ipsum. |
Table Layout 2: 2 Column Right
| Column 1 | Column 2 |
| Fusce ut aliquet velit. Ut urna leo, semper ut pulvinar sit amet, euismod non libero. Duis viverra, enim a volutpat porttitor, leo metus sollicitudin sem, eu varius erat elit at massa. Pellentesque ullamcorper, tellus condimentum pulvinar tristique, est tellus consectetur tellus, in placerat nisi odio elementum lorem. Maecenas sodales sodales nunc. |
magna at auctor. Nulla a ullamcorper dolor. Morbi ullamcorper porttitor neque, ac posuere mauris placerat eu. Sed viverra facilisis eros, eget molestie dui mollis et. Ut posuere venenatis turpis, non laoreet tortor cursus nec. Aliquam at augue sed risus sollicitudin venenatis. Donec ac lorem quis libero commodo elementum eu eget Nullam in sapien eget elit ultricies scelerisque in vitae urna. Suspendisse ac enim quis metus posuere tincidunt sagittis quis dui. Sed varius erat nec nisl posuere sed dapibus libero elementum. Nulla purus est, sollicitudin sit amet consequat viverra, accumsan bibendum ipsum. |
Table Layout 3: 3 Column Left
| Column 1 | Column 2 | Column 3 |
| Fusce ut aliquet velit. Ut urna leo, semper ut pulvinar sit amet, euismod non libero. Duis viverra, enim a volutpat porttitor, leo metus sollicitudin sem, eu varius erat elit at massa. Pellentesque ullamcorper, tellus condimentum pulvinar tristique, est tellus consectetur tellus, in placerat nisi odio elementum lorem. Maecenas sodales sodales nunc.
Magna at auctor. Nulla a ullamcorper dolor. Morbi ullamcorper porttitor neque, ac posuere mauris placerat eu. Sed viverra facilisis eros, eget molestie dui mollis et. Ut posuere venenatis turpis, non laoreet tortor cursus nec. Aliquam at augue sed risus sollicitudin venenatis. Donec ac lorem quis libero commodo elementum eu eget |
Nullam in sapien eget elit ultricies scelerisque in vitae urna. Suspendisse ac enim quis metus posuere tincidunt sagittis quis dui. Sed varius erat nec nisl posuere sed dapibus libero elementum. Nulla purus est, sollicitudin sit amet consequat viverra, accumsan bibendum ipsum. |
 Nullam in sapien eget elit ultricies scelerisque in vitae urna. Suspendisse ac enim quis metus posuere tincidunt sagittis quis dui. Sed varius erat nec nisl posuere sed dapibus libero elementum. Nulla purus est, sollicitudin sit amet consequat viverra, accumsan bibendum ipsum. |
Table Layout 4: 3 Column Right
| Column 1 | Column 2 | Column 3 |
| Fusce ut aliquet velit. Ut urna leo, semper ut pulvinar sit amet, euismod non libero. Duis viverra, enim a volutpat porttitor, leo metus sollicitudin sem, eu varius erat elit at massa. Pellentesque ullamcorper, tellus condimentum pulvinar tristique, est tellus consectetur tellus, in placerat nisi odio elementum lorem. Maecenas sodales sodales nunc. |
Nullam in sapien eget elit ultricies scelerisque in vitae urna. Suspendisse ac enim quis metus posuere tincidunt sagittis quis dui. Sed varius erat nec nisl posuere sed dapibus libero elementum. Nulla purus est, sollicitudin sit amet consequat viverra, accumsan bibendum ipsum. |
Nullam in sapien eget elit ultricies scelerisque in vitae urna. Suspendisse ac enim quis metus posuere tincidunt sagittis quis dui. Sed varius erat nec nisl posuere sed dapibus libero elementum. Nulla purus est, sollicitudin sit amet consequat viverra, accumsan bibendum ipsum.Magna at auctor. Nulla a ullamcorper dolor. Morbi ullamcorper porttitor neque, ac posuere mauris placerat eu. Sed viverra facilisis eros, eget molestie dui mollis et. Ut posuere venenatis turpis, non laoreet tortor cursus nec. Aliquam at augue sed risus sollicitudin venenatis. Donec ac lorem quis libero commodo elementum eu eget
|
Pre-Cooked 2 row tables
<table class=”l1″>
<tr><td class=”td1″>Stuff</td><td class=”td2″>More Stuff</td></tr>
<tr><td class=”td1″>Stuff</td><td class=”td2″>More Stuff</td></tr>
</table>
<table class=”l2″>
<tr><td class=”td1″>Stuff</td><td class=”td2″>More Stuff</td></tr>
<tr><td class=”td1″>Stuff</td><td class=”td2″>More Stuff</td></tr>
</table>
<table class=”l3″>
<tr><td class=”td1″>Stuff</td><td class=”td2″>More Stuff</td><td class=”td3″>More Stuff</td></tr>
<tr><td class=”td1″>Stuff</td><td class=”td2″>More Stuff</td><td class=”td3″>More Stuff</td></tr>
</table>
<table class=”l4″>
<tr><td class=”td1″>Stuff</td><td class=”td2″>More Stuff</td><td class=”td3″>More Stuff</td></tr>
<tr><td class=”td1″>Stuff</td><td class=”td2″>More Stuff</td><td class=”td3″>More Stuff</td></tr>
</table>