<!DOCTYPE html>
<html>
<head>
<title>Examples</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<p>A basic table:</p>
<pre><%= 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 %></pre>
<pre><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></pre>
<div> <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></div>
<hr />
<p>Several classes applied to the table:</p>
<pre>%= 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</pre>
<pre><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></pre>
<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>
<hr />
<p>A <code>condensed</code> table with an <code>id</code> wrapped in a <code>success</code> panel:</p>
<pre>%= 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</pre>
<pre><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></pre>
<div> <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></div>
<hr />
<pre><%= 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 %></pre>
<pre><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></pre>
<div> <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></div>
<hr />
<pre>%= 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</pre>
<pre><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></pre>
<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>
<hr />
<pre>%= 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</pre>
<pre><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></pre>
<div> <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></div>
</div>
<pre style="background-color: #fff; border-width: 0px;">
</pre>
</body>
</html>