metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="The HTML table model allows authors to arrange data: text, preformatted text, images, links, forms, form fields, other tables, etc. into rows and columns of cells."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Tables - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Tables</a></li> <li class="toc-entry"><a href="#_class_table">Create table</a></li> <li class="toc-entry"><a href="#_sortable_columns">Sortable columns</a></li> <li class="toc-entry"><a href="#_table_striped">Striped rows</a></li> <li class="toc-entry"><a href="#_table_hovered">Hoverable rows</a></li> <li class="toc-entry"><a href="#_tables_bordered">Bordered table</a></li> <li class="toc-entry"><a href="#_compact_table">Compact table</a></li> <li class="toc-entry"><a href="#_colored_table">Colored table</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Tables</h1> <p class="text-leader"> The HTML table model allows authors to arrange data: text, preformatted text, images, links, forms, form fields, other tables, etc. into rows and columns of cells. With Metro 4 you can create an original tables simple and easy. </p>  <h3 id="_class_table">Create table</h3> <p> Just add the base class <code>.table</code> to any <code><table></code>, then extend with custom styles or our various included modifier classes. All table styles are inherited in Metro 4, meaning any nested tables will be styled in the same manner as the parent. </p> <div class="example"> <table class="table"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Bill</td> <td>Gates</td> <td>@billy</td> </tr> <tr> <td>2</td> <td>Steve</td> <td>Jobs</td> <td>@stevy</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>Page</td> <td>@larry</td> </tr> </tbody> </table> </div> <pre class=""><code> <table class="table"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Bill</td> <td>Gates</td> <td>@billy</td> </tr> <tr> <td>2</td> <td>Steve</td> <td>Jobs</td> <td>@stevy</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>Page</td> <td>@larry</td> </tr> </tbody> </table> </code></pre> <h3 id="_sortable_columns">Sortable columns</h3> <p> You can mark column as sortable. To create sortable column add class <span class="tally">.sortable-column</span> to head cell and mark column with need sortable direction class <span class="tally">.sort-asc</span> or <span class="tally">.sort-desc</span>. </p> <div class="example"> <table class="table"> <thead> <tr> <th class="sortable-column">#</th> <th class="sortable-column">First Name</th> <th class="sortable-column sort-asc">Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Bill</td> <td>Gates</td> <td>@billy</td> </tr> <tr> <td>2</td> <td>Steve</td> <td>Jobs</td> <td>@stevy</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>Page</td> <td>@larry</td> </tr> </tbody> </table> </div> <pre class=""><code> <table class="table"> <thead> <tr> <th>#</th> <th>First Name</th> <th class="sortable-column sort-asc">Last Name</th> <th>Username</th> </tr> </thead> <tbody> ... </tbody> </table> </code></pre> <p> If you need to place sortable marker on the left, add class <span class="tally">.sortable-markers-on-left</span> to table. </p> <h3 id="_table_striped">Striped rows</h3> <p> Use class <span class="tally">.striped</span> to add zebra-striping to any table row within the <span class="tally"><tbody></span>. </p> <div class="example"> <table class="table striped"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Bill</td> <td>Gates</td> <td>@billy</td> </tr> <tr> <td>2</td> <td>Steve</td> <td>Jobs</td> <td>@stevy</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>Page</td> <td>@larry</td> </tr> </tbody> </table> </div> <pre class=""><code> <table class="table striped"> ... </table> </code></pre>  <h3 id="_table_hovered">Hoverable rows</h3> <p> Use class <span class="tally">.row-hover</span> and <span class="tally">.cell-hover</span> to to enable a hover state on table rows within a <span class="tally"><tbody></span>. </p> <div class="example"> <h6>.row-hover</h6> <table class="table row-hover row-border"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Bill</td> <td>Gates</td> <td>@billy</td> </tr> <tr> <td>2</td> <td>Steve</td> <td>Jobs</td> <td>@stevy</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>Page</td> <td>@larry</td> </tr> </tbody> </table> <br/> <h6>.cell-hover</h6> <table class="table cell-hover row-border"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Bill</td> <td>Gates</td> <td>@billy</td> </tr> <tr> <td>2</td> <td>Steve</td> <td>Jobs</td> <td>@stevy</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>Page</td> <td>@larry</td> </tr> </tbody> </table> </div> <pre class=""><code> <table class="table striped"> ... </table> </code></pre> <h3 id="_tables_bordered">Bordered table</h3> <p> To create border for table, row or cell use subclasses: <span class="tally">.table-border</span>, <span class="tally">.row-border</span>, <span class="tally">.cell-border</span>. You can combine classes to achieve the desired effect. </p> <div class="example"> <h6>.table-border</h6> <table class="table table-border"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Bill</td> <td>Gates</td> <td>@billy</td> </tr> <tr> <td>2</td> <td>Steve</td> <td>Jobs</td> <td>@stevy</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>Page</td> <td>@larry</td> </tr> </tbody> </table> <br/> <h6>.row-border</h6> <table class="table row-border"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Bill</td> <td>Gates</td> <td>@billy</td> </tr> <tr> <td>2</td> <td>Steve</td> <td>Jobs</td> <td>@stevy</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>Page</td> <td>@larry</td> </tr> </tbody> </table> <br/> <h6>.cell-border</h6> <table class="table cell-border"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Bill</td> <td>Gates</td> <td>@billy</td> </tr> <tr> <td>2</td> <td>Steve</td> <td>Jobs</td> <td>@stevy</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>Page</td> <td>@larry</td> </tr> </tbody> </table> </div> <pre class=""><code> <table class="table table-border cell-border"> ... </table> </code></pre> <h3 id="_compact_table">Compact table</h3> <p> Add <span class="tally">.compact</span> to make tables more compact by cutting cell padding in half. </p> <div class="example"> <table class="table table-border cell-border compact"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Bill</td> <td>Gates</td> <td>@billy</td> </tr> <tr> <td>2</td> <td>Steve</td> <td>Jobs</td> <td>@stevy</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>Page</td> <td>@larry</td> </tr> </tbody> </table> </div> <pre class=""><code> <table class="table compact"> ... </table> </code></pre> <h3 id="_colored_table">Colored table</h3> <p> Use contextual classes to color table rows or individual cells. Available classes: <span class="tally">.primary</span>, <span class="tally">.secondary</span>, <span class="tally">.success</span>, <span class="tally">.waring</span>, <span class="tally">.yellow</span>, <span class="tally">.info</span>, <span class="tally">.alert</span>, <span class="tally">.dark</span>, <span class="tally">.light</span>. You can combine classes to achieve the desired effect. </p> <div class="example"> <table class="table table-border"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr class="info"> <td>1</td> <td>Bill</td> <td>Gates</td> <td>@billy</td> </tr> <tr class="success"> <td>2</td> <td>Steve</td> <td>Jobs</td> <td>@stevy</td> </tr> <tr class="warning"> <td>3</td> <td>Larry</td> <td>Page</td> <td>@larry</td> </tr> </tbody> </table> <table class="table table-border row-border"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td class="info">Bill</td> <td>Gates</td> <td>@billy</td> </tr> <tr class="yellow"> <td>2</td> <td>Steve</td> <td>Jobs</td> <td class="success">@stevy</td> </tr> <tr> <td>3</td> <td class="alert">Larry</td> <td>Page</td> <td>@larry</td> </tr> </tbody> </table> </div> <pre class=""><code> <table class="table table-border cell-border"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td class="info">Bill</td> <td>Gates</td> <td>@billy</td> </tr> <tr class="yellow"> <td>2</td> <td>Steve</td> <td>Jobs</td> <td class="success">@stevy</td> </tr> <tr> <td>3</td> <td class="alert">Larry</td> <td>Page</td> <td>@larry</td> </tr> </tbody> </table> </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>