<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="container w3-animate-opacity">
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Servers')">Servers List</button>
<button class="tablinks" onclick="openCity(event, 'Fruits')">Fruits Price</button>
<button class="tablinks" onclick="openCity(event, 'Workers')">Workers List</button>
</div>
<div id="Servers" class="tabcontent">
<table class="w3-animate-opacity">
<tr>
<th>Servers List</th>
<th>Status</th>
<th>Time</th>
</tr>
<tr>
<td>Ubuntu Server 16.04.4</td>
<td class="actived"><a href="#">Available</a></td>
<td>1 year, 11 months, 23 hours, 59minutes, 59seconds</td>
</tr>
<tr>
<td>Virtual Machine Windows Server 2002</td>
<td class="actived"><a href="#">Available</a></td>
<td>2 year, 11 months, 23 hours, 59minutes, 59seconds</td>
</tr>
<tr>
<td>Windows 10 Spark server</td>
<td class="deactivated"><a href="#">Unavailable</a></td>
<td>0 year, 6 months, 2 hours, 9minutes, 40seconds</td>
</tr>
<tr>
<td>Windows XP Professional</td>
<td class="deactivated"><a href="#">Unavailable</a></td>
<td>0 year, 0 month, 0 hours, 0 minutes, 0 seconds</td>
</tr>
</table>
</div>
<div id="Fruits" class="tabcontent w3-animate-opacity">
<table>
<tr>
<th>Fruits</th>
<th>Ammount</th>
<th>Price</th>
</tr>
<tr>
<td>Orange</td>
<td>1 unit</td>
<td>U$ 0,10</td>
</tr>
<tr>
<td>Pineapple</td>
<td>1 unit</td>
<td>U$ 0,20</td>
</tr>
<tr>
<td>Strawberry</td>
<td>1 unit</td>
<td>U$ 0,40</td>
</tr>
<tr>
<td>Apple</td>
<td>2 units</td>
<td>U$ 0,40</td>
</tr>
</table>
</div>
<div id="Workers" class="tabcontent w3-animate-opacity">
<table>
<tr>
<th>Officers</th>
<th>Department</th>
<th>Date of birth</th>
<th>Status</th>
</tr>
<tr>
<td>Leandro Bizzinotto Ferreira</td>
<td>Web Designer</td>
<td>23/09/1994</td>
<td class="intraining">In training</td>
</tr>
<tr>
<td>Cristiano Bizzinotto Ferreira</td>
<td>Advertising</td>
<td>23/09/1994</td>
<td class="available">Available</td>
</tr>
<tr>
<td>Amanda Maria Bizzinotto Ferreira</td>
<td>Polyglot, Translator, Developer</td>
<td>17/07/1993</td>
<td class="vacation">Vacation</td>
</tr>
<tr>
<td>Luis Antonio Ferreira</td>
<td>Personal Manager</td>
<td>20/08/1966</td>
<td class="available">Available</td>
</tr>
<tr>
<td>Luis Antonio Ferreira</td>
<td>Personal Manager</td>
<td>20/08/1968</td>
<td class="available">Available</td>
</tr>
<tr>
<td>Rita Helena Bizzinotto Ferreira</td>
<td>Housewife</td>
<td>20/07/1962</td>
<td class="disable">Disable</td>
</tr>
</table>
</div>
</div>
.tab {overflow: hidden; border: 1px solid #ccc;
background-color: #f1f1f1;}
.tabcontent {display: none; padding: 6px 12px; border: 1px solid #ccc;
border-top: none;}
.tab button {background-color: inherit; float: left; border: none;
outline: none; cursor: pointer; padding: 14px 16px;
transition: 0.3s;}
.tab button:hover {background-color: #ddd;}
.tab .active {background-color: #ccc;}
.tabcontent {display: none; padding: 6px 12px;
border: 1px solid #ccc; border-top: none;}
table {font-family: arial, sans-serif; border-collapse: collapse;
width: 100%;}
td, th {border: 1px solid #dddddd; padding: 8px;
text-align: center;}
/*Change color to gray*/
tr:nth-child(even) {
background-color: #dddddd;}
.actived a{color:green}
.actived a:hover{ font-weight: bold}
.deactivated a{color:red}
.deactivated a:hover{ font-weight: bold}
.available {color:green; }
.disable{ color: red; font-weight: bold}
.intraining{color: blue; font-weight: bold}
.vacation{ font-weight: bold}
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace("active", "");}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";}
