<!DOCTYPE html> <html lang="en"> <head> @@include("partials/title-meta.html", {"title": "Basic Tables"}) @@include("partials/head-css.html") </head> <body> <!-- Begin page --> <div id="wrapper"> @@include('./partials/topbar.html', {"pagetitle": "Basic Tables"}) @@include('./partials/left-sidebar.html') <!-- ============================================================== --> <!-- Start Page Content here --> <!-- ============================================================== --> <div class="content-page"> <div class="content"> <!-- Start Content--> <div class="container-fluid"> <div class="row"> <div class="col-lg-6"> <div class="card-box"> <div class="dropdown float-right"> <a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false"> <i class="mdi mdi-dots-vertical"></i> </a> <div class="dropdown-menu dropdown-menu-right"> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Action</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Another action</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Something else</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Separated link</a> </div> </div> <h4 class="mt-0 header-title">Basic example</h4> <p class="text-muted font-14 mb-3"> For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code><table></code>. </p> <div class="table-responsive"> <table class="table mb-0"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> </div> <div class="col-lg-6"> <div class="card-box"> <div class="dropdown float-right"> <a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false"> <i class="mdi mdi-dots-vertical"></i> </a> <div class="dropdown-menu dropdown-menu-right"> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Action</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Another action</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Something else</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Separated link</a> </div> </div> <h4 class="header-title">Inverse table</h4> <p class="text-muted font-14 mb-3"> Your awesome text goes here.Your awesome text goes here. </p> <div class="table-responsive"> <table class="table table-dark mb-0"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> </div> </div> <!--- end row --> <div class="row"> <div class="col-lg-6"> <div class="card-box"> <div class="dropdown float-right"> <a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false"> <i class="mdi mdi-dots-vertical"></i> </a> <div class="dropdown-menu dropdown-menu-right"> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Action</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Another action</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Something else</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Separated link</a> </div> </div> <h4 class="mt-0 header-title">Table head options</h4> <p class="text-muted font-14 mb-3"> Use one of two modifier classes to make <code><thead></code>s appear light or dark gray. </p> <div class="table-responsive"> <table class="table mb-0"> <thead class="thead-light"> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> </div> <div class="col-lg-6"> <div class="card-box"> <div class="dropdown float-right"> <a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false"> <i class="mdi mdi-dots-vertical"></i> </a> <div class="dropdown-menu dropdown-menu-right"> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Action</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Another action</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Something else</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Separated link</a> </div> </div> <h4 class="mt-0 header-title">Table head options</h4> <p class="text-muted font-14 mb-3"> Use one of two modifier classes to make <code><thead></code>s appear light or dark gray. </p> <div class="table-responsive"> <table class="table mb-0"> <thead class="thead-dark"> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> </div> </div> <!-- end row --> <div class="row"> <div class="col-lg-6"> <div class="card-box"> <div class="dropdown float-right"> <a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false"> <i class="mdi mdi-dots-vertical"></i> </a> <div class="dropdown-menu dropdown-menu-right"> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Action</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Another action</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Something else</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Separated link</a> </div> </div> <h4 class="mt-0 header-title">Striped rows</h4> <p class="text-muted font-14 mb-3"> Use <code>.table-striped</code> to add zebra-striping to any table row within the <code><tbody></code>. </p> <div class="table-responsive"> <table class="table table-striped mb-0"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Mark</td> <td>Otto</td> <td>@TwBootstrap</td> </tr> <tr> <th scope="row">4</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> </div> <div class="col-lg-6"> <div class="card-box"> <div class="dropdown float-right"> <a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false"> <i class="mdi mdi-dots-vertical"></i> </a> <div class="dropdown-menu dropdown-menu-right"> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Action</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Another action</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Something else</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Separated link</a> </div> </div> <h4 class="mt-0 header-title">Bordered table</h4> <p class="text-muted font-14 mb-3"> Add <code>.table-bordered</code> for borders on all sides of the table and cells. </p> <div class="table-responsive"> <table class="table table-bordered mb-0"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Mark</td> <td>Otto</td> <td>@TwBootstrap</td> </tr> <tr> <th scope="row">3</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">4</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> </div> </div> <!-- end row --> <div class="row"> <div class="col-lg-6"> <div class="card-box"> <div class="dropdown float-right"> <a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false"> <i class="mdi mdi-dots-vertical"></i> </a> <div class="dropdown-menu dropdown-menu-right"> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Action</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Another action</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Something else</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Separated link</a> </div> </div> <h4 class="mt-0 header-title">Hoverable rows</h4> <p class="text-muted font-14 mb-3"> Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally on small devices (under 768px). </p> <div class="table-responsive"> <table class="table table-hover mb-0"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> </div> <div class="col-lg-6"> <div class="card-box"> <div class="dropdown float-right"> <a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false"> <i class="mdi mdi-dots-vertical"></i> </a> <div class="dropdown-menu dropdown-menu-right"> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Action</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Another action</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Something else</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Separated link</a> </div> </div> <h4 class="mt-0 header-title">Small table</h4> <p class="text-muted font-14 mb-3"> Add <code>.table-sm</code> to make tables more compact by cutting cell padding in half. </p> <div class="table-responsive"> <table class="table mb-0 table-sm"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> <tr> <th scope="row">4</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <th scope="row">5</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> </tbody> </table> </div> </div> </div> </div> <!-- end row --> <div class="row"> <div class="col-lg-6"> <div class="card-box"> <div class="dropdown float-right"> <a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false"> <i class="mdi mdi-dots-vertical"></i> </a> <div class="dropdown-menu dropdown-menu-right"> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Action</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Another action</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Something else</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Separated link</a> </div> </div> <h4 class="mt-0 header-title">Contextual classes</h4> <p class="text-muted font-14 mb-3"> Use contextual classes to color table rows or individual cells. </p> <div class="table-responsive"> <table class="table mb-0"> <thead> <tr> <th>#</th> <th>Column heading</th> <th>Column heading</th> <th>Column heading</th> </tr> </thead> <tbody> <tr class="table-active"> <th scope="row">1</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <th scope="row">2</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="table-success"> <th scope="row">3</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <th scope="row">4</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="table-info"> <th scope="row">5</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <th scope="row">6</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="table-warning"> <th scope="row">7</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <th scope="row">8</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="table-danger"> <th scope="row">9</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> </tbody> </table> </div> </div> </div> <div class="col-lg-6"> <div class="card-box"> <div class="dropdown float-right"> <a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false"> <i class="mdi mdi-dots-vertical"></i> </a> <div class="dropdown-menu dropdown-menu-right"> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Action</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Another action</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Something else</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Separated link</a> </div> </div> <h4 class="mt-0 header-title">Contextual with background color</h4> <p class="text-muted font-14 mb-3"> Use contextual classes to color table rows or individual cells. </p> <div class="table-responsive"> <table class="table mb-0"> <thead> <tr> <th>#</th> <th>Column heading</th> <th>Column heading</th> <th>Column heading</th> </tr> </thead> <tbody> <tr class="bg-dark text-light"> <th scope="row">1</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <th scope="row">2</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="bg-success text-white"> <th scope="row">3</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <th scope="row">4</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="bg-info text-white"> <th scope="row">5</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <th scope="row">6</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="bg-warning text-white"> <th scope="row">7</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <th scope="row">8</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="bg-danger text-white"> <th scope="row">9</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> </tbody> </table> </div> </div> </div> </div> <!-- end row --> <div class="row"> <div class="col-lg-6"> <div class="card-box"> <div class="dropdown float-right"> <a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false"> <i class="mdi mdi-dots-vertical"></i> </a> <div class="dropdown-menu dropdown-menu-right"> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Action</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Another action</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Something else</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Separated link</a> </div> </div> <h4 class="mt-0 header-title">Borderless table</h4> <p class="text-muted font-14 mb-3"> For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code><table></code>. </p> <div class="table-responsive"> <table class="table table-borderless mb-0"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> </div> <div class="col-lg-6"> <div class="card-box"> <div class="dropdown float-right"> <a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false"> <i class="mdi mdi-dots-vertical"></i> </a> <div class="dropdown-menu dropdown-menu-right"> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Action</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Another action</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Something else</a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item">Separated link</a> </div> </div> <h4 class="mt-0 header-title">Borderless Inverse table</h4> <p class="text-muted font-14 mb-3"> Your awesome text goes here.Your awesome text goes here. </p> <div class="table-responsive"> <table class="table table-dark table-borderless mb-0"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> </div> </div> <!--- end row --> </div> <!-- container-fluid --> </div> <!-- content --> @@include('./partials/footer.html') </div> <!-- ============================================================== --> <!-- End Page content --> <!-- ============================================================== --> </div> <!-- END wrapper --> @@include('./partials/right-sidebar.html') <!-- Vendor js --> <script src="assets/js/vendor.min.js"></script> <!-- App js --> <script src="assets/js/app.min.js"></script> </body> </html>