Tables

Basic Table

Add .table-bordered for borders on all sides of the table and cells.

Must use thead,th properly in tables. Otherwise we need to write extra css for table headers.
Example
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
    ....
    </tbody>
</table>

Tables with icons

Common icons used in tables

 Send SMS 
<!-- View details icon  -->
<a class="btn btn-default"> <i class="fa fa-search-plus" aria-hidden="true"></i></a>
<!-- Edit icon -->
<a class="btn btn-default"><i class="fa fa-pencil" aria-hidden="true"></i> </a>
<!-- Delete icon -->
<a class="btn btn-default"><i class="fa fa-trash-o" aria-hidden="true"></i> </a>
<!-- Button with text -->
<a class="btn btn-default "><i class="fa fa-envelope-o icon-primary" aria-hidden="true"></i> Send SMS </a>

Use these styles or change icons with required font-awesome icons and make sure cell elements vertically aligned middle by adding table-v-middle class to table. For coloured icons use icon-primary, icon-danger, icon-success

Example
Print Export
# First Name Last Name Email Details Edit Delete
1 Mark Otto markotto@gmail.com
2 Jacob Thornton jacob123@gmail.com
3 Larry the Bird larrybird98@gmail.com 
<a class="btn btn-primary pull-right m-b-10">
    <i class="fa fa-print pull-left" aria-hidden="true">
    </i>Print
</a>
<a class="btn btn-primary pull-right m-b-10 m-r-10">
    <i class="fa fa-file-excel-o pull-left" aria-hidden="true">
    </i>Export
</a>
<table class="table table-bordered table-v-middle">
    <thead>
    <tr>
        <th width="6%">#</th>
        <th width="25%">First Name</th>
        <th width="25%">Last Name</th>
        <th width="30%">Email</th>
        <th width="4%">Details</th>
        <th width="4%">Edit</th>
        <th width="4%">Delete</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td scope="row">1</td>
        <td valign="middle">Mark</td>
        <td>Otto</td>
        <td>markotto@gmail.com</td>
        <td>
            <a class="btn btn-default no-border">
                <i class="fa fa-search-plus icon-primary" aria-hidden="true"></i>
            </a>
        </td>
        <td>
            <a class="btn btn-default no-border ">
                <i class="fa fa-pencil icon-primary" aria-hidden="true"></i>
            </a>
        </td>
        <td>
            <a class="btn btn-default no-border">
                <i class="fa fa-trash-o icon-primary" aria-hidden="true"></i>
            </a>
        </td>
    </tr>
    <tr>
        <td scope="row">2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>jacob123@gmail.com</td>
        <td>
            <a class="btn btn-default no-border">
                <i class="fa fa-search-plus icon-primary" aria-hidden="true"></i>
            </a>
        </td>
        <td>
            <a class="btn btn-default no-border">
                <i class="fa fa-pencil icon-primary" aria-hidden="true"></i>
            </a>
        </td>
        <td>
            <a class="btn btn-default no-border">
                <i class="fa fa-trash-o icon-primary" aria-hidden="true"></i>
            </a>
        </td>
    </tr>
    <tr>
        <td scope="row">3</td>
        <td>Larry</td>
        <td>the Bird</td>
        <td>larrybird98@gmail.com</td>
        <td>
            <a class="btn btn-default no-border">
                <i class="fa fa-search-plus icon-primary" aria-hidden="true"></i>
            </a>
        </td>
        <td>
            <a class="btn btn-default no-border ">
                <i class="fa fa-pencil icon-primary" aria-hidden="true"></i>
            </a>
        </td>
        <td>
            <a class="btn btn-default no-border">
                <i class="fa fa-trash-o icon-primary" aria-hidden="true"></i>
            </a>
        </td>
    </tr>
    </tbody>
</table>

Table Buttons

Use these buttons for options like export, print etc

Examples
Print Export
Print Export 
<!-- Primary print button -->
<a class="btn btn-primary m-r-10">
    <i class="fa fa-print pull-left" aria-hidden="true">
    </i>Print
</a>

<!-- Primary export button -->
<a class="btn btn-primary m-r-10">
    <i class="fa fa-file-excel-o pull-left" aria-hidden="true">
    </i>Export
</a>

<!-- Primary dropdown button -->
<div class="btn-group m-r-10">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fa fa-file-excel-o" aria-hidden="true"></i>
        Export <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Excel</a></li>
        <li><a href="#">PDF</a></li>
    </ul>
</div>

<!-- Default print button -->
<a class="btn btn-default m-r-10">
    <i class="fa fa-print pull-left icon-primary" aria-hidden="true">
    </i>Print
</a>

<!-- Default export button -->
<a class="btn btn-default m-r-10">
    <i class="fa fa-file-excel-o pull-left icon-primary" aria-hidden="true">
    </i>Export
</a>

<!-- Default dropdown button -->
<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fa fa-file-excel-o icon-primary" aria-hidden="true"></i>
        Export <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Excel</a></li>
        <li><a href="#">PDF</a></li>
    </ul>
</div>

Pagination

Pagination elements should be out of table and aligned right of screen.

Example
# First Name Last Name Email Details Edit Delete
1 Mark Otto markotto@gmail.com
2 Jacob Thornton jacob123@gmail.com
3 Larry the Bird larrybird98@gmail.com 
<table class="table table-bordered table-v-middle">
    <thead>
        <tr>
            <th width="6%">#</th>
            <th width="25%">First Name</th>
            <th width="25%">Last Name</th>
            <th width="30%">Email</th>
            <th width="4%">Details</th>
            <th width="4%">Edit</th>
            <th width="4%">Delete</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="row">1</td>
            <td valign="middle">Mark</td>
            <td>Otto</td>
            <td>markotto@gmail.com</td>
            <td>
                <a class="btn btn-default no-border">
                    <i class="fa fa-search-plus icon-primary" aria-hidden="true"></i>
                </a>
            </td>
            <td>
                <a class="btn btn-default no-border ">
                    <i class="fa fa-pencil icon-primary" aria-hidden="true"></i>
                </a>
            </td>
            <td>
                <a class="btn btn-default no-border">
                    <i class="fa fa-trash-o icon-primary" aria-hidden="true"></i>
                </a>
            </td>
        </tr>
        <tr>
            <td scope="row">2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>jacob123@gmail.com</td>
            <td>
                <a class="btn btn-default no-border">
                    <i class="fa fa-search-plus icon-primary" aria-hidden="true"></i>
                </a>
            </td>
            <td>
                <a class="btn btn-default no-border">
                    <i class="fa fa-pencil icon-primary" aria-hidden="true"></i>
                </a>
            </td>
            <td>
                <a class="btn btn-default no-border">
                    <i class="fa fa-trash-o icon-primary" aria-hidden="true"></i>
                </a>
            </td>
        </tr>
        <tr>
            <td scope="row">3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>larrybird98@gmail.com</td>
            <td>
                <a class="btn btn-default no-border">
                    <i class="fa fa-search-plus icon-primary" aria-hidden="true"></i>
                </a>
            </td>
            <td>
                <a class="btn btn-default no-border ">
                    <i class="fa fa-pencil icon-primary" aria-hidden="true"></i>
                </a>
            </td>
            <td>
                <a class="btn btn-default no-border">
                    <i class="fa fa-trash-o icon-primary" aria-hidden="true"></i>
                </a>
            </td>
        </tr>
    </tbody>
</table>

<!-- Pagination Element -->

<div class="row">
    <span class="pull-right">
        <ul class="pagination">
            <li class="disabled">
                <a>
                    <i class="fa fa-angle-left" aria-hidden="true"></i>
                </a>
            </li>
            <li class="active">
                <a>1</a>
            </li>
            <li>
                <a href="#">2</a>
            </li>
            <li>
                <a href="#">3</a>
            </li>
            <li>
                <a href="#">4</a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-angle-right" aria-hidden="true"></i>
                </a>
            </li>
        </ul>
    </span>
</div>
For more details about tables have a look at Bootstrap Tables