Table

Snippet #1

Name Department
Deandre Kellner
deandrekellner@coach.com
Designer
Babara Clifford
babaraclifford@coach.com
Front End Developer
Mac Spradling
macspradling@coach.com
Editor
Deedee Song
deedeesong@coach.com
Editor
Toney Crews
toneycrews@coach.com
Editor
Cassondra Reisch
cassondrareisch@coach.com
Editor 
<div class="card rounded-lg ">
                                                            <div class="table-responsive border-0">
                                                               <table class="table mb-0 text-nowrap ">
                                                                  <thead class="bg-light ">
                                                                     <tr>
                                                                        <th scope="col" class="py-2 border-bottom-0">Name</th>
                                                                        <th scope="col" class="py-2 border-bottom-0">Department</th>
                                                                        <th scope="col" class="py-2 border-bottom-0"></th>
                                                                     </tr>
                                                                  </thead>
                                                                  <tbody>
                                                                     <tr>
                                                                        <td class="align-middle d-flex align-items-center p-3">
                                                                           <img src="../assets/images/avatar-1.png" alt="" class="rounded-circle avatar-lg">
                                                                           <div class="ml-3">
                                                                              <h5 class="mb-0">Deandre Kellner</h5>
                                                                              <span class="font-12">deandrekellner@coach.com</span>
                                                                           </div>
                                                                        </td>
                                                                        <td class="align-middle p-3">Designer</td>
                                                                        <td class="align-middle p-3">
                                                                           <select class="custom-select">
                                                                              <option selected="">Admin</option>
                                                                              <option value="Front End Developer">Front End Developer</option>
                                                                              <option value="Editor">Editor</option>
                                                                              <option value="User">User</option>
                                                                              <option value="Admin">Admin</option>
                                                                           </select>
                                                                        </td>
                                                                     </tr>
                                                                     <tr>
                                                                        <td class="align-middle d-flex align-items-center p-3">
                                                                           <img src="../assets/images/avatar-2.png" alt="" class="rounded-circle avatar-lg">
                                                                           <div class="ml-3">
                                                                              <h5 class="mb-0">Babara Clifford</h5>
                                                                              <span class="font-12">babaraclifford@coach.com</span>
                                                                           </div>
                                                                        </td>
                                                                        <td class="align-middle p-3">Front End Developer</td>
                                                                        <td class="align-middle p-3">
                                                                           <select class="custom-select">
                                                                              <option selected="">User</option>
                                                                              <option value="Front End Developer">Front End Developer</option>
                                                                              <option value="Editor">Editor</option>
                                                                              <option value="User">User</option>
                                                                              <option value="Admin">Admin</option>
                                                                           </select>
                                                                        </td>
                                                                     </tr>
                                                                     <tr>
                                                                        <td class="align-middle d-flex align-items-center p-3">
                                                                           <img src="../assets/images/avatar-3.png" alt="" class="rounded-circle avatar-lg">
                                                                           <div class="ml-3">
                                                                              <h5 class="mb-0">Mac Spradling</h5>
                                                                              <span class="font-12">macspradling@coach.com</span>
                                                                           </div>
                                                                        </td>
                                                                        <td class="align-middle p-3">Editor</td>
                                                                        <td class="align-middle p-3">
                                                                           <select class="custom-select">
                                                                              <option selected="">Editor</option>
                                                                              <option value="Front End Developer">Front End Developer</option>
                                                                              <option value="Editor">Editor</option>
                                                                              <option value="User">User</option>
                                                                              <option value="Admin">Admin</option>
                                                                           </select>
                                                                        </td>
                                                                     </tr>
                                                                     <tr>
                                                                        <td class="align-middle d-flex align-items-center p-3">
                                                                           <img src="../assets/images/avatar-5.png" alt="" class="rounded-circle avatar-lg">
                                                                           <div class="ml-3">
                                                                              <h5 class="mb-0">Deedee Song</h5>
                                                                              <span class="font-12">deedeesong@coach.com</span>
                                                                           </div>
                                                                        </td>
                                                                        <td class="align-middle p-3">Editor</td>
                                                                        <td class="align-middle p-3">
                                                                           <select class="custom-select">
                                                                              <option selected="">Editor</option>
                                                                              <option value="Front End Developer">Front End Developer</option>
                                                                              <option value="Editor">Editor</option>
                                                                              <option value="User">User</option>
                                                                              <option value="Admin">Admin</option>
                                                                           </select>
                                                                        </td>
                                                                     </tr>
                                                                     <tr>
                                                                        <td class="align-middle d-flex align-items-center p-3">
                                                                           <img src="../assets/images/avatar-6.png" alt="" class="rounded-circle avatar-lg">
                                                                           <div class="ml-3">
                                                                              <h5 class="mb-0">Toney Crews</h5>
                                                                              <span class="font-12">toneycrews@coach.com</span>
                                                                           </div>
                                                                        </td>
                                                                        <td class="align-middle p-3">Editor</td>
                                                                        <td class="align-middle p-3">
                                                                           <select class="custom-select">
                                                                              <option value="Front End Developer">Front End Developer</option>
                                                                              <option value="Editor">Editor</option>
                                                                              <option value="User">User</option>
                                                                              <option value="Admin">Admin</option>
                                                                           </select>
                                                                        </td>
                                                                     </tr>
                                                                     <tr>
                                                                        <td class="align-middle d-flex align-items-center p-3">
                                                                           <img src="../assets/images/avatar-7.png" alt="" class="rounded-circle avatar-lg">
                                                                           <div class="ml-3">
                                                                              <h5 class="mb-0">Cassondra Reisch</h5>
                                                                              <span class="font-12">cassondrareisch@coach.com</span>
                                                                           </div>
                                                                        </td>
                                                                        <td class="align-middle p-3">Editor</td>
                                                                        <td class="align-middle p-3">
                                                                           <select class="custom-select">
                                                                              <option value="Front End Developer">Front End Developer</option>
                                                                              <option value="Editor">Editor</option>
                                                                              <option value="User">User</option>
                                                                              <option value="Admin">Admin</option>
                                                                           </select>
                                                                        </td>
                                                                     </tr>
                                                                  </tbody>
                                                               </table>
                                                            </div>
                                                         </div>

Snippet #2

Payment History

ID DATE PAYMENT-METHOD AMOUNT RECEIPT
e5BZptmrBl 2020-12-07 American Express ending in 1234 $5.00
4aS1taQR4F 2020-11-07 American Express ending in 1234 $5.00
jnUIsm4j5E 2020-10-07 American Express ending in 1234 $5.00
NPigkt3dxj 2020-09-07 American Express ending in 1234 $5.00
xzxxGXcIqk 2020-09-07 American Express ending in 1234 $5.00
cvll5njW1r 2020-09-07 American Express ending in 1234 $5.00 
<div class="card rounded-lg mb-4 ">
                                                            <div class="card-header bg-white p-4 border-bottom-0">
                                                               <h3 class="mb-0 h4">Payment History</h3>
                                                            </div>
                                                            <div class="">
                                                               <div class="table-responsive border-0">
                                                                  <table class="table mb-0 text-nowrap ">
                                                                     <thead class="bg-light ">
                                                                        <tr>
                                                                           <th scope="col" class="py-2 border-bottom-0">ID</th>
                                                                           <th scope="col" class="py-2 border-bottom-0">DATE</th>
                                                                           <th scope="col" class="py-2 border-bottom-0">PAYMENT-METHOD</th>
                                                                           <th scope="col" class="py-2 border-bottom-0">AMOUNT</th>
                                                                           <th scope="col" class="py-2 border-bottom-0"> RECEIPT</th>
                                                                        </tr>
                                                                     </thead>
                                                                     <tbody>
                                                                        <tr>
                                                                           <td class="align-middle">
                                                                              e5BZptmrBl
                                                                           </td>
                                                                           <td class="align-middle">2020-12-07</td>
                                                                           <td class="align-middle">American Express ending in 1234</td>
                                                                           <td class="align-middle">$5.00</td>
                                                                           <td class="align-middle"><a href="#!"><i class="fe fe-download"></i></a></td>
                                                                        </tr>
                                                                        <tr>
                                                                           <td class="align-middle">
                                                                              4aS1taQR4F
                                                                           </td>
                                                                           <td class="align-middle">2020-11-07</td>
                                                                           <td class="align-middle">American Express ending in 1234</td>
                                                                           <td class="align-middle">$5.00</td>
                                                                           <td class="align-middle"><a href="#!"><i class="fe fe-download"></i></a></td>
                                                                        </tr>
                                                                        <tr>
                                                                           <td class="align-middle">
                                                                              jnUIsm4j5E
                                                                           </td>
                                                                           <td class="align-middle">2020-10-07</td>
                                                                           <td class="align-middle">American Express ending in 1234</td>
                                                                           <td class="align-middle">$5.00</td>
                                                                           <td class="align-middle"><a href="#!"><i class="fe fe-download"></i></a></td>
                                                                        </tr>
                                                                        <tr>
                                                                           <td class="align-middle">
                                                                              NPigkt3dxj
                                                                           </td>
                                                                           <td class="align-middle">2020-09-07</td>
                                                                           <td class="align-middle">American Express ending in 1234</td>
                                                                           <td class="align-middle">$5.00</td>
                                                                           <td class="align-middle"><a href="#!"><i class="fe fe-download"></i></a></td>
                                                                        </tr>
                                                                        <tr>
                                                                           <td class="align-middle">
                                                                              xzxxGXcIqk
                                                                           </td>
                                                                           <td class="align-middle">2020-09-07</td>
                                                                           <td class="align-middle">American Express ending in 1234</td>
                                                                           <td class="align-middle">$5.00</td>
                                                                           <td class="align-middle"><a href="#!"><i class="fe fe-download"></i></a></td>
                                                                        </tr>
                                                                        <tr>
                                                                           <td class="align-middle">
                                                                              cvll5njW1r
                                                                           </td>
                                                                           <td class="align-middle">2020-09-07</td>
                                                                           <td class="align-middle">American Express ending in 1234</td>
                                                                           <td class="align-middle">$5.00</td>
                                                                           <td class="align-middle"><a href="#!"><i class="fe fe-download"></i></a></td>
                                                                        </tr>
                                                                     </tbody>
                                                                  </table>
                                                               </div>
                                                            </div>
                                                         </div>

Snippet #3

Employee Salary
John Saddington $12 Because that’s all Steve Job’ needed for a salary.
Tom McFarlin $100K For all the blogging he does.
Jared Erickson $100M Pictures are worth a thousand words, right? So Tom x 1,000.
Chris Ames $100B With hair like that?! Enough said… 
<table class="table table-bordered">
                                                            <thead>
                                                               <tr>
                                                                  <th scope="col" class="w-25">Employee</th>
                                                                  <th scope="col" class="w-25">Salary</th>
                                                                  <th scope="col"></th>
                                                               </tr>
                                                            </thead>
                                                            <tbody>
                                                               <tr>
                                                                  <td>John Saddington</td>
                                                                  <td>$12</td>
                                                                  <td>Because that’s all Steve Job’ needed for a salary.</td>
                                                               </tr>
                                                               <tr>
                                                                  <td>Tom McFarlin</td>
                                                                  <td>$100K</td>
                                                                  <td>For all the blogging he does.</td>
                                                               </tr>
                                                               <tr>
                                                                  <td>Jared Erickson</td>
                                                                  <td>$100M</td>
                                                                  <td>
                                                                     Pictures are worth a thousand words, right? So Tom x
                                                                     1,000.
                                                                  </td>
                                                               </tr>
                                                               <tr>
                                                                  <td>Chris Ames</td>
                                                                  <td>$100B</td>
                                                                  <td>With hair like that?! Enough said…</td>
                                                               </tr>
                                                            </tbody>
                                                         </table>

Design & Developed by Codescandy

Support