nodes-ui

--- title: Table Colors layout: nested-component.html --- <h1 class="docs--page-header">Table Colors</h1> <h2 class="docs--section-header"> Contextual Colors </h2> <p class="docs--page-description"> Use the contextual classes on rows, or on individual cells. </p> <table class="table table-striped table-hover"> <thead> <tr> <td> First Name </td> <td> Last Name </td> <td> Username </td> <td> Email </td> <td> Role </td> <td> Birthday </td> <td> Status </td> <td> Last login </td> </tr> </thead> <tbody> <tr> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> <td class="shaded"> 21/05/1980 </td> <td class="shaded"> Active </td> <td class="shaded"> 19/11/2014 </td> </tr> <tr> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> <td class="shaded"> 21/05/1980 </td> <td class="shaded"> Active </td> <td class="shaded"> 19/11/2014 </td> </tr> <tr> <td class="info"> John </td> <td class="info"> Doe </td> <td class="info"> jd </td> <td class="info"> john.doe@company.com </td> <td class="info"> Administrator </td> <td class="info shaded"> 21/05/1980 </td> <td class="info shaded"> Active </td> <td class="info shaded"> 19/11/2014 </td> </tr> <tr class="info"> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> <td class="info shaded"> 21/05/1980 </td> <td class="info shaded"> Active </td> <td class="info shaded"> 19/11/2014 </td> </tr> <tr class="success"> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> <td class="success shaded"> 21/05/1980 </td> <td class="success shaded"> Active </td> <td class="success shaded"> 19/11/2014 </td> </tr> <tr class="success"> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> <td class="success shaded"> 21/05/1980 </td> <td class="success shaded"> Active </td> <td class="success shaded"> 19/11/2014 </td> </tr> <tr class="warning"> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> <td class="warning shaded"> 21/05/1980 </td> <td class="warning shaded"> Active </td> <td class="warning shaded"> 19/11/2014 </td> </tr> <tr class="warning"> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> <td class="warning shaded"> 21/05/1980 </td> <td class="warning shaded"> Active </td> <td class="warning shaded"> 19/11/2014 </td> </tr> <tr class="danger"> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> <td class="danger shaded"> 21/05/1980 </td> <td class="danger shaded"> Active </td> <td class="danger shaded"> 19/11/2014 </td> </tr> <tr class="danger"> <td> John </td> <td> Doe </td> <td> jd </td> <td> john.doe@company.com </td> <td> Administrator </td> <td class="danger shaded"> 21/05/1980 </td> <td class="danger shaded"> Active </td> <td class="danger shaded"> 19/11/2014 </td> </tr> <tr> <td class="info"> John </td> <td> Doe </td> <td class="success"> jd </td> <td> john.doe@company.com </td> <td class="warning"> Administrator </td> <td> 21/05/1980 </td> <td class="danger"> Active </td> <td> 19/11/2014 </td> </tr> <tr> <td class="info"> John </td> <td> Doe </td> <td class="success"> jd </td> <td> john.doe@company.com </td> <td class="warning"> Administrator </td> <td> 21/05/1980 </td> <td class="danger"> Active </td> <td> 19/11/2014 </td> </tr> </tbody> </table>