Bootstrap 4 Tables Tutorial | Part 2

Hello everyone, today I want to continue posting Bootstrap 4 Tables Tutorial Part 1, In Bootstrap 4 Tables Tutorial Part 2 I will create a tutorial how to create Contextualtable Table, Head Options Table and Condensed Table using bootstrap, before starting the tutorial create table using bootstrap I will explain what a bootstrap might be familiar to web developers. Bootstrap is a framework (tool) HTML, CSS and Javascript that will facilitate in creating an elegant and responsive website appearance.

In Bootstrap 4 Tables Tutorial Part 1 I have created a simple table, striped table and bordered table. In this post I will explain how to create a table Contextualtable, Head Options and Condensed table using bootstrap, to create a table using the bootstrap framework that needs to be prepared is:

Xampp (Download)
Web Browser ( Mozilla or Google Chrome)
Editor (Sublime Text or Notepate ++)
Boostrap (Download)

Creat Table Bootstrap Step by Step:

Install the xampp app, web browser and text editor you have downloaded.
Create a new folder in the htdocs folder with the name bootstrap_tutorial (name folder can you replace).
Extract the bootstrap file you have downloaded into the folder bootstrap_tutorial.
Open the Text editor, then type the code below and save it in the folder where you saved the bootstrap file.

Contextualtable Table Layout Coding:

 <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Bootstrap Table | @ryal</title>
        <link rel="stylesheet" href="">
        <link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.min.css">
        <script src="bootstrap/js/jquery.js" type="text/javascript"></script>
        <script src="bootstrap/dist/js/bootstrap.js" type="text/javascript"></script>
        <script src="bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="container">
            <caption><h1>Contextualtable Table Layout | @ryal</h1></caption>
            <table class="table">
                <thead>
                    <tr>
                        <th>Nama</th>
                        <th>Jenis Kelamin</th>
                        <th>Alamat</th>
                        <th>Hobi</th>
                        <th>No HP</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="table-active">
                        <td>Ryal</td>
                        <td>Laki-laki</td>
                        <td>Lhokseumawe</td>
                        <td>Sepak Bola</td>
                        <td>08126048XXXX</td>
                    </tr>
                    <tr class="table-warning">
                        <td>Muchsin</td>
                        <td>Laki-laki</td>
                        <td>Lhokseumawe</td>
                        <td>Bulu Tangkis</td>
                        <td>08127011XXXX</td>
                    </tr>
                    <tr class="table-danger">
                        <td>Idris</td>
                        <td>Laki-laki</td>
                        <td>Uteungkot</td>
                        <td>Fotography</td>
                        <td>08134076XXXX</td>
                    </tr>
                    <tr class="table-info">
                        <td>Herry</td>
                        <td>Laki-laki</td>
                        <td>Banda</td>
                        <td>Menulis</td>
                        <td>08137070XXXX</td>
                    </tr>
                    <tr class="table-success">
                        <td>Yeni</td>
                        <td>Perempuan</td>
                        <td>Bireun</td>
                        <td>Photography</td>
                        <td>0811707XXXX</td>
                    </tr>
                </tbody>
            </table>      
        </div>
    </body>
    </html>

Head Options Table Layout Coding:

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Bootstrap Table | @ryal</title>
        <link rel="stylesheet" href="">
        <link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.css">
        <script src="bootstrap/js/jquery.js" type="text/javascript"></script>
        <script src="bootstrap/dist/js/bootstrap.js" type="text/javascript"></script>
        <script src="bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="container">
            <caption><h1>Head  Options Table Layout | @ryal</h1></caption>
            <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr class="thead-inverse">
                        <th>Nama</th>
                        <th>Jenis Kelamin</th>
                        <th>Alamat</th>
                        <th>Hobi</th>
                        <th>No HP</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Ryal</td>
                        <td>Laki-laki</td>
                        <td>Lhokseumawe</td>
                        <td>Sepak Bola</td>
                        <td>08126048XXXX</td>
                    </tr>
                    <tr>
                        <td>Muchsin</td>
                        <td>Laki-laki</td>
                        <td>Lhokseumawe</td>
                        <td>Bulu Tangkis</td>
                        <td>08127011XXXX</td>
                    </tr>
                    <tr>
                        <td>Idris</td>
                        <td>Laki-laki</td>
                        <td>Uteungkot</td>
                        <td>Fotography</td>
                        <td>08134076XXXX</td>
                    </tr>
                    <tr>
                        <td>Herry</td>
                        <td>Laki-laki</td>
                        <td>Banda</td>
                        <td>Menulis</td>
                        <td>08137070XXXX</td>
                    </tr>
                    <tr>
                        <td>Yeni</td>
                        <td>Perempuan</td>
                        <td>Bireun</td>
                        <td>Photography</td>
                        <td>0811707XXXX</td>
                    </tr>
                </tbody>
            </table>      
        </div>
        </div>
    </body>
    </html>

Condensed Table Layout Coding:

 <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Bootstrap Table | @ryal</title>
        <link rel="stylesheet" href="">
        <link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.css">
        <script src="bootstrap/js/jquery.js" type="text/javascript"></script>
        <script src="bootstrap/dist/js/bootstrap.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="container">
            <caption><h1>Condensed Table Layout | @ryal</h1></caption>
            <table class="table table-condensed">
                <thead>
                    <tr>
                        <th>Nama</th>
                        <th>Jenis Kelamin</th>
                        <th>Alamat</th>
                        <th>Hobi</th>
                        <th>No HP</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Ryal</td>
                        <td>Laki-laki</td>
                        <td>Lhokseumawe</td>
                        <td>Sepak Bola</td>
                        <td>08126048XXXX</td>
                    </tr>
                    <tr>
                        <td>Muchsin</td>
                        <td>Laki-laki</td>
                        <td>Lhokseumawe</td>
                        <td>Bulu Tangkis</td>
                        <td>08127011XXXX</td>
                    </tr>
                    <tr>
                        <td>Idris</td>
                        <td>Laki-laki</td>
                        <td>Uteungkot</td>
                        <td>Fotography</td>
                        <td>08134076XXXX</td>
                    </tr>
                    <tr>
                        <td>Herry</td>
                        <td>Laki-laki</td>
                        <td>Banda</td>
                        <td>Menulis</td>
                        <td>08137070XXXX</td>
                    </tr>
                    <tr>
                        <td>Yeni</td>
                        <td>Perempuan</td>
                        <td>Bireun</td>
                        <td>Photography</td>
                        <td>0811707XXXX</td>
                    </tr>
                </tbody>
            </table>      
        </div>
    </body>
    </html>

Run Apache and MySql Services on xampp.
To see the results of the program you created by accessing http: //localhost/bootstrap_tutorial/table.php (EX: http: //localhost/bootstrap_tutorial/table.php).

Output Program:

Tutorial by: @ryal

Bootstrap 4 Tables Tutorial | Part 2 | Ecency