vue-picocss

<!doctype html> <html lang="en"> <head> ${require('./_head.html') title="Tables" description="Default styles for tables without .classes" canonical="tables.html" } </head> <body> ${require('./_nav.html')} <main class="container" id="docs"> ${require('./_sidebar.html') active="tables-link"} <div role="document"> <section id="tables"> <hgroup> <h1>Tables</h1> <h2>Default styles for tables without <code>.classes</code></h2> </hgroup> <figure> <table> <thead> <tr> <th scope="col">#</th> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">2</th> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">3</th> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> </tbody> <tfoot> <tr> <th scope="row">#</th> <td>Total</td> <td>Total</td> <td>Total</td> <td>Total</td> <td>Total</td> </tr> </tfoot> </table> </figure> <pre><code><table> <thead> <tr> <th scope="col">#</th> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">1</th> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">1</th> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> </tbody> <tfoot> <tr> <th scope="col">#</th> <td scope="col">Total</td> <td scope="col">Total</td> <td scope="col">Total</td> <td scope="col">Total</td> <td scope="col">Total</td> </tr> </tfoot> </table></code></pre> <code>role="grid"</code> enable striped rows. <figure> <table role="grid"> <thead> <tr> <th scope="col">#</th> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> <th scope="col">Heading</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">2</th> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">3</th> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> </tbody> </table> </figure> <pre><code><table role="grid"> … </table></code></pre> </section> ${require('./_footer.html')} </div> </main> <script src="js/commons.min.js"></script> </body> </html>