content logo

Bootstrap Tabs:

Navigation Tabs to Show Hidden Bootstrap Tables

There are many ways to use tables in your website to draw the users’ attentions. For example, you may use colours to make your pages look more intriguing. Assigning different colours to the tables present in your page can be a great way of doing that. You may colour whatever part of the table that you wish. It could be only the top row, the middle row, even the individual cells, or any other section you wish. This is actually a better way than adding colourful background as it uses far less bandwidth and does not rely on graphics as much. In other words, faster loading speed. Tables are really flexible. You can even cut images into pieces and assign each piece to one cell of the table creating a cool background for your table. Tables are really simple but can definitely be used to create complex layouts that will make your site stand out among your rivals.

With that said, appearance is important but it is not everything. Once you have done everything to make the best-looking table for your website, you can add one more step to make it a lot more functional. You can use a Bootstrap navigation bar tab to show or hide tables. These could be a simple HTML tab with table like the one we have in this post. It works the same way an ordinary tab would show content but instead it is a Bootstrap hidden table. You can have different types of Bootstrap tabs and tables and make your website truly unique.

#

Bootstrap Navigation Bar

#

Bootstrap Tabs and Tables

#

HTML Tabs with Table

#

Bootstrap Hidden Table

#

Show Hide Tables

<!-- This script got from frontendfreecode.com -->
<div class="container 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="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 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 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><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
.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;
}
.animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
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";
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
.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;
}
.animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
</style>

</head>
<body>
<div class="container 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="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 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 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><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
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";
}
</script>

</body>
</html>
Preview