Tables
Table cells padding, width and bottom margin customization options.
.example-table-1 {
.lib-table();
}
Table mixin variables
Mixin variable
Global variable
Default value
Allowed values
Comment
@_table-width
@table__width
100%
'' | false | value
Table width
@_cell-padding-horizontal
@table-cell__padding-horizontal
@indent__s
'' | false | value
Table cell horizontal padding
@_cell-padding-vertical
@table-cell__padding-vertical
8px
'' | false | value
Table cell vertical padding
@_table-margin-bottom
@table__margin-bottom
false
'' | false | value
Table margin bottom
Table typography
The .lib-table-typography()
mixin provides table typography customization options.
.example-table-2 {
.lib-table-typography();
}
Table typography mixin variables
Mixin variable
Global variable
Default value
Allowed values
Comment
@_table-td-font-size
@table-td__font-size
false
'' | false | value
Table cell font size
@_table-td-color
@table-td__color
false
'' | false | value
Table cell font color
@_table-td-font-family
@table-td__font-family
false
'' | false | value
Table cell font family
@_table-td-font-weight
@table-td__font-weight
false
'' | false | value
Table cell font weight
@_table-td-line-height
@table-td__line-height
false
'' | false | value
Table cell line height
@_table-td-font-style
@table-td__font-style
false
'' | false | value
Table cell font style
@_table-th-font-size
@table-th__font-size
false
'' | false | value
Table header cell font size
@_table-th-color
@table-th__color
@text__color__intense
'' | false | value
Table header cell font color
@_table-th-font-family
@table-th__font-family
false
'' | false | value
Table header cell font family
@_table-th-font-weight
@table-th__font-weight
@font-weight__bold
'' | false | value
Table header cell font weight
@_table-th-line-height
@table-th__line-height
false
'' | false | value
Table header cell line height
@_table-th-font-style
@table-th__font-style
false
'' | false | value
Table header cell font style
Table caption
The .lib-table-caption()
mixin is used to customize table caption.
.example-table-3 {
.lib-table();
.lib-table-caption(@_table-caption-color: #f00);
}
Table caption mixin variables
Mixin variable
Global variable
Default value
Allowed values
Comment
@_table-caption-hide
@table-caption__hide
true
'' | false | value
Table caption is visible
@_table-caption-font-size
@table-caption__font-size
false
'' | false | value
Table caption font size
@_table-caption-color
@table-caption__color
false
'' | false | value
Table caption text color
@_table-caption-font-family
@table-caption__font-family
false
'' | false | value
Table caption font family
@_table-caption-font-weight
@table-caption__font-weight
false
'' | false | value
Table caption font weight
@_table-caption-font-style
@table-caption__font-style
false
'' | false | value
Table caption font style
@_table-caption-line-height
@table-caption__line-height
false
'' | false | value
Table caption line height
@_table-caption-alignment
@table-caption__alignment
false
'' | false | value
Table caption alignment
@_table-caption-margin-top
@table-caption__margin-top
false
'' | false | value
Table caption top margin
@_table-caption-margin-bottom
@table-caption__margin-bottom
false
'' | false | value
Table caption bottom margin
Table cells resize
The .lib-table-resize()
mixin provides table header cells and table cells paddings reset.
.example-table-4 {
.lib-table();
.lib-table-resize(
@_td-padding-top: 15px,
@_td-padding-right: 25px,
@_td-padding-bottom: 5px,
@_td-padding-left: 0,
@_th-padding-top: 15px,
@_th-padding-right: 25px,
@_th-padding-bottom: 10px,
@_th-padding-left: 0
);
}
Table cells resize variables
Mixin variable
Global variable
Default value
Allowed values
Comment
@_th-padding-top
@table-cell__padding-vertical / 2
@_td-padding-top
'' | false | value
Table header cell top padding
@_th-padding-right
@table-cell__padding-horizontal / 2
@_td-padding-right
'' | false | value
Table header cell right padding
@_th-padding-bottom
@table-cell__padding-vertical / 2
@_td-padding-top
'' | false | value
Table header cell bottom padding
@_th-padding-left
@table-cell__padding-horizontal / 2
@_td-padding-right
'' | false | value
Table header cell left padding
@_td-padding-top
@table-cell__padding-vertical / 2
@table-cell__padding-vertical / 2
'' | false | value
Table cell top padding
@_td-padding-right
@table-cell__padding-horizontal / 2
@table-cell__padding-horizontal / 2
'' | false | value
Table cell right padding
@_td-padding-bottom
@table-cell__padding-vertical / 2
@_td-padding-top
'' | false | value
Table cell bottom padding
@_td-padding-left
@table-cell__padding-horizontal / 2
@_td-padding-right
'' | false | value
Table cell left padding
Table background customization
The .lib-table-background-color()
mixin provides table cells background customization options.
.example-table-5 {
.lib-table();
.lib-table-background-color(
@_table-background-color: #fff,
@_table-head-background-color: #ccf,
@_table-foot-background-color: #cff,
@_table-td-background-color: #fcc,
@_table-body-th-background-color: #ffc
);
}
Table background mixin variables
Mixin variable
Global variable
Default value
Allowed values
Comment
@_table-background-color
@table__background-color
false
'' | false | value
Table background
@_table-head-background-color
@table-head__background-color
@table__background-color
'' | false | value
Table thead background
@_table-foot-background-color
@table-foot__background-color
@table__background-color
'' | false | value
Table tfoot background
@_table-body-th-background-color
@table-body-th__background-color
@table__background-color
'' | false | value
Table header cells background
@_table-td-background-color
@table-td__background-color
@table__background-color
'' | false | value
Table cells background
Table borders customization
The .lib-table-bordered()
mixin provides table borders customization options. To setup table borders use the following allowed values for the @_type
variable:
normal - all borders are set up
horizontal - table head and table cells have only horizontal borders
vertical - table head and table cells have only vertical borders
light - only table head cells have bottom border
clear - table does not have borders
.example-table-6 {
.lib-table();
.lib-table-bordered();
}
Table borders mixin variables
Mixin variable
Global variable
Default value
Allowed values
Comment
@_table_type
-
normal
normal | horizontal | vertical | light | clear | horizontal_body
Table border settings. When is set to "horizontal_body", the table border settings are applied only for tbody
@_table_border-width
@table__border-width
@border-width__base
'' | false | value
Table border width
@_table_border-style
@table__border-style
solid
'' | false | value
Table border style
@_table_border-color
@table__border-color
@border-color__base
'' | false | value
Table border color
Table with horizontal borders
To set only horizontal borders for a table use:
.lib-table-bordered(@_table_type: horizontal)
.example-table-7 {
.lib-table();
.lib-table-bordered(
@_table_type: horizontal
);
}
Table with vertical borders
To set only horizontal borders for a table use:
.lib-table-bordered(@_table_type: vertical)
.example-table-8 {
.lib-table();
.lib-table-bordered(
@_table_type: vertical
);
}
Table with light borders
To set bottom borders only for a table caption use:
.lib-table-bordered(@_table_type: light)
.example-table-9 {
.lib-table();
.lib-table-bordered(
@_table_type: light
);
}
Table without borders
To clear all table borders use:
.lib-table-bordered(@_table_type: clear)
.example-table-10 {
.lib-table();
.lib-table-bordered(
@_table_type: clear
);
}
Striped table
The .lib-table-striped()
mixin sets color backgrounds to table rows.
.example-table-11 {
.lib-table();
.lib-table-striped(
@_stripped-background-color: #ffc,
@_stripped-color: #000,
@_stripped-direction: horizontal,
@_stripped-highlight: even
);
}
Striped table mixin variables
Mixin variable
Global variable
Default value
Allowed values
Comment
@_stripped-background-color
@table-cell-stripped__background-color
lighten(@table-cell__hover__background-color, 15%)
'' | false | value
Striped cells background color
@_stripped-color
@table-cell-stripped__color
@text__color
'' | false | value
Striped cells text color
@_stripped-direction
-
horizontal
horizontal | vertical
Stripes direction
@_stripped-highlight
-
odd
odd | even
Rows stripes are applied to
Table with rows hover
The .lib-table-hover()
mixin sets color backgrounds to hovered table rows.
.example-table-12 {
.lib-table();
.lib-table-hover();
}
Table with rows hover mixin variables
Mixin variable
Global variable
Default value
Allowed values
Comment
@_table_cell-background-color-hover
@table-cell__hover__background-color
@panel__background-color
'' | false | value
Hovered table row background
@_table_cell-odd-background-color-hover
@table-cell__hover__background-color
@_table_cell-background-color-hover
'' | false | value
Hovered table odd row background
Responsive table technics #1
Magento UI library employs two responsive tables technics which are applied by calling an appropriate mixin.
The .lib-table-overflow()
mixin adds a horizontal scrollbar for a table. This mixin accepts no variables.
.example-table-13 {
.lib-table();
.lib-table-bordered();
.lib-table-striped();
.lib-table-hover();
}
@media only screen and (max-width: @screen__m) {
.example-table-14 {
.lib-table-overflow();
}
}
Responsive table technics #2
The .lib-table-responsive()
mixin rearranges table cells for mobile version.
.example-table-15 {
.lib-table();
.lib-table-bordered();
.lib-table-striped();
.lib-table-hover();
}
@media only screen and (max-width: @screen__m) {
.example-table-15 {
.lib-table-responsive(
@_table-background-color-responsive: #cff,
@_table-th-background-color-responsive: #ffc,
@_reset-table-striped: true,
@_reset-table-hover: true
);
}
}
Responsive table technics #2 mixin variables
Mixin variable
Global variable
Default value
Allowed values
Comment
@_table-background-color-responsive
@table-responsive__background-color
@table__background-color
'' | false | value
Responsive table background
@_table-th-background-color-responsive
@table-responsive-th__background-color
false
'' | false | value
Responsive table header cells background
@_reset-table-striped
false
-
true | false
Responsive table striped cells
@_reset-table-hover
false
-
true | false
Responsive table hovered table row background
@_table-responsive-cell-padding
@table-responsive-cell__padding
@indent__xs 0
true | false
Responsive table cells padding
<table class="example-table-1">
<caption>Table caption</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Username</th>
<th scope="col">Phone</th>
<th scope="col">Site</th>
<th scope="col">Age</th>
<th scope="col">Job</th>
<th scope="col">Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Username</th>
<th>Phone</th>
<th>Site</th>
<th>Age</th>
<th>Job</th>
<th>Status</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Mark</th>
<td>@mdo</td>
<td>+1 123 456 432</td>
<td><a href="https://www.google.com">www.google.com</a></td>
<td>23</td>
<td>qa</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Alex</th>
<td>@alex</td>
<td>+1 333 222 111</td>
<td><a href="http://magento.com/">magento.com</a></td>
<td>32</td>
<td>manager</td>
<td>online</td>
</tr>
<tr>
<th scope="row">Daniel</th>
<td>@danik</td>
<td>+1 334 328 975</td>
<td><a href="https://www.yahoo.com">www.yahoo.com</a></td>
<td>18</td>
<td>developer</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Kate</th>
<td>@kateUA</td>
<td>+1 888 777 888</td>
<td><a href="https://www.twitter.com">www.twitter.com</a></td>
<td>18</td>
<td>developer</td>
<td>HR</td>
</tr>
</tbody>
</table>
<table class="example-table-2">
<caption>Table caption</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Username</th>
<th scope="col">Phone</th>
<th scope="col">Site</th>
<th scope="col">Age</th>
<th scope="col">Job</th>
<th scope="col">Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Username</th>
<th>Phone</th>
<th>Site</th>
<th>Age</th>
<th>Job</th>
<th>Status</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Mark</th>
<td>@mdo</td>
<td>+1 123 456 432</td>
<td><a href="https://www.google.com">www.google.com</a></td>
<td>23</td>
<td>qa</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Alex</th>
<td>@alex</td>
<td>+1 333 222 111</td>
<td><a href="http://magento.com/">magento.com</a></td>
<td>32</td>
<td>manager</td>
<td>online</td>
</tr>
<tr>
<th scope="row">Daniel</th>
<td>@danik</td>
<td>+1 334 328 975</td>
<td><a href="https://www.yahoo.com">www.yahoo.com</a></td>
<td>18</td>
<td>developer</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Kate</th>
<td>@kateUA</td>
<td>+1 888 777 888</td>
<td><a href="https://www.twitter.com">www.twitter.com</a></td>
<td>18</td>
<td>developer</td>
<td>HR</td>
</tr>
</tbody>
</table>
<table class="example-table-3">
<caption>Table caption</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Username</th>
<th scope="col">Phone</th>
<th scope="col">Site</th>
<th scope="col">Age</th>
<th scope="col">Job</th>
<th scope="col">Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Username</th>
<th>Phone</th>
<th>Site</th>
<th>Age</th>
<th>Job</th>
<th>Status</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Mark</th>
<td>@mdo</td>
<td>+1 123 456 432</td>
<td><a href="https://www.google.com">www.google.com</a></td>
<td>23</td>
<td>qa</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Alex</th>
<td>@alex</td>
<td>+1 333 222 111</td>
<td><a href="http://magento.com/">magento.com</a></td>
<td>32</td>
<td>manager</td>
<td>online</td>
</tr>
<tr>
<th scope="row">Daniel</th>
<td>@danik</td>
<td>+1 334 328 975</td>
<td><a href="https://www.yahoo.com">www.yahoo.com</a></td>
<td>18</td>
<td>developer</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Kate</th>
<td>@kateUA</td>
<td>+1 888 777 888</td>
<td><a href="https://www.twitter.com">www.twitter.com</a></td>
<td>18</td>
<td>developer</td>
<td>HR</td>
</tr>
</tbody>
</table>
<table class="example-table-4">
<caption>Table caption</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Username</th>
<th scope="col">Phone</th>
<th scope="col">Site</th>
<th scope="col">Age</th>
<th scope="col">Job</th>
<th scope="col">Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Username</th>
<th>Phone</th>
<th>Site</th>
<th>Age</th>
<th>Job</th>
<th>Status</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Mark</th>
<td>@mdo</td>
<td>+1 123 456 432</td>
<td><a href="https://www.google.com">www.google.com</a></td>
<td>23</td>
<td>qa</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Alex</th>
<td>@alex</td>
<td>+1 333 222 111</td>
<td><a href="http://magento.com/">magento.com</a></td>
<td>32</td>
<td>manager</td>
<td>online</td>
</tr>
<tr>
<th scope="row">Daniel</th>
<td>@danik</td>
<td>+1 334 328 975</td>
<td><a href="https://www.yahoo.com">www.yahoo.com</a></td>
<td>18</td>
<td>developer</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Kate</th>
<td>@kateUA</td>
<td>+1 888 777 888</td>
<td><a href="https://www.twitter.com">www.twitter.com</a></td>
<td>18</td>
<td>developer</td>
<td>HR</td>
</tr>
</tbody>
</table>
<table class="example-table-5">
<caption>Table caption</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Username</th>
<th scope="col">Phone</th>
<th scope="col">Site</th>
<th scope="col">Age</th>
<th scope="col">Job</th>
<th scope="col">Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Username</th>
<th>Phone</th>
<th>Site</th>
<th>Age</th>
<th>Job</th>
<th>Status</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Mark</th>
<td>@mdo</td>
<td>+1 123 456 432</td>
<td><a href="https://www.google.com">www.google.com</a></td>
<td>23</td>
<td>qa</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Alex</th>
<td>@alex</td>
<td>+1 333 222 111</td>
<td><a href="http://magento.com/">magento.com</a></td>
<td>32</td>
<td>manager</td>
<td>online</td>
</tr>
<tr>
<th scope="row">Daniel</th>
<td>@danik</td>
<td>+1 334 328 975</td>
<td><a href="https://www.yahoo.com">www.yahoo.com</a></td>
<td>18</td>
<td>developer</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Kate</th>
<td>@kateUA</td>
<td>+1 888 777 888</td>
<td><a href="https://www.twitter.com">www.twitter.com</a></td>
<td>18</td>
<td>developer</td>
<td>HR</td>
</tr>
</tbody>
</table>
<table class="example-table-6">
<caption>Table caption</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Username</th>
<th scope="col">Phone</th>
<th scope="col">Site</th>
<th scope="col">Age</th>
<th scope="col">Job</th>
<th scope="col">Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Username</th>
<th>Phone</th>
<th>Site</th>
<th>Age</th>
<th>Job</th>
<th>Status</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Mark</th>
<td>@mdo</td>
<td>+1 123 456 432</td>
<td><a href="https://www.google.com">www.google.com</a></td>
<td>23</td>
<td>qa</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Alex</th>
<td>@alex</td>
<td>+1 333 222 111</td>
<td><a href="http://magento.com/">magento.com</a></td>
<td>32</td>
<td>manager</td>
<td>online</td>
</tr>
<tr>
<th scope="row">Daniel</th>
<td>@danik</td>
<td>+1 334 328 975</td>
<td><a href="https://www.yahoo.com">www.yahoo.com</a></td>
<td>18</td>
<td>developer</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Kate</th>
<td>@kateUA</td>
<td>+1 888 777 888</td>
<td><a href="https://www.twitter.com">www.twitter.com</a></td>
<td>18</td>
<td>developer</td>
<td>HR</td>
</tr>
</tbody>
</table>
<table class="example-table-7">
<caption>Table caption</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Username</th>
<th scope="col">Phone</th>
<th scope="col">Site</th>
<th scope="col">Age</th>
<th scope="col">Job</th>
<th scope="col">Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Username</th>
<th>Phone</th>
<th>Site</th>
<th>Age</th>
<th>Job</th>
<th>Status</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Mark</th>
<td>@mdo</td>
<td>+1 123 456 432</td>
<td><a href="https://www.google.com">www.google.com</a></td>
<td>23</td>
<td>qa</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Alex</th>
<td>@alex</td>
<td>+1 333 222 111</td>
<td><a href="http://magento.com/">magento.com</a></td>
<td>32</td>
<td>manager</td>
<td>online</td>
</tr>
<tr>
<th scope="row">Daniel</th>
<td>@danik</td>
<td>+1 334 328 975</td>
<td><a href="https://www.yahoo.com">www.yahoo.com</a></td>
<td>18</td>
<td>developer</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Kate</th>
<td>@kateUA</td>
<td>+1 888 777 888</td>
<td><a href="https://www.twitter.com">www.twitter.com</a></td>
<td>18</td>
<td>developer</td>
<td>HR</td>
</tr>
</tbody>
</table>
<table class="example-table-8">
<caption>Table caption</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Username</th>
<th scope="col">Phone</th>
<th scope="col">Site</th>
<th scope="col">Age</th>
<th scope="col">Job</th>
<th scope="col">Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Username</th>
<th>Phone</th>
<th>Site</th>
<th>Age</th>
<th>Job</th>
<th>Status</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Mark</th>
<td>@mdo</td>
<td>+1 123 456 432</td>
<td><a href="https://www.google.com">www.google.com</a></td>
<td>23</td>
<td>qa</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Alex</th>
<td>@alex</td>
<td>+1 333 222 111</td>
<td><a href="http://magento.com/">magento.com</a></td>
<td>32</td>
<td>manager</td>
<td>online</td>
</tr>
<tr>
<th scope="row">Daniel</th>
<td>@danik</td>
<td>+1 334 328 975</td>
<td><a href="https://www.yahoo.com">www.yahoo.com</a></td>
<td>18</td>
<td>developer</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Kate</th>
<td>@kateUA</td>
<td>+1 888 777 888</td>
<td><a href="https://www.twitter.com">www.twitter.com</a></td>
<td>18</td>
<td>developer</td>
<td>HR</td>
</tr>
</tbody>
</table>
<table class="example-table-9">
<caption>Table caption</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Username</th>
<th scope="col">Phone</th>
<th scope="col">Site</th>
<th scope="col">Age</th>
<th scope="col">Job</th>
<th scope="col">Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Username</th>
<th>Phone</th>
<th>Site</th>
<th>Age</th>
<th>Job</th>
<th>Status</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Mark</th>
<td>@mdo</td>
<td>+1 123 456 432</td>
<td><a href="https://www.google.com">www.google.com</a></td>
<td>23</td>
<td>qa</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Alex</th>
<td>@alex</td>
<td>+1 333 222 111</td>
<td><a href="http://magento.com/">magento.com</a></td>
<td>32</td>
<td>manager</td>
<td>online</td>
</tr>
<tr>
<th scope="row">Daniel</th>
<td>@danik</td>
<td>+1 334 328 975</td>
<td><a href="https://www.yahoo.com">www.yahoo.com</a></td>
<td>18</td>
<td>developer</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Kate</th>
<td>@kateUA</td>
<td>+1 888 777 888</td>
<td><a href="https://www.twitter.com">www.twitter.com</a></td>
<td>18</td>
<td>developer</td>
<td>HR</td>
</tr>
</tbody>
</table>
<table class="example-table-10">
<caption>Table caption</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Username</th>
<th scope="col">Phone</th>
<th scope="col">Site</th>
<th scope="col">Age</th>
<th scope="col">Job</th>
<th scope="col">Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Username</th>
<th>Phone</th>
<th>Site</th>
<th>Age</th>
<th>Job</th>
<th>Status</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Mark</th>
<td>@mdo</td>
<td>+1 123 456 432</td>
<td><a href="https://www.google.com">www.google.com</a></td>
<td>23</td>
<td>qa</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Alex</th>
<td>@alex</td>
<td>+1 333 222 111</td>
<td><a href="http://magento.com/">magento.com</a></td>
<td>32</td>
<td>manager</td>
<td>online</td>
</tr>
<tr>
<th scope="row">Daniel</th>
<td>@danik</td>
<td>+1 334 328 975</td>
<td><a href="https://www.yahoo.com">www.yahoo.com</a></td>
<td>18</td>
<td>developer</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Kate</th>
<td>@kateUA</td>
<td>+1 888 777 888</td>
<td><a href="https://www.twitter.com">www.twitter.com</a></td>
<td>18</td>
<td>developer</td>
<td>HR</td>
</tr>
</tbody>
</table>
<table class="example-table-11">
<caption>Table caption</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Username</th>
<th scope="col">Phone</th>
<th scope="col">Site</th>
<th scope="col">Age</th>
<th scope="col">Job</th>
<th scope="col">Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Username</th>
<th>Phone</th>
<th>Site</th>
<th>Age</th>
<th>Job</th>
<th>Status</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Mark</th>
<td>@mdo</td>
<td>+1 123 456 432</td>
<td><a href="https://www.google.com">www.google.com</a></td>
<td>23</td>
<td>qa</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Alex</th>
<td>@alex</td>
<td>+1 333 222 111</td>
<td><a href="http://magento.com/">magento.com</a></td>
<td>32</td>
<td>manager</td>
<td>online</td>
</tr>
<tr>
<th scope="row">Daniel</th>
<td>@danik</td>
<td>+1 334 328 975</td>
<td><a href="https://www.yahoo.com">www.yahoo.com</a></td>
<td>18</td>
<td>developer</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Kate</th>
<td>@kateUA</td>
<td>+1 888 777 888</td>
<td><a href="https://www.twitter.com">www.twitter.com</a></td>
<td>18</td>
<td>developer</td>
<td>HR</td>
</tr>
</tbody>
</table>
<table class="example-table-12">
<caption>Table caption</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Username</th>
<th scope="col">Phone</th>
<th scope="col">Site</th>
<th scope="col">Age</th>
<th scope="col">Job</th>
<th scope="col">Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Username</th>
<th>Phone</th>
<th>Site</th>
<th>Age</th>
<th>Job</th>
<th>Status</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Mark</th>
<td>@mdo</td>
<td>+1 123 456 432</td>
<td><a href="https://www.google.com">www.google.com</a></td>
<td>23</td>
<td>qa</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Alex</th>
<td>@alex</td>
<td>+1 333 222 111</td>
<td><a href="http://magento.com/">magento.com</a></td>
<td>32</td>
<td>manager</td>
<td>online</td>
</tr>
<tr>
<th scope="row">Daniel</th>
<td>@danik</td>
<td>+1 334 328 975</td>
<td><a href="https://www.yahoo.com">www.yahoo.com</a></td>
<td>18</td>
<td>developer</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Kate</th>
<td>@kateUA</td>
<td>+1 888 777 888</td>
<td><a href="https://www.twitter.com">www.twitter.com</a></td>
<td>18</td>
<td>developer</td>
<td>HR</td>
</tr>
</tbody>
</table>
<div class="example-table-14">
<table class="example-table-13">
<caption>Table caption</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Username</th>
<th scope="col">Phone</th>
<th scope="col">Site</th>
<th scope="col">Age</th>
<th scope="col">Job</th>
<th scope="col">Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Username</th>
<th>Phone</th>
<th>Site</th>
<th>Age</th>
<th>Job</th>
<th>Status</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Mark</th>
<td>@mdo</td>
<td>+1 123 456 432</td>
<td><a href="https://www.google.com">www.google.com</a></td>
<td>23</td>
<td>qa</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Alex</th>
<td>@alex</td>
<td>+1 333 222 111</td>
<td><a href="http://magento.com/">magento.com</a></td>
<td>32</td>
<td>manager</td>
<td>online</td>
</tr>
<tr>
<th scope="row">Daniel</th>
<td>@danik</td>
<td>+1 334 328 975</td>
<td><a href="https://www.yahoo.com">www.yahoo.com</a></td>
<td>18</td>
<td>developer</td>
<td>offline</td>
</tr>
<tr>
<th scope="row">Kate</th>
<td>@kateUA</td>
<td>+1 888 777 888</td>
<td><a href="https://www.twitter.com">www.twitter.com</a></td>
<td>18</td>
<td>developer</td>
<td>offline</td>
</tr>
</tbody>
</table>
</div>
<table class="example-table-15">
<caption>Table caption</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Username</th>
<th scope="col">Phone</th>
<th scope="col">Site</th>
<th scope="col">Age</th>
<th scope="col">Job</th>
<th scope="col">Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="6">Table summary</th>
<td data-th="Table summary">Table footer text</td>
</tr>
</tfoot>
<tbody>
<tr>
<th data-th="Name" scope="row">Mark</th>
<td data-th="Username">@mdo</td>
<td data-th="Phone">+1 123 456 432</td>
<td data-th="Site"><a href="https://www.google.com">www.google.com</a></td>
<td data-th="Age">23</td>
<td data-th="Job">qa</td>
<td data-th="Status">offline</td>
</tr>
<tr>
<th data-th="Name" scope="row">Alex</th>
<td data-th="Username">@alex</td>
<td data-th="Phone">+1 333 222 111</td>
<td data-th="Site"><a href="http://magento.com/">magento.com</a></td>
<td data-th="Age">32</td>
<td data-th="Job">manager</td>
<td data-th="Status">online</td>
</tr>
<tr>
<th data-th="Name" scope="row">Daniel</th>
<td data-th="Username">@danik</td>
<td data-th="Phone">+1 334 328 975</td>
<td data-th="Site"><a href="https://www.yahoo.com">www.yahoo.com</a></td>
<td data-th="Age">18</td>
<td data-th="Job">developer</td>
<td data-th="Status">offline</td>
</tr>
<tr>
<th data-th="Name" scope="row">Kate</th>
<td data-th="Username">@kateUA</td>
<td data-th="Phone">+1 888 777 888</td>
<td data-th="Site"><a href="https://www.twitter.com">www.twitter.com</a></td>
<td data-th="Age">18</td>
<td data-th="Job">HR</td>
<td data-th="Status">online</td>
</tr>
</tbody>
</table>