<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 ----------> <div class="container"> <div class="row"> <table width="80%" align="center" > <div id="head_nav"> <tr> <th>Hora</th> <th>Segunda</th> <th>Terça</th> <th>Quarta</th> <th>Thrusday</th> <th>Friday</th> <th>Saturday</th> </tr> </div> <tr> <th>10:00 - 11:00</th> <td>Physics-1</td> <td>English</td> <td title="No Class" class="Holiday"></td> <td>Chemestry-1</td> <td>Alzebra</td> <td>Physical</td> </div> </tr> <tr> <th>11:00 - 12:00</td> <td>Math-2</td> <td>Chemestry-2</td> <td>Physics-1</td> <td>Hindi</td> <td>English</td> <td>Soft Skill</td> </div> </tr> <tr> <th>12:00 - 01:00</td> <td>Hindi</td> <td>English</td> <td>Math-1</td> <td>Chemistry</td> <td>Physics</td> <td>Chem.Lab</td> </div> </tr> <tr> <th>01:00 - 02:00</td> <td>Cumm. Skill</td> <td>Sports</td> <td>English</td> <td>Computer Lab</td> <td>Header</td> <td>Header</td> </div> </tr> <tr> <th>02:00 - 03:00</td> <td>Header</td> <td>Header</td> <td>Header</td> <td>Header</td> <td>Header</td> <td>Header</td> </div> </tr> </table> </div> </div>

body { font-family: arial; } th,td { margin: 0; text-align: center; border-collapse: collapse; outline: 1px solid #e3e3e3; } td { padding: 5px 10px; } th { background: #666; color: white; padding: 5px 10px; } td:hover { cursor: pointer; background: #666; color: white; } </style>