Table
Table styles apply your Web Awesome theme to the HTML table content. Tables structure data in rows and columns, making it easy to look up information in a complex data set.
Column 1 | Column 2 | Column 3 | Column 4 |
---|---|---|---|
Cell | Cell | Cell | Cell |
Cell | Cell | Cell | Cell |
Cell | Cell | Cell | Cell |
Cell | Cell | Cell | Cell |
<table> <caption>I'm just a table</caption> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> </tr> </thead> <tbody> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> </tbody> </table>
Alternating Rows Jump to heading
You can use the wa-zebra-rows
class to add alternating row colors to your table:
Column 1 | Column 2 | Column 3 | Column 4 |
---|---|---|---|
Cell | Cell | Cell | Cell |
Cell | Cell | Cell | Cell |
Cell | Cell | Cell | Cell |
Cell | Cell | Cell | Cell |
<table class="wa-zebra-rows"> <caption>I'm just a table</caption> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> </tr> </thead> <tbody> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> </tbody> </table>
Variants Jump to heading
You can use color utility classes to apply different colors to your table:
Column 1 | Column 2 | Column 3 | Column 4 |
---|---|---|---|
Cell | Cell | Cell | Cell |
Cell | Cell | Cell | Cell |
Cell | Cell | Cell | Cell |
Cell | Cell | Cell | Cell |
<table class="wa-zebra-rows wa-brand"> <caption>I'm just a table</caption> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> </tr> </thead> <tbody> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> </tbody> </table>
Opting In to Native Table Styles Jump to heading
If you want to use the Native Table styles without including the entirety of Web Awesome Native Styles, you can include the following CSS files from the Web Awesome CDN.
Add the following code to the <head>
of your page:
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.12/dist/styles/native/tables.css" />
Add the following code at the top of your CSS file:
@import url('https://early.webawesome.com/webawesome@3.0.0-alpha.12/dist/styles/native/tables.css');
To use all of Web Awesome Native styles, follow the instructions on the Native Styles overview page.