Hasan Shol | BLC TELKOM KLATEN

HasanOnta adalah blog sederhana yang dibuat saat penulis melakukan prakerin di BLC TELKOM KLATEN. berisi tentang segala pengetahuan tentang IT khususnya hal tentang Rekayasa Perangkat Lunak

About us

LightBlog
Responsive Ads Here

Senin, 03 April 2017

BOOTSTRAP BELAJAR BOOTSTRAP Chapter 2 : Membuat Table dengan BOOTSTRAP

BELAJAR BOOTSTRAP Chapter 2 : Membuat Table dengan BOOTSTRAP

by on in



HASANONTA - Setelah sebelumnya kita mempelajari pengertian BOOTSTRAP kali ini kita akan memprakatekannya dengan membuat tabel dengan BOOTSTRAP. Tentunya karena menggunakan BOOTSTRAP tabel yang akan kita buat nanti adalah Responssive.Caranya sendiri cukup mudah karena kita hanya perlu memasukkan class-class yang ada di BOOTSTRAP. Ada beberapa class dalam BOOTSTRAP yang berguna untuk mendesign tabel, diantaranya :
  • .table
    Class ini berfungsi untuk mendefinisikan atau membuat tabel sederhana / standar
  • .table-strip
    Merupakan class tambahan untuk membuat tabel dengan Bootstrap. Berfungsi untuk membuat baris tabel yang bergaya belang - belang ( strip )
  • .table-bordered
    Berfungsi untuk membuat tabel yang memiliki garis dan ketebalan garisnya dapat kita atur dan merupakan class tambahan untuk membuat tabel
  • .table-hover
    Berfungsi untuk memberikan evek hover, yaitu ketika kursor kita arahkan pada tabel maka garis tabel akan mengeluarkan gaya tersendiri seperti bercahaya dan merupakan class tambahan untuk membuat tabel bootstrap
Dan untuk membuat pewarnaan pada row atau table data sobat dapat menggunakan class-class berikut ini yang dapat anda tambahkan pad tag <tr> untuk memberi wawrna pada table row, atau tambahkan pada tag <td> untuk memberikan warna pada table data

  •  .success
    class ini digunakan untuk memberi tanda sukses atau warna hijau pada table row atau table data
  • .danger
    class ini digunakan untuk memberi warna merah pada table row atau table data
  • .info
    class ini digunakan untuk memberi warna biru pada table row atau table data
  • .warning
    class ini digunakan untuk memberi warna kuning pada table row atau table data
Untuk lebih mudahnya kita akan membuat tabel dengan BOOTSTRAP. Contoh :

<!DOCTYPE html>
<html>
<head>
    <title>HasanOnta</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
    <h1>membuat Table Dengan Bootstrap | HasanOnta</h1>
    <table class="table">
        <thead>
            <tr>
                <th>No</th>
                <th>Chara</th>
                <th>Anime</th>                
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Kosaki Onodera</td>
                <td>Nisekoi</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Shiraishi Urara</td>
                <td>Yamada-kun and 7 witch</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Katou Megumi</td>
                <td>Saekano</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 Output :



MEMBUAT TABLE BORDER DENGAN BOOTSTRAP

 Untuk membuat table border atau table yang memiliki garis anda hanya perlu menambahkan class "table_bordered" bersamaan dengan class "table". Contohnya :



<!DOCTYPE html>
<html>
<head>
    <title>HasanOnta</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
    <h1>membuat Table Dengan Bootstrap | HasanOnta</h1>
    <table class="table tabel-bordered">
        <thead>
            <tr>
                <th>No</th>
                <th>Chara</th>
                <th>Anime</th>                
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Kosaki Onodera</td>
                <td>Nisekoi</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Shiraishi Urara</td>
                <td>Yamada-kun and 7 witch</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Katou Megumi</td>
                <td>Saekano</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 Output :


MEMBUAT TABLE STRIP DENGAN BOOTSTRAP

 Membuat table dengan warna belang - belang kita dapat meggunakan class " table-striped", Contoh :
<!DOCTYPE html>
<html>
<head>
    <title>HasanOnta</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
    <h1>membuat Table Dengan Bootstrap | HasanOnta</h1>
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>No</th>
                <th>Chara</th>
                <th>Anime</th>                
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Kosaki Onodera</td>
                <td>Nisekoi</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Shiraishi Urara</td>
                <td>Yamada-kun and 7 witch</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Katou Megumi</td>
                <td>Saekano</td>
            </tr>
        </tbody>
    </table>
</body>
</html>


Output :


MEMBUAT TABLE HOVER DENGAN BOOTSTRAP

 Seperti tutorial diatas untuk membuat table hover caranya sangat mudah, kita tinggal memanggil class " table-hover " pada tag pembuka " <table> ". Contoh :



<!DOCTYPE html>
<html>
<head>
    <title>HasanOnta</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
    <h1>membuat Table Dengan Bootstrap | HasanOnta</h1>
    <table class="table tabel-bordered">
        <thead>
            <tr>
                <th>No</th>
                <th>Chara</th>
                <th>Anime</th>                
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Kosaki Onodera</td>
                <td>Nisekoi</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Shiraishi Urara</td>
                <td>Yamada-kun and 7 witch</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Katou Megumi</td>
                <td>Saekano</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 Output :


MEMBUAT TABLE STRIP DENGAN BOOTSTRAP

Membuat table dengan warna belang - belang kita dapat meggunakan class " table-striped", Contoh :
<!DOCTYPE html>
<html>
<head>
    <title>HasanOnta</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
    <h1>membuat Table Dengan Bootstrap | HasanOnta</h1>
    <table class="table table-bordered table-striped table-hover">
        <thead>
            <tr>
                <th>No</th>
                <th>Chara</th>
                <th>Anime</th>                
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Kosaki Onodera</td>
                <td>Nisekoi</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Shiraishi Urara</td>
                <td>Yamada-kun and 7 witch</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Katou Megumi</td>
                <td>Saekano</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Output :



MENGGANTI WARNA TABLE DENGAN BOOTSTRAP

 Untuk mengganti warna table dengan Bootstrap adalah dengan memberikan class pada tag <td> atau <tr> untuk classnya sudah saya jelaskan diatas. Contoh :

<!DOCTYPE html>
<html>
<head>
    <title>HasanOnta</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
    <h1>membuat Table Dengan Bootstrap | HasanOnta</h1>
    <table class="table tabel-bordered">
        <thead>
            <tr>
                <th>No</th>
                <th>Chara</th>
                <th>Anime</th>                
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Kosaki Onodera</td>
                <td>Nisekoi</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Shiraishi Urara</td>
                <td>Yamada-kun and 7 witch</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Katou Megumi</td>
                <td>Saekano</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 Output :


MEMBUAT TABLE STRIP DENGAN BOOTSTRAP

Membuat table dengan warna belang - belang kita dapat meggunakan class " table-striped", Contoh :
<!DOCTYPE html>
<html>
<head>
    <title>HasanOnta</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
    <h1>membuat Table Dengan Bootstrap | HasanOnta</h1>
    <table class="table table-bordered table-striped table-hover">
        <thead>
            <tr class="warning">
                <th>No</th>
                <th>Chara</th>
                <th>Anime</th>                
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Kosaki Onodera</td>
                <td>Nisekoi</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Shiraishi Urara</td>
                <td>Yamada-kun and 7 witch</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Katou Megumi</td>
                <td>Saekano</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Output :



By di
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)