Tips: Adding a table
Whether you want to add a table or a schedule, you can easily do so by utilizing classes already built into Bootstrap. Our layout editor is built on Bootstrap, so we support nearly all of the components and helper classes.
You can also use the WYSIWYG (What You See Is What You Get) table button in the text card to build a table. 
Responsive Table
This is built entirely with Bootstrap table classes. The classes "table-striped," "table-hover," and "table-bordered" are optional.
1. Add a row card. Set row background color and row text color.
2. Add a text card to that row.
3. Switch to the code view of the text card.
4. Paste in the following snippet, toggle out of code view, and save the page.
<h3>Community Projects</h3>
<div class="table-responsive">
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Category</th>
<th>Author</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#" target="_blank">Best Bike Commute Paths</a></td>
<td>Transportation</td>
<td>Mike Greeves</td>
</tr>
<tr>
<td><a href="#" target="_blank">Tracking the Emerald Ash Borer</a></td>
<td>Environment</td>
<td>Asnee Li</td>
</tr>
<tr>
<td><a href="#" target="_blank">Lyme Disease Prevention</a></td>
<td>Health</td>
<td>Julia Tenlee</td>
</tr>
</tbody>
</table>
</div>More Complex Responsive Table
This next table was inspired by this Bootsnipp agenda.
However, as this one uses <style></style> tags, I'll include my usual warning:
- Any embedded styles can affect your entire homepage if you do not target specific selectors correctly.
- Never use an ember-# ID selector as these are dynamic and will change with each page refresh.
1. Add a row card. Set row background color and row text color.
2. Add a text card to that row.
3. Switch to the code view of the text card.
4. Paste in the following snippet, toggle out of code view, and save the page.
<style>
.schedule-date .day {
max-width: 40px;
font-size: 36px;
line-height: 36px;
float: left;
text-align: right;
margin-right: 10px;
}
.schedule-date .text-muted {
font-size: 12px;
margin-top: 0px;
}
</style>
<div class="table-responsive">
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Event</th>
</tr>
</thead>
<tbody>
<tr>
<td class="schedule-date" rowspan="1">
<div class="day">26</div>
<div class="text-muted">Monday
<br /> July, 2017</div>
</td>
<td>
6:30PM
</td>
<td>
Council Meeting
</td>
</tr>
<tr>
<td class="schedule-date" rowspan="3">
<div class="day">12</div>
<div class="text-muted">Thursday
<br /> Aug, 2017</div>
</td>
<td>
10:00AM - 5:00PM
</td>
<td>
Development Training
</td>
</tr>
<tr>
<td>
6:30PM - 8:00PM
</td>
<td>
Civil Hackathon
</td>
</tr>
</tbody>
</table>
</div>