A basic table:
<%= table begin %>
<thead>
<tr>
<th>th 1</th>
<th>th 2</th>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
<% end %>
<table class="table">
<thead>
<tr>
<th>th 1</th>
<th>th 2</th>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>
th 1 | th 2 |
Cell 1 | Cell 2 |
Cell 1 | Cell 2 |
Several classes applied to the table:
%= table hover, striped, condensed, begin
<thead>
<tr>
<th>th 1</th>
<th>th 2</th>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
% end
<table class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th>th 1</th>
<th>th 2</th>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>
th 1 | th 2 |
Cell 1 | Cell 2 |
Cell 1 | Cell 2 |
A condensed
table with an id
wrapped in a success
panel:
%= table 'Heading Table 4', panel => { success }, condensed, id => 'the-table', begin
<thead>
<tr>
<th>th 1</th>
<th>th 2</th>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
% end
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Heading Table 4</h3>
</div>
<table class="table table-condensed" id="the-table">
<thead>
<tr>
<th>th 1</th>
<th>th 2</th>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>
</div>
Heading Table 4
th 1 | th 2 |
Cell 1 | Cell 2 |
Cell 1 | Cell 2 |
<%= table begin %>
<thead>
<tr>
<th>th 1</th>
<th>th 2</th>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
<% end %>
<table class="table">
<thead>
<tr>
<th>th 1</th>
<th>th 2</th>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>
th 1 | th 2 |
Cell 1 | Cell 2 |
Cell 1 | Cell 2 |
%= table hover, striped, condensed, begin
<thead>
<tr>
<th>th 1</th>
<th>th 2</th>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
% end
<table class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th>th 1</th>
<th>th 2</th>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>
th 1 | th 2 |
Cell 1 | Cell 2 |
Cell 1 | Cell 2 |
%= table 'Heading Table 3', hover, striped, condensed, begin
<thead>
<tr>
<th>th 1</th>
<th>th 2</th>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
% end
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Heading Table 3</h3>
</div>
<table class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th>th 1</th>
<th>th 2</th>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>
</div>
Heading Table 3
th 1 | th 2 |
Cell 1 | Cell 2 |
Cell 1 | Cell 2 |