# Basic Table header small text goes here...

# | Username | Email Address
--- | --- | ---
1 | Nicky Almera | nicky@hotmail.com
2 | Edmund Wong | edmund@yahoo.com
3 | Harvinder Singh | harvinder@gmail.com

<table class="table"> ... </table>

# | Username | Email Address
--- | --- | ---
1 | Nicky Almera | nicky@hotmail.com
2 | Edmund Wong | edmund@yahoo.com
3 | Harvinder Singh | harvinder@gmail.com

<table class="table table-hover"> ... </table>

# | Username | Email Address
--- | --- | ---
1 | Nicky Almera | nicky@hotmail.com
2 | Edmund Wong | edmund@yahoo.com
3 | Harvinder Singh | harvinder@gmail.com

<table class="table table-condensed"> ... </table>

# | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading
--- | --- | --- | --- | --- | --- | ---
1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell
2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell
3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell

<div class="table-responsive"> <table class="table"> ... </table> </div>

# | Username | Email Address
--- | --- | ---
1 | Nicky Almera | nicky@hotmail.com
2 | Edmund Wong | edmund@yahoo.com
3 | Harvinder Singh | harvinder@gmail.com

<table class="table table-striped"> ... </table>

# | Username | Email Address
--- | --- | ---
1 | Nicky Almera | nicky@hotmail.com
2 | Edmund Wong | edmund@yahoo.com
3 | Harvinder Singh | harvinder@gmail.com

<table class="table table-bordered"> ... </table>

#### Material Sorting Table NEW

Dessert (100g) | Calories | Fat (g) | Carbs (g) | Protein (g)
--- | --- | --- | --- | ---
{{dessert.name}} | {{dessert.calories}} | {{dessert.fat}} | {{dessert.carbs}} | {{dessert.protein}}

<table class="table" matSort (matSortChange)="sortData($event)"> ... </table>

#### UI Elements in Table NEW

# | Username | Email Address |
--- | --- | --- | ---
| Nicky Almera | nicky@hotmail.com | Edit Delete
| Edmund Wong | edmund@yahoo.com | Settings
| Harvinder Singh | harvinder@gmail.com | Edit Delete

<table class="table"> <tbody> <tr> <!-- with image --> <td class="with-img">...</td> <!-- with button --> <td class="with-btn">...</td> <!-- with button group --> <td class="with-btn-group">...</td> </tr> </tbody> </table>

#### Form Elements in Table NEW

| Username | Email Address
--- | --- | ---
| Nicky Almera | nicky@hotmail.com
| Edmund Wong | edmund@yahoo.com
|  | harvinder@gmail.com
| @ | terry@gmail.com

<table class="table"> <tbody> <tr> <!-- with checkbox --> <td class="with-checkbox">...</td> <!-- with radio --> <td class="with-radio">...</td> <!-- with form input --> <td class="with-form-control">...</td> <!-- with input group --> <td class="with-input-control">...</td> </tr> </tbody> </table>

# | Username | Email Address
--- | --- | ---
1 | Nicky Almera | nicky@hotmail.com
2 | Terry Khoo | terry@gmail.com
3 | Edmund Wong | edmund@yahoo.com
4 | Harvinder Singh | harvinder@gmail.com
5 | Terry Khoo | terry@gmail.com

<table class="table"> <tbody> <tr class="active">...</tr> <tr class="info">...</tr> <tr class="success">...</tr> <tr class="warning">...</tr> <tr class="danger">...</tr> </tbody> </table>