{{#extend "layout" title="Light Blue HTML5 Dashboard - Tables Basic"}}
{{#content "sidebar"}}
{{> sidebar active="tables_basic"}}
{{/content}}
{{#content "content" mode="replace"}}
<ol class="breadcrumb">
    <li class="breadcrumb-item">YOU ARE HERE</li>
    <li class="breadcrumb-item active">Tables Basic</li>
</ol>
<h2 class="page-title">Tables - <span class="fw-semi-bold">Static</span></h2>
<div class="row">
    <div class="col-lg-12">
        <section class="widget">
            <header>
                <h5>
                    Table <span class="fw-semi-bold">Styles</span>
                </h5>
                <div class="widget-controls mt-2">
                    <a href="#"><i class="la la-cog"></i></a>
                    <a data-widgster="close" href="#"><i class="glyphicon glyphicon-remove"></i></a>
                </div>
            </header>
            <div class="widget-body">
                <table class="table">
                    <thead>
                        <tr>
                            <th class="d-none d-md-table-cell">#</th>
                            <th>Picture</th>
                            <th>Description</th>
                            <th class="d-none d-md-table-cell">Info</th>
                            <th class="d-none d-md-table-cell">Date</th>
                            <th class="d-none d-md-table-cell">Size</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="d-none d-md-table-cell">1</td>
                            <td>
                                <img class="img-rounded" src="../demo/img/pictures/1.jpg" alt="" height="50">
                            </td>
                            <td>
                                Palo Alto
                            </td>
                            <td class="d-none d-md-table-cell">
                                <p class="no-margin">
                                    <small>
                                        <span class="fw-semi-bold">Type:</span>
                                        <span class="text-semi-muted">&nbsp; JPEG</span>
                                    </small>
                                </p>
                                <p>
                                    <small>
                                        <span class="fw-semi-bold">Dimensions:</span>
                                        <span class="text-semi-muted">&nbsp; 200x150</span>
                                    </small>
                                </p>
                            </td>
                            <td class="d-none d-md-table-cell text-semi-muted">
                                September 14, 2012
                            </td>
                            <td class="d-none d-md-table-cell text-semi-muted">
                                45.6 KB
                            </td>
                            <td class="width-150">
                                <div class="progress progress-sm">
                                    <div class="progress-bar progress-sm bg-success js-progress-animate"
                                        style="width: 0;" data-width="29%"></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="d-none d-md-table-cell">2</td>
                            <td>
                                <img class="img-rounded" src="../demo/img/pictures/2.jpg" alt="" height="50">
                            </td>
                            <td>
                                The Sky
                            </td>
                            <td class="d-none d-md-table-cell">
                                <p class="no-margin">
                                    <small>
                                        <span class="fw-semi-bold">Type:</span>
                                        <span class="text-semi-muted">&nbsp; PSD</span>
                                    </small>
                                </p>
                                <p>
                                    <small>
                                        <span class="fw-semi-bold">Dimensions:</span>
                                        <span class="text-semi-muted">&nbsp; 2400x1455</span>
                                    </small>
                                </p>
                            </td>
                            <td class="d-none d-md-table-cell text-semi-muted">
                                November 14, 2012
                            </td>
                            <td class="d-none d-md-table-cell text-semi-muted">
                                15.3 MB
                            </td>
                            <td class="width-150">
                                <div class="progress progress-sm">
                                    <div class="progress-bar progress-sm bg-warning js-progress-animate"
                                        style="width: 0;" data-width="33%"></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="d-none d-md-table-cell">3</td>
                            <td>
                                <img class="img-rounded" src="../demo/img/pictures/3.jpg" alt="" height="50">
                            </td>
                            <td>
                                Down the road
                                <br>
                                <span class="badge bg-danger">INFO!</span>
                            </td>
                            <td class="d-none d-md-table-cell">
                                <p class="no-margin">
                                    <small>
                                        <span class="fw-semi-bold">Type:</span>
                                        <span class="text-semi-muted">&nbsp; JPEG</span>
                                    </small>
                                </p>
                                <p>
                                    <small>
                                        <span class="fw-semi-bold">Dimensions:</span>
                                        <span class="text-semi-muted">&nbsp; 200x150</span>
                                    </small>
                                </p>
                            </td>
                            <td class="d-none d-md-table-cell text-semi-muted">
                                September 14, 2012
                            </td>
                            <td class="d-none d-md-table-cell text-semi-muted">
                                49.0 KB
                            </td>
                            <td class="width-150">
                                <div class="progress progress-sm">
                                    <div class="progress-bar progress-sm bg-info js-progress-animate" style="width: 0;"
                                        data-width="38%"></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="d-none d-md-table-cell">4</td>
                            <td>
                                <img class="img-rounded" src="../demo/img/pictures/4.jpg" alt="" height="50">
                            </td>
                            <td>
                                The Edge
                            </td>
                            <td class="d-none d-md-table-cell">
                                <p class="no-margin">
                                    <small>
                                        <span class="fw-semi-bold">Type:</span>
                                        <span class="text-semi-muted">&nbsp; PNG</span>
                                    </small>
                                </p>
                                <p>
                                    <small>
                                        <span class="fw-semi-bold">Dimensions:</span>
                                        <span class="text-semi-muted">&nbsp; 210x160</span>
                                    </small>
                                </p>
                            </td>
                            <td class="d-none d-md-table-cell text-semi-muted">
                                September 15, 2012
                            </td>
                            <td class="d-none d-md-table-cell text-semi-muted">
                                69.1 KB
                            </td>
                            <td class="width-150">
                                <div class="progress progress-sm">
                                    <div class="progress-bar progress-sm bg-danger js-progress-animate"
                                        style="width: 0;" data-width="17%"></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="d-none d-md-table-cell">5</td>
                            <td>
                                <img class="img-rounded" src="../demo/img/pictures/11.jpg" alt="" height="50">
                            </td>
                            <td>
                                Fortress
                            </td>
                            <td class="d-none d-md-table-cell">
                                <p class="no-margin">
                                    <small>
                                        <span class="fw-semi-bold">Type:</span>
                                        <span class="text-semi-muted">&nbsp; JPEG</span>
                                    </small>
                                </p>
                                <p>
                                    <small>
                                        <span class="fw-semi-bold">Dimensions:</span>
                                        <span class="text-semi-muted">&nbsp; 1452x1320</span>
                                    </small>
                                </p>
                            </td>
                            <td class="d-none d-md-table-cell text-semi-muted">
                                October 1, 2012
                            </td>
                            <td class="d-none d-md-table-cell text-semi-muted">
                                2.3 MB
                            </td>
                            <td class="width-150">
                                <div class="progress progress-sm">
                                    <div class="progress-bar progress-sm bg-primary js-progress-animate"
                                        style="width: 0;" data-width="41%"></div>
                                </div>
                            </td>
                        </tr>
                    </tbody>

                </table>
                <div class="clearfix">
                    <div class="float-right">
                        <button class="btn btn-default btn-sm mr-3">
                            Send to ...
                        </button>
                        <div class="btn-group">
                            <button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
                                &nbsp; Clear &nbsp;
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a class="dropdown-item" href="#">Clear</a></li>
                                <li><a class="dropdown-item" href="#">Move ...</a></li>
                                <li><a class="dropdown-item" href="#">Something else here</a></li>
                                <li class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </div>
                    <p>Basic table with styled content</p>
                </div>
            </div>
        </section>
    </div>
</div>
<div class="row">
    <div class="col-lg-6">
        <section class="widget">
            <header>
                <h5>Table <span class="fw-semi-bold">Styles</span></h5>
                <div class="widget-controls">
                    <a href="#"><i class="la la-cog"></i></a>
                    <a data-widgster="close" href="#"><i class="glyphicon glyphicon-remove"></i></a>
                </div>
            </header>
            <div class="widget-body">
                <h3>Stripped <span class="fw-semi-bold">Table</span></h3>
                <p>Each row is highlighted. You will never lost there. Just <code>.table-striped</code> it.</p>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>
                                <div class="checkbox abc-checkbox">
                                    <input id="checkbox1" type="checkbox" data-check-all>
                                    <label for="checkbox1"></label>
                                </div>
                            </th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Info</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="checkbox abc-checkbox">
                                    <input id="checkbox2" type="checkbox">
                                    <label for="checkbox2"></label>
                                </div>
                            </td>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td><span class="badge bg-success">Online</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="checkbox abc-checkbox">
                                    <input id="checkbox3" type="checkbox">
                                    <label for="checkbox3"></label>
                                </div>
                            </td>
                            <td>Jacob <span class="badge bg-warning text-gray-dark">ALERT!</span></td>
                            <td>Thornton</td>
                            <td><span class="badge bg-gray-light text-gray">Away</span></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="checkbox abc-checkbox">
                                    <input id="checkbox4" type="checkbox">
                                    <label for="checkbox4"></label>
                                </div>
                            </td>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td><span class="badge badge-info">Construct</span></td>
                        </tr>
                    </tbody>
                </table>
                <br><br>
                <h3>Hover <span class="fw-semi-bold">Table</span></h3>
                <p>Trace only what's really important. <code>.table-hover</code> is made for it.</p>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Email</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td><a href="#">ottoto@example.com</a></td>
                                <td><span class="badge badge-pill bg-primary">Pending</span></td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td><a href="#">fat.thor@example.com</a></td>
                                <td><span class="badge badge-pill bg-warning">Unconfirmed</span>
                                </td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Larry</td>
                                <td>the Bird</td>
                                <td><a href="#">larry@example.com</a></td>
                                <td><span class="badge badge-pill bg-success">New</span></td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>Peter</td>
                                <td>Horadnia</td>
                                <td><a href="#">peter@example.com</a></td>
                                <td><span class="badge badge-pill bg-info">Active</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    </div>
    <div class="col-lg-6">
        <section class="widget">
            <header>
                <h5>Table <span class="fw-semi-bold">Styles</span></h5>
                <div class="widget-controls">
                    <a href="#"><i class="la la-cog"></i></a>
                    <a data-widgster="close" href="#"><i class="glyphicon glyphicon-remove"></i></a>
                </div>
            </header>
            <div class="widget-body">
                <h3>Bordered <span class="fw-semi-bold">Table</span></h3>
                <p>Each row is highlighted. You will never lost there. That's how
                    all of us learned in school the table should look like. Just add
                    <code>.table-bordered</code> to it.</p>
                <table class="table table-bordered table-lg mt-lg mb-0">
                    <thead>
                        <tr>
                            <th>
                                <div class="checkbox abc-checkbox">
                                    <input id="checkbox10" type="checkbox" data-check-all>
                                    <label for="checkbox10"></label>
                                </div>
                            </th>
                            <th>Product</th>
                            <th>Price</th>
                            <th class="text-center">Sales</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="checkbox abc-checkbox">
                                    <input id="checkbox11" type="checkbox" data-check-all>
                                    <label for="checkbox11"></label>
                                </div>
                            </td>
                            <td>On the Road</td>
                            <td>$25 224.2</td>
                            <td class="text-center">
                                <div class="sparkline" data-type="bar" data-bar-color="#3abf94">13,14,16,15,4,14,20
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="checkbox abc-checkbox">
                                    <input id="checkbox12" type="checkbox" data-check-all>
                                    <label for="checkbox12"></label>
                                </div>
                            </td>
                            <td>HP Core i7</td>
                            <td>$87 346.1</td>
                            <td class="text-center">
                                <div class="sparkline" data-type="bar" data-bar-color="#1a86d0">14,12,16,11,17,19,16
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="checkbox abc-checkbox">
                                    <input id="checkbox13" type="checkbox" data-check-all>
                                    <label for="checkbox13"></label>
                                </div>
                            </td>
                            <td>Let's Dance</td>
                            <td>$57 944.6</td>
                            <td class="text-center">
                                <div class="sparkline" data-type="bar" data-bar-color="#3abf94">11,17,19,16,14,12,16
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="checkbox abc-checkbox">
                                    <input id="checkbox14" type="checkbox" data-check-all>
                                    <label for="checkbox14"></label>
                                </div>
                            </td>
                            <td>Air Pro</td>
                            <td>$118 533.1</td>
                            <td class="text-center">
                                <div class="sparkline" data-type="bar" data-bar-color="#005792">13,14,20,16,15,4,14
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="checkbox abc-checkbox">
                                    <input id="checkbox15" type="checkbox" data-check-all>
                                    <label for="checkbox15"></label>
                                </div>
                            </td>
                            <td>Version Control</td>
                            <td>$72 854.5</td>
                            <td class="text-center">
                                <div class="sparkline" data-type="bar" data-bar-color="#005792">16,15,4,14,13,14,20
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
        <section class="widget">
            <header>
                <h5>Table <span class="fw-semi-bold">Styles</span></h5>
                <div class="widget-controls">
                    <a href="#"><i class="la la-cog"></i></a>
                    <a data-widgster="close" href="#"><i class="glyphicon glyphicon-remove"></i></a>
                </div>
            </header>
            <div class="widget-body">
                <h3>Overflow <span class="fw-semi-bold">Table</span></h3>
                <p>
                    Add any non-bordered .table within a widget for a seamless design.
                    Awesome look for no cost.
                    Just wrap the table with simple css class <code>.widget-table-overlay</code> inside
                    of widget
                </p>
            </div>
            <div class="widget-table-overlay">
                <table class="table table-striped table-lg mt-lg mb-0">
                    <thead class="no-bd">
                        <tr>
                            <th>
                                <div class="checkbox abc-checkbox">
                                    <input id="checkbox210" type="checkbox" data-check-all>
                                    <label for="checkbox210"></label>
                                </div>
                            </th>
                            <th>Product</th>
                            <th>Price</th>
                            <th class="text-center">Sales</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="checkbox abc-checkbox">
                                    <input id="checkbox211" type="checkbox" data-check-all>
                                    <label for="checkbox211"></label>
                                </div>
                            </td>
                            <td>On the Road</td>
                            <td>$25 224.2</td>
                            <td class="text-center">
                                <div class="sparkline" data-type="bar" data-bar-color="#005792">13,14,16,15,4,14,20
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="checkbox abc-checkbox">
                                    <input id="checkbox212" type="checkbox" data-check-all>
                                    <label for="checkbox212"></label>
                                </div>
                            </td>
                            <td>HP Core i7</td>
                            <td>$87 346.1</td>
                            <td class="text-center">
                                <div class="sparkline" data-type="bar" data-bar-color="#005792">14,12,16,11,17,19,16
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="checkbox abc-checkbox">
                                    <input id="checkbox213" type="checkbox" data-check-all>
                                    <label for="checkbox213"></label>
                                </div>
                            </td>
                            <td>Let's Dance</td>
                            <td>$57 944.6</td>
                            <td class="text-center">
                                <div class="sparkline" data-type="bar" data-bar-color="#fd5e00">11,17,19,16,14,12,16
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="checkbox abc-checkbox">
                                    <input id="checkbox214" type="checkbox" data-check-all>
                                    <label for="checkbox214"></label>
                                </div>
                            </td>
                            <td>Air Pro</td>
                            <td>$118 533.1</td>
                            <td class="text-center">
                                <div class="sparkline" data-type="bar" data-bar-color="#005792">13,14,20,16,15,4,14
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="checkbox abc-checkbox">
                                    <input id="checkbox215" type="checkbox" data-check-all>
                                    <label for="checkbox215"></label>
                                </div>
                            </td>
                            <td>Version Control</td>
                            <td>$72 854.5</td>
                            <td class="text-center">
                                <div class="sparkline" data-type="bar" data-bar-color="#1a86d0">16,15,4,14,13,14,20
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </div>
</div>
{{/content}}
{{#content "scripts"}}
<script src="../../node_modules/jquery-sparkline/jquery.sparkline.js"></script>
<!-- page specific js -->
<script src="../js/tables/tables-basic.js"></script>
{{/content}}
{{/extend}}