Tables
Tables
Tables can be created using the cms editor, but they should be cleaned up using source view. The initial table tag will have extra code that is no longer needed and should be removed. You will also need to apply any classes using the source view.
source view
editor inserts
<table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
corrected:
for a table with a set width, doing this may cause the table to break on small screens
<table class="table-simple" style="width: 500px;">
or
<table class="table-simple">
Examples
with class 'table-simple' + 500px width
First Name |
Last Name |
Super Hero |
Peter |
Parker |
Spiderman |
Bruce |
Wayne |
Batman |
Clark |
Kent |
Superman |
source view
<table class="table-simple" style="width: 500px;">
<caption>with class 'table-simple' + 500px width</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Super Hero</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>Spiderman</td>
</tr>
<tr>
<td>Bruce</td>
<td>Wayne</td>
<td>Batman</td>
</tr>
<tr>
<td>Clark</td>
<td>Kent</td>
<td>Superman</td>
</tr>
</tbody>
</table>
- All classes should be added to the initial table tag, with the exception of state classes shown below.
with class 'table-simple-condensed'
First Name |
Last Name |
Super Hero |
Peter |
Parker |
Spiderman |
Bruce |
Wayne |
Batman |
Clark |
Kent |
Superman |
with class ''table-nice'
First Name |
Last Name |
Super Hero |
Peter |
Parker |
Spiderman |
Bruce |
Wayne |
Batman |
Clark |
Kent |
Superman |
with class 'table-nice-condensed'
First Name |
Last Name |
Super Hero |
Peter |
Parker |
Spiderman |
Bruce |
Wayne |
Batman |
Clark |
Kent |
Superman |
with class ''table-simple' + state classes on certain td cells [success, warning and danger]
First Name |
Last Name |
Super Hero |
Peter |
Parker |
Spiderman |
Bruce |
Wayne |
Batman |
Clark |
Kent |
Superman |
source view
<table class="table-simple">
<caption>with class 'table-simple' + state classes on certain td cells [success, warning, danger]</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Super Hero</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td class="success">Spiderman</td>
</tr>
<tr>
<td>Bruce</td>
<td>Wayne</td>
<td class="warning">Batman</td>
</tr>
<tr>
<td>Clark</td>
<td>Kent</td>
<td class="danger">Superman</td>
</tr>
</tbody>
</table>
- All classes should be added to the initial table tag, with the exception of state classes shown in the previous example.