Basic
NamePositionOfficeAgeStart dateSalary
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
NamePositionOfficeAgeStart dateSalary
<div class="table-responsive"> <!-- Required for Responsive --> <table class="table table-striped table-bordered"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Cara Stevens</td> <td>Sales Assistant</td> <td>New York</td> <td>46</td> <td>2011/12/06</td> <td>$145,600</td> </tr> <tr> <td>Hermione Butler</td> <td>Regional Director</td> <td>London</td> <td>47</td> <td>2011/03/21</td> <td>$356,250</td> </tr> <tr> <td>Lael Greer</td> <td>Systems Administrator</td> <td>London</td> <td>21</td> <td>2009/02/27</td> <td>$103,500</td> </tr> <tr> <td>Jonas Alexander</td> <td>Developer</td> <td>San Francisco</td> <td>30</td> <td>2010/07/14</td> <td>$86,500</td> </tr> <tr> <td>Shad Decker</td> <td>Regional Director</td> <td>Edinburgh</td> <td>51</td> <td>2008/11/13</td> <td>$183,000</td> </tr> <tr> <td>Michael Bruce</td> <td>Javascript Developer</td> <td>Singapore</td> <td>29</td> <td>2011/06/27</td> <td>$183,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> </tbody> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> </table></div>
Javascript Table

For mobile-compatible tables, add the .table-responsive-stackclass.

NameColorTaste
AppleGreen and RedSweet and Tart
BananaYellowSweet and Mushy
MangoYellowish GreenTangy
OrangeOrangeSweet and Tangy
BlueberryBlueMild Sweetness
<table class="table table-bordered table-striped table-responsive-stack"> <thead class="thead-dark"> <tr> <th>Name</th> <th>Color</th> <th>Taste</th> </tr> </thead> <tbody> <tr> <td>Apple</td> <td>Green and Red</td> <td>Sweet and Tart</td> </tr> <tr> <td>Banana</td> <td>Yellow</td> <td>Sweet and Mushy</td> </tr> <tr> <td>Mango</td> <td>Yellowish Green</td> <td>Tangy</td> </tr> <tr> <td>Orange</td> <td>Orange</td> <td>Sweet and Tangy</td> </tr> <tr> <td>Blueberry</td> <td>Blue</td> <td>Mild Sweetness</td> </tr> </tbody></table>