"Color Tabble Test"
Bootstrap 3.3.0 Snippet by Bikamek11

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> \<p>Best viewed <a href="http://bootsnipp.com/iframe/Qxgaj" target="_blank">full screen</a> <table class="TFtable"> <tr class="tabrow1"><td>Text</td><td>Text</td><td>Text</td></tr> <tr class="tabrow2"><td>Text</td><td>Text</td><td>Text</td></tr> <tr class="tabrow3"><td>Text</td><td>Text</td><td>Text</td></tr> <tr class="tabrow4"><td>Text</td><td>Text</td><td>Text</td></tr> <td colspan=13 align="center" valign="middle">SWEET G'S</td> <tr class="tabrow3"><td colspan=13 align="center" colspan=13>February</td></tr> <tr> <td align="center">Name</td> <td align="center">Position</td> <td align="center">Monday (2)</td> <td align="center">Tuesday (3)</td> <td align="center">Wednesday (4)</td> <td align="center">Thursday (5)</td> <td align="center">Friday (6)</td> <td align="center">Saturday (7)</td> <td align="center">Sunday (8)</td> <td align="center">Hours Worked</td> </tr> <tr> <td>Ralph</td> <td>Manager</td> <td align="center"></td align="center"> <td align="center">Noon to 8:00PM</td align="center"> <td align="center">Noon to 8:00PM</td align="center"> <td align="center">Noon to 8:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">Noon to 8:00PM</td align="center"> <td align="center"></td> <td>32</td> </tr> <tr> </tr> <td>Devin</td> <td>Owner</td> <td align="center">8:00Am to 4:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">8:00AM to 4:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">8:00AM to 4:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">8:00AM to 4:00PM</td> <td>32</td> </tr> <tr> <td>Megan</td> <td>Owner</td> <td align="center"></td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center"></td> <td>32</td> </tr> <tr> <td>Isabelle</td> <td>Head Cook</td> <td align="center"></td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center"></td> <td>40</td> </tr> <tr> <td>Laura</td> <td>Cook</td> <td align="center"></td align="center"> <td align="center">1:00PM to 7:00PM</td align="center"> <td align="center">1:00PM to 7:00PM</td align="center"> <td align="center">1:00PM to 7:00PM</td align="center"> <td align="center">1:00PM to 7:00PM</td align="center"> <td align="center">1:00PM to 7:00PM</td align="center"> <td align="center"></td> <td>30</td> </tr> <tr> <td>Nicole</td> <td>Cook</td> <td align="center">1:00PM to 7:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">1:00PM to 7:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">1:00PM to 7:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">1:00PM to 7:00PM</td> <td>24</td> </tr> <tr> <td>Tabetha</td> <td>Head Waitress</td> <td align="center">3:00PM 11:00PM</td align="center"> <td align="center">3:00PM 11:00PM</td align="center"> <td align="center">3:00PM 11:00PM</td align="center"> <td align="center">3:00PM 11:00PM</td align="center"> <td align="center">3:00PM 11:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">3:00PM 11:00PM</td> <td>48</td> </tr> <tr> <td>Roger</td> <td>Waiter</td> <td align="center">6:00AM 2:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">6:00AM 2:00PM</td align="center"> <td align="center"></td align="center"> <td align="center"></td align="center"> <td align="center"></td align="center"> <td align="center">6:00AM 2:00PM</td> <td>24</td> </tr> <tr> <td>Max</td> <td>Waiter</td> <td align="center"></td align="center"> <td align="center">3:00PM 11:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">3:00PM 11:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">3:00PM to 11:00PM</td align="center"> <td align="center"></td> <td>24</td> </tr> <tr> <td>Sunny</td> <td>Waitress</td> <td align="center"></td align="center"> <td align="center">2:00PM to 6:00PM</td align="center"> <td align="center">2:00PM to 6:00PM</td align="center"> <td align="center">2:00PM to 6:00PM</td align="center"> <td align="center">2:00PM to 6:00PM</td align="center"> <td align="center">2:00PM to 6:00PM</td align="center"> <td align="center"></td> <td>24</td> </tr> </table> <hr><br> </table> <table class="TFtable"> <td colspan=13 align="center" valign="middle">SWEET G'S</td> <tr class="tabrow3"><td colspan=13 align="center" colspan=13>February</td></tr> <tr> <td align="center">Name</td> <td align="center">Position</td> <td align="center">Monday (9)</td> <td align="center">Tuesday (10)</td> <td align="center">Wednesday (11)</td> <td align="center">Thursday (12)</td> <td align="center">Friday (13)</td> <td align="center">Saturday (14)</td> <td align="center">Sunday (15)</td> <td align="center">Hours Worked</td> </tr> <tr> <td>Ralph</td> <td>Manager</td> <td align="center"></td align="center"> <td align="center">Noon to 8:00PM</td align="center"> <td align="center">Noon to 8:00PM</td align="center"> <td align="center">Noon to 8:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">Noon to 8:00PM</td align="center"> <td align="center"></td> <td>32</td> </tr> <tr> </tr> <td>Devin</td> <td>Owner</td> <td align="center">8:00Am to 4:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">8:00AM to 4:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">8:00AM to 4:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">8:00AM to 4:00PM</td> <td>32</td> </tr> <tr> <td>Megan</td> <td>Owner</td> <td align="center"></td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center"></td> <td>32</td> </tr> <tr> <td>Isabelle</td> <td>Head Cook</td> <td align="center"></td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center"></td> <td>40</td> </tr> <tr> <td>Laura</td> <td>Cook</td> <td align="center"></td align="center"> <td align="center">1:00PM to 7:00PM</td align="center"> <td align="center">1:00PM to 7:00PM</td align="center"> <td align="center">1:00PM to 7:00PM</td align="center"> <td align="center">1:00PM to 7:00PM</td align="center"> <td align="center">1:00PM to 7:00PM</td align="center"> <td align="center"></td> <td>30</td> </tr> <tr> <td>Nicole</td> <td>Cook</td> <td align="center">1:00PM to 7:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">1:00PM to 7:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">1:00PM to 7:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">1:00PM to 7:00PM</td> <td>24</td> </tr> <tr> <td>Tabetha</td> <td>Head Waitress</td> <td align="center">3:00PM 11:00PM</td align="center"> <td align="center">3:00PM 11:00PM</td align="center"> <td align="center">3:00PM 11:00PM</td align="center"> <td align="center">3:00PM 11:00PM</td align="center"> <td align="center">3:00PM 11:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">3:00PM 11:00PM</td> <td>48</td> </tr> <tr> <td>Roger</td> <td>Waiter</td> <td align="center">6:00AM 2:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">6:00AM 2:00PM</td align="center"> <td align="center"></td align="center"> <td align="center"></td align="center"> <td align="center"></td align="center"> <td align="center">6:00AM 2:00PM</td> <td>24</td> </tr> <tr> <td>Max</td> <td>Waiter</td> <td align="center"></td align="center"> <td align="center">3:00PM 11:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">3:00PM 11:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">3:00PM to 11:00PM</td align="center"> <td align="center"></td> <td>24</td> </tr> <tr> <td>Sunny</td> <td>Waitress</td> <td align="center"></td align="center"> <td align="center">2:00PM to 6:00PM</td align="center"> <td align="center">2:00PM to 6:00PM</td align="center"> <td align="center">2:00PM to 6:00PM</td align="center"> <td align="center">2:00PM to 6:00PM</td align="center"> <td align="center">2:00PM to 6:00PM</td align="center"> <td align="center"></td> <td>24</td> </tr> </table> <hr><br> </table> <table class="TFtable"> <td colspan=13 align="center" valign="middle">SWEET G'S</td> <tr class="tabrow3"><td colspan=13 align="center" colspan=13>February</td></tr> <tr> <td align="center">Name</td> <td align="center">Position</td> <td align="center">Monday (16)</td> <td align="center">Tuesday (17)</td> <td align="center">Wednesday (18)</td> <td align="center">Thursday (19)</td> <td align="center">Friday (20)</td> <td align="center">Saturday (21)</td> <td align="center">Sunday (22)</td> <td align="center">Hours Worked</td> </tr> <tr> <td>Ralph</td> <td>Manager</td> <td align="center"></td align="center"> <td align="center">Noon to 8:00PM</td align="center"> <td align="center">Noon to 8:00PM</td align="center"> <td align="center">Noon to 8:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">Noon to 8:00PM</td align="center"> <td align="center"></td> <td>32</td> </tr> <tr> </tr> <td>Devin</td> <td>Owner</td> <td align="center">8:00Am to 4:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">8:00AM to 4:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">8:00AM to 4:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">8:00AM to 4:00PM</td> <td>32</td> </tr> <tr> <td>Megan</td> <td>Owner</td> <td align="center"></td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center"></td> <td>32</td> </tr> <tr> <td>Isabelle</td> <td>Head Cook</td> <td align="center"></td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center">10:00Am to 6:00PM</td align="center"> <td align="center"></td> <td>40</td> </tr> <tr> <td>Laura</td> <td>Cook</td> <td align="center"></td align="center"> <td align="center">1:00PM to 7:00PM</td align="center"> <td align="center">1:00PM to 7:00PM</td align="center"> <td align="center">1:00PM to 7:00PM</td align="center"> <td align="center">1:00PM to 7:00PM</td align="center"> <td align="center">1:00PM to 7:00PM</td align="center"> <td align="center"></td> <td>30</td> </tr> <tr> <td>Nicole</td> <td>Cook</td> <td align="center">1:00PM to 7:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">1:00PM to 7:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">1:00PM to 7:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">1:00PM to 7:00PM</td> <td>24</td> </tr> <tr> <td>Tabetha</td> <td>Head Waitress</td> <td align="center">3:00PM 11:00PM</td align="center"> <td align="center">3:00PM 11:00PM</td align="center"> <td align="center">3:00PM 11:00PM</td align="center"> <td align="center">3:00PM 11:00PM</td align="center"> <td align="center">3:00PM 11:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">3:00PM 11:00PM</td> <td>48</td> </tr> <tr> <td>Roger</td> <td>Waiter</td> <td align="center">6:00AM 2:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">6:00AM 2:00PM</td align="center"> <td align="center"></td align="center"> <td align="center"></td align="center"> <td align="center"></td align="center"> <td align="center">6:00AM 2:00PM</td> <td>24</td> </tr> <tr> <td>Max</td> <td>Waiter</td> <td align="center"></td align="center"> <td align="center">3:00PM 11:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">3:00PM 11:00PM</td align="center"> <td align="center"></td align="center"> <td align="center">3:00PM to 11:00PM</td align="center"> <td align="center"></td> <td>24</td> </tr> <tr> <td>Sunny</td> <td>Waitress</td> <td align="center"></td align="center"> <td align="center">2:00PM to 6:00PM</td align="center"> <td align="center">2:00PM to 6:00PM</td align="center"> <td align="center">2:00PM to 6:00PM</td align="center"> <td align="center">2:00PM to 6:00PM</td align="center"> <td align="center">2:00PM to 6:00PM</td align="center"> <td align="center"></td> <td>24</td> </tr> </table> <hr><br> </table>
.TFtable{ width:100%; border-collapse:collapse; } .tabrow1{ background: yellow; } .tabrow2{ background: blue; } .tabrow3{ background: red; } .tabrow4{ background: green; }

Related: See More


Questions / Comments: