Table
Snippet #1
| Name | Department | |
|---|---|---|
Deandre Kellnerdeandrekellner@coach.com |
Designer | |
Babara Cliffordbabaraclifford@coach.com |
Front End Developer | |
Mac Spradlingmacspradling@coach.com |
Editor | |
Deedee Songdeedeesong@coach.com |
Editor | |
Toney Crewstoneycrews@coach.com |
Editor | |
Cassondra Reischcassondrareisch@coach.com |
Editor |
<div class="card rounded-3">
<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="ms-3 lh-1">
<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">
<label for="selectDesigner" class="form-label visually-hidden">Designer</label>
<select class="form-select" id="selectDesigner" name="selectDesigner">
<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="ms-3 lh-1">
<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">
<label for="selectDeveloper" class="form-label visually-hidden">Designer</label>
<select class="form-select" id="selectDeveloper" name="selectDeveloper">
<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="ms-3 lh-1">
<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">
<label for="selectEditor" class="form-label visually-hidden">Editor</label>
<select class="form-select" id="selectEditor" name="selectEditor">
<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="ms-3 lh-1">
<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">
<label for="selectEditorOne" class="form-label visually-hidden">Editor</label>
<select class="form-select" id="selectEditorOne" name="selectEditorOne">
<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="ms-3 lh-1">
<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">
<label for="selectEditorTwo" class="form-label visually-hidden">Editor</label>
<select class="form-select" id="selectEditorTwo" name="selectEditorTwo">
<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="ms-3 lh-1">
<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">
<label for="selectEditorThree" class="form-label visually-hidden">Editor</label>
<select class="form-select" id="selectEditorThree" name="selectEditorThree">
<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
<div class="card rounded-3 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">2024-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">2024-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">2024-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">2024-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">2024-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">2024-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>