Tables

Styled and interactive tables.

Tables #1

Calendar Mon Tue Wed Thr Fri Sat Sun
12PM How great leaders inspire action July 9, 2019 The power of introverts July 18 - 19, 2019 The happy secret to better work July 23, 2019
01PM UI/UX July 31 - August 1, 2019 Front best of breed August 8, 2019
04PM Why Front? October 20 - 24, 2019 Dubai Front Meetup October 28 - 31, 2019
06PM Box world tour Tokyo November 3 - 7, 2019 Front in '19 November 12 - 14, 2019
Calendar Mon Tue Wed Thr Fri Sat Sun
12PM How great leaders inspire action July 9, 2019 The power of introverts July 18 - 19, 2019 The happy secret to better work July 23, 2019
01PM UI/UX July 31 - August 1, 2019 Front best of breed August 8, 2019
04PM Why Front? October 20 - 24, 2019 Dubai Front Meetup October 28 - 31, 2019
06PM Box world tour Tokyo November 3 - 7, 2019 Front in '19 November 12 - 14, 2019
Calendar Sep 6th Sep 13th Sep 19th Sep 21th Sep 25th Sep 29th Sep 30th
12PM How great leaders inspire action July 9, 2019 The power of introverts July 18 - 19, 2019 The happy secret to better work July 23, 2019
01PM UI/UX July 31 - August 1, 2019 Front best of breed August 8, 2019
04PM Why Front? October 20 - 24, 2019 Dubai Front Meetup October 28 - 31, 2019
06PM Box world tour Tokyo November 3 - 7, 2019 Front in '19 November 12 - 14, 2019
                  
                    <!-- Events Section -->
                    <div class="bg-primary rounded mx-3 mx-md-8">
                      <div class="container space-2">
                        <!-- Nav -->
                        <div class="w-lg-65 mx-lg-auto mb-3">
                          <ul class="nav nav-border-white justify-content-center" role="tablist">
                            <li class="nav-item">
                              <a class="nav-link active" id="pills-one-code-sample-tab" data-toggle="pill" href="#pills-one-code-sample" role="tab" aria-controls="pills-one-code-sample" aria-selected="true">
                                This week
                              </a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" id="pills-two-code-sample-tab" data-toggle="pill" href="#pills-two-code-sample" role="tab" aria-controls="pills-two-code-sample" aria-selected="false">
                                Next week
                              </a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" id="pills-three-code-sample-tab" data-toggle="pill" href="#pills-three-code-sample" role="tab" aria-controls="pills-three-code-sample" aria-selected="false">
                                This month
                              </a>
                            </li>
                          </ul>
                        </div>
                        <!-- End Nav -->

                        <!-- Tab Content -->
                        <div class="tab-content">
                          <div class="tab-pane fade pt-5 show active" id="pills-one-code-sample" role="tabpanel" aria-labelledby="pills-one-code-sample-tab">
                            <!-- Table -->
                            <div class="table-responsive-lg mb-9">
                              <table class="table table-bordered table-light-bordered text-white">
                                <thead>
                                  <tr>
                                    <th scope="col">Calendar</th>
                                    <th scope="col">Mon</th>
                                    <th scope="col">Tue</th>
                                    <th scope="col">Wed</th>
                                    <th scope="col">Thr</th>
                                    <th scope="col">Fri</th>
                                    <th scope="col">Sat</th>
                                    <th scope="col">Sun</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  <tr>
                                    <th scope="row">12PM</th>
                                    <td class="bg-white text-dark">
                                      <span class="d-block font-weight-semi-bold">How great leaders inspire action</span>
                                      <span class="d-block">July 9, 2019</span>
                                    </td>
                                    <td></td>
                                    <td>
                                      <span class="d-block font-weight-semi-bold">The power of introverts</span>
                                      <span class="d-block">July 18 - 19, 2019</span>
                                    </td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="bg-white text-dark">
                                      <span class="d-block font-weight-semi-bold">The happy secret to better work</span>
                                      <span class="d-block">July 23, 2019</span>
                                    </td>
                                  </tr>
                                  <tr>
                                    <th scope="row">01PM</th>
                                    <td></td>
                                    <td>
                                      <span class="d-block font-weight-semi-bold">UI/UX</span>
                                      <span class="d-block">July 31 - August 1, 2019</span>
                                    </td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td>
                                      <span class="d-block font-weight-semi-bold">Front best of breed</span>
                                      <span class="d-block">August 8, 2019</span>
                                    </td>
                                    <td></td>
                                  </tr>
                                  <tr>
                                    <th scope="row">04PM</th>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="bg-white text-dark">
                                      <span class="d-block font-weight-semi-bold">Why Front?</span>
                                      <span class="d-block">October 20 - 24, 2019</span>
                                    </td>
                                    <td></td>
                                    <td>
                                      <span class="d-block font-weight-semi-bold">Dubai Front Meetup</span>
                                      <span class="d-block">October 28 - 31, 2019</span>
                                    </td>
                                    <td></td>
                                  </tr>
                                  <tr>
                                    <th scope="row">06PM</th>
                                    <td></td>
                                    <td>
                                      <span class="d-block font-weight-semi-bold">Box world tour Tokyo</span>
                                      <span class="d-block">November 3 - 7, 2019</span>
                                    </td>
                                    <td></td>
                                    <td></td>
                                    <td>
                                      <span class="d-block font-weight-semi-bold">Front in '19</span>
                                      <span class="d-block">November 12 - 14, 2019</span>
                                    </td>
                                    <td></td>
                                    <td></td>
                                  </tr>
                                </tbody>
                              </table>
                            </div>
                            <!-- End Table -->
                          </div>

                          <div class="tab-pane fade pt-5" id="pills-two-code-sample" role="tabpanel" aria-labelledby="pills-two-code-sample-tab">
                            <!-- Table -->
                            <div class="table-responsive-lg mb-9">
                              <table class="table table-bordered table-light-bordered text-white">
                                <thead>
                                  <tr>
                                    <th scope="col">Calendar</th>
                                    <th scope="col">Mon</th>
                                    <th scope="col">Tue</th>
                                    <th scope="col">Wed</th>
                                    <th scope="col">Thr</th>
                                    <th scope="col">Fri</th>
                                    <th scope="col">Sat</th>
                                    <th scope="col">Sun</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  <tr>
                                    <th scope="row">12PM</th>
                                    <td>
                                      <span class="d-block font-weight-semi-bold">How great leaders inspire action</span>
                                      <span class="d-block">July 9, 2019</span>
                                    </td>
                                    <td></td>
                                    <td>
                                      <span class="d-block font-weight-semi-bold">The power of introverts</span>
                                      <span class="d-block">July 18 - 19, 2019</span>
                                    </td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td>
                                      <span class="d-block font-weight-semi-bold">The happy secret to better work</span>
                                      <span class="d-block">July 23, 2019</span>
                                    </td>
                                  </tr>
                                  <tr>
                                    <th scope="row">01PM</th>
                                    <td></td>
                                    <td class="bg-white text-dark">
                                      <span class="d-block font-weight-semi-bold">UI/UX</span>
                                      <span class="d-block">July 31 - August 1, 2019</span>
                                    </td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td>
                                      <span class="d-block font-weight-semi-bold">Front best of breed</span>
                                      <span class="d-block">August 8, 2019</span>
                                    </td>
                                    <td></td>
                                  </tr>
                                  <tr>
                                    <th scope="row">04PM</th>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td>
                                      <span class="d-block font-weight-semi-bold">Why Front?</span>
                                      <span class="d-block">October 20 - 24, 2019</span>
                                    </td>
                                    <td></td>
                                    <td>
                                      <span class="d-block font-weight-semi-bold">Dubai Front Meetup</span>
                                      <span class="d-block">October 28 - 31, 2019</span>
                                    </td>
                                    <td></td>
                                  </tr>
                                  <tr>
                                    <th scope="row">06PM</th>
                                    <td></td>
                                    <td>
                                      <span class="d-block font-weight-semi-bold">Box world tour Tokyo</span>
                                      <span class="d-block">November 3 - 7, 2019</span>
                                    </td>
                                    <td></td>
                                    <td></td>
                                    <td class="bg-white text-dark">
                                      <span class="d-block font-weight-semi-bold">Front in '19</span>
                                      <span class="d-block">November 12 - 14, 2019</span>
                                    </td>
                                    <td></td>
                                    <td></td>
                                  </tr>
                                </tbody>
                              </table>
                            </div>
                            <!-- End Table -->
                          </div>

                          <div class="tab-pane fade pt-5" id="pills-three-code-sample" role="tabpanel" aria-labelledby="pills-three-code-sample-tab">
                            <!-- Table -->
                            <div class="table-responsive-lg mb-9">
                              <table class="table table-bordered table-light-bordered text-white">
                                <thead>
                                  <tr>
                                    <th scope="col">Calendar</th>
                                    <th scope="col">Sep 6th</th>
                                    <th scope="col">Sep 13th</th>
                                    <th scope="col">Sep 19th</th>
                                    <th scope="col">Sep 21th</th>
                                    <th scope="col">Sep 25th</th>
                                    <th scope="col">Sep 29th</th>
                                    <th scope="col">Sep 30th</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  <tr>
                                    <th scope="row">12PM</th>
                                    <td>
                                      <span class="d-block font-weight-semi-bold">How great leaders inspire action</span>
                                      <span class="d-block">July 9, 2019</span>
                                    </td>
                                    <td></td>
                                    <td class="bg-white text-dark">
                                      <span class="d-block font-weight-semi-bold">The power of introverts</span>
                                      <span class="d-block">July 18 - 19, 2019</span>
                                    </td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td>
                                      <span class="d-block font-weight-semi-bold">The happy secret to better work</span>
                                      <span class="d-block">July 23, 2019</span>
                                    </td>
                                  </tr>
                                  <tr>
                                    <th scope="row">01PM</th>
                                    <td></td>
                                    <td>
                                      <span class="d-block font-weight-semi-bold">UI/UX</span>
                                      <span class="d-block">July 31 - August 1, 2019</span>
                                    </td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td>
                                      <span class="d-block font-weight-semi-bold">Front best of breed</span>
                                      <span class="d-block">August 8, 2019</span>
                                    </td>
                                    <td></td>
                                  </tr>
                                  <tr>
                                    <th scope="row">04PM</th>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td>
                                      <span class="d-block font-weight-semi-bold">Why Front?</span>
                                      <span class="d-block">October 20 - 24, 2019</span>
                                    </td>
                                    <td></td>
                                    <td class="bg-white text-dark">
                                      <span class="d-block font-weight-semi-bold">Dubai Front Meetup</span>
                                      <span class="d-block">October 28 - 31, 2019</span>
                                    </td>
                                    <td></td>
                                  </tr>
                                  <tr>
                                    <th scope="row">06PM</th>
                                    <td></td>
                                    <td class="bg-white text-dark">
                                      <span class="d-block font-weight-semi-bold">Box world tour Tokyo</span>
                                      <span class="d-block">November 3 - 7, 2019</span>
                                    </td>
                                    <td></td>
                                    <td></td>
                                    <td>
                                      <span class="d-block font-weight-semi-bold">Front in '19</span>
                                      <span class="d-block">November 12 - 14, 2019</span>
                                    </td>
                                    <td></td>
                                    <td></td>
                                  </tr>
                                </tbody>
                              </table>
                            </div>
                            <!-- End Table -->
                          </div>
                        </div>
                        <!-- End Tab Content -->

                        <!-- Link -->
                        <div class="text-center">
                          <a href="#">
                            <span class="text-white">View all</span>
                            <span class="btn btn-icon btn-sm btn-soft-white shadow-soft rounded-circle mx-2">
                              <span class="fas fa-angle-right btn-icon__inner"></span>
                            </span>
                            <span class="text-white">events</span>
                          </a>
                        </div>
                        <!-- End Link -->
                      </div>
                    </div>
                    <!-- End Events Section -->