Basic
Name | Position | Office | Age | Start date | Salary |
---|---|---|---|---|---|
Cara Stevens | Sales Assistant | New York | 46 | 2011/12/06 | $145,600 |
Hermione Butler | Regional Director | London | 47 | 2011/03/21 | $356,250 |
Lael Greer | Systems Administrator | London | 21 | 2009/02/27 | $103,500 |
Jonas Alexander | Developer | San Francisco | 30 | 2010/07/14 | $86,500 |
Shad Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $183,000 |
Michael Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | $183,000 |
Donna Snider | Customer Support | New York | 27 | 2011/01/25 | $112,000 |
Name | Position | Office | Age | Start date | Salary |
<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-stack
class.
Name | Color | Taste |
---|---|---|
Apple | Green and Red | Sweet and Tart |
Banana | Yellow | Sweet and Mushy |
Mango | Yellowish Green | Tangy |
Orange | Orange | Sweet and Tangy |
Blueberry | Blue | Mild 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>