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 -->