Tips: Adding a table

Document created by KSchmitt-esristaff Employee on Mar 9, 2017Last modified by KSchmitt-esristaff Employee on Aug 15, 2019
Version 3Show Document
  • View in full screen mode

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. table button in text card 

 

Responsive Table

 

table listing three community projects, author, and category

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.

 

sample schedule showing three events on 2 dates

 

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>

Attachments

    Outcomes