designbytowo

Tabel Dalam HTML

Membuat tabel dengan Html. Sebelum memulai menerapkan class-class yang ada pada Bootstrap, ada baiknya terlebih dahulu kita harus memahami struktur html dalam pembuatan tabel, biasanya tag Html dalam pembuatan tabel dimulai dengan <table> kemudian akan diakhiri dengan tag </table>, lalu dalam pembuatan garis akan dimulai dengan tag <tr> lalu kemudian diakhiri dengan </tr>. lalu kemudian untuk tabel data yang letaknya berada dalam baris, setiap memulai sebuah sebuah tabel data akan diawali dengan tag <td> atau bisa juga dengan menggunakan tag <th>, kemudian diakhiri dengan tag </td>, untuk contohnya silahkan perhatikan kode dibawah ini:

<!DOCTYPE html>

<html>

  <head>

    <title>Membuat tabel dengan Bootstrap</title>

  </head>

  <body>

    <table border=”1″>

      <tr>

        <th>No.</th>

        <th>Nama Superhero</th>

        <th>Asal</th>

      </tr>

      <tr>

        <td>1.</td>

        <td>Superman</td>

        <td>Planet Crypton</td>

      </tr>

      <tr>

        <td>2.</td>

        <td>Batman</td>

        <td>Gotham City</td>

      </tr>

      <tr>

        <td>3.</td>

        <td>Robin</td>

        <td>Pinggiran Gotham City</td>

      </tr>

      <tr>

        <td>4.</td>

        <td>Iron Man</td>

        <td>New York</td>

      </tr>

      <tr>

        <td>5.</td>

        <td>Thor</td>

        <td>Asgard</td>

      </tr>

    </table>

  </body>

</html>

Pada Kode diatas, tag HTML yang berfungsi untuk membuat tabel dimulai dari <table border=”1″> sampai dengan </table>. Tabel disitu terdiri dari enam baris, yang mana baris pertama berada pada kode <tr> yang berada dibawah <table border=”1″>, hingga </tr>, dan pada baris yang pertama juga terdapat tiga tabel data namun dengan menggunakan tag <th> yang digunakan untuk judul tabel.

Baca Juga :

05. Menggunakan Cdn Dalam Bootstrap 4

06. Pengenalan System Grid Pada Bootstrap

Jangan lupa untuk menyimpan hsail kode diatas dengan format .html, dan buka dengan menggunakan browser, maka hasilnya akan terlihat seperti dibawah ini:

07. Belajar HTML dan Membuat Struktur Tabel Belajar Desain Bareng
Hasil tampilan

Class Bootstrap Mendesign Tabel

Jika mengikuti tampilan seperti diatas maka tentunya tampilan tabel akan tidak menarik dan terlihat kurang elegan, oleh karena itu disini akan digunakan class-class Bootstrap untuk mempercantik tampilan dari tabel tersebut. Dalam Bootstrap tersedia beberapa class yang bisa digunakan dalam tabel atau tag <table>, class-class tersebut adalah :

  • table

Class ini merupakan class default, jadi hasilnya akan sama saja dengan tabel biasanya, namun harus tetap digunakan jika menggunakan Bootstrap

  • table-stripped

Class tabel ini digunakan untuk menampilkan tabel dengan format “belang-belang” yang warna barisnya berbeda/strip

  • table-bordered

Class tabel ini digunakan dalam pembuatan garis, border/bingkai pada sebuah tabel.

  • table-hover

Class tabel ini digunakan untuk membuat tabel berubah warna pada setiap barisnya ketika kursor berada diatas baris.

Menggunakan Class Bootstrap Untuk Design Tabel

Penggunaan class untuk membuat tabel dengan Bootstrap adalah sebagai berikut :

<!DOCTYPE html>

<html>

  <head>

    <title>Membuat tabel dengan Bootstrap</title>

    <link href=”css/bootstrap.min.css” rel=”stylesheet” />

  </head>

  <body>

    <table class=”table table-bordered table-striped table-hover”>

      <tr>

        <th>No.</th>

        <th>Nama Superhero</th>

        <th>Asal</th>

      </tr>

      <tr>

        <td>1.</td>

        <td>Superman</td>

        <td>Planet Crypton</td>

      </tr>

      <tr>

        <td>2.</td>

        <td>Batman</td>

        <td>Gotham City</td>

      </tr>

      <tr>

        <td>3.</td>

        <td>Robin</td>

        <td>Pinggiran Gotham City</td>

      </tr>

      <tr>

        <td>4.</td>

        <td>Iron Man</td>

        <td>New York</td>

      </tr>

      <tr>

        <td>5.</td>

        <td>Thor</td>

        <td>Asgard</td>

      </tr>

    </table>

    <script src=”js/jQuery v3.2.0.js”></script>

    <script src=”js/bootstrap.min.js”></script>

  </body>

</html>

Maka hasilnya akan seperti gambar dibawah ini

07. Belajar HTML dan Membuat Struktur Tabel Belajar Desain Bareng

Mengatur Text Color

Adapun beberapa class Bootstrap yang dapat mengatur warna text adalah:

  • text-muted
  • text-succestext-primary
  • text-info
  • text-danger
  • text-warning
  • text-secondary
  • text-dark
  • text-white
  • text-light

Dan dibawah ini adalah contoh kode penggunaannya.

<!DOCTYPE html>

<html>

<head>

  <title></title>

   <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css”>

  <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>

  <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js”></script>

  <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js”></script>

</head>

<body>

<div class=”container”>

  <h2>Contoh Penggunaan class bootstrap untuk text color</h2>

  <hr/>

  <p class=”text-muted”>Contoh text dengan Class .text-muted</p>

  <p class=”text-primary”>Contoh text dengan Class .text-primary</p>

  <p class=”text-success”>Contoh text dengan Class .text-success</p>

  <p class=”text-info”>Contoh text dengan Class .text-info</p>

  <p class=”text-warning”>Contoh text dengan Class .text-warning</p>

  <p class=”text-danger”>Contoh text dengan Class .text-danger</p>

  <p class=”text-secondary”>Contoh text dengan Class .text-secondary</p>

  <p class=”text-dark”>Contoh text dengan Class .text-dark</p>

  <p class=”text-light”>Contoh text dengan Class .text-light</p>

</div>

</body>

</html>

Silahkan copy dan paste di text editor kamu, dan jangan lupa save menjadi file .html, maka hasilnya akan terlihat seperti gambar dibawah ini.

07. Belajar HTML dan Membuat Struktur Tabel Belajar Desain Bareng

Membuat Background Color

Adapun beberapa class Bootstrap yang dapat mengatur warna background adalah:

  • bg-primary
  • bg-info
  • bg-success
  • bg-danger
  • bg-warning
  • bg-secondary
  • bg-dark
  • bg-light

Dan dibawah ini adalah contoh kode penggunaannya.

<!DOCTYPE html>

<html>

<head>

  <title></title>

   <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css”>

  <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>

  <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js”></script>

  <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js”></script>

</head>

<body>

<div class=”container”>

  <h2>Penggunaan Class Bootstrap untuk merubah warna background</h2>

  <p class=”bg-primary text-white”>Contoh menggunakan class bg-primary</p>

  <p class=”bg-success text-white”>Contoh menggunakan class bg-success</p>

  <p class=”bg-info text-white”>Contoh menggunakan class bg-info</p>

  <p class=”bg-warning text-white”>Contoh menggunakan class bg-warning</p>

  <p class=”bg-danger text-white”>Contoh menggunakan class bg-danger</p>

  <p class=”bg-secondary text-white”>Contoh menggunakan class bg-secondary</p>

  <p class=”bg-dark text-white”>Contoh menggunakan class bg-dark</p>

  <p class=”bg-light text-dark”>Contoh menggunakan class bg-light</p>

</div>

</body>

</html>

Silahkan copy dan paste di text editor kamu, dan jangan lupa save menjadi file .html, maka hasilnya akan terlihat seperti gambar dibawah ini.

07. Belajar HTML dan Membuat Struktur Tabel Belajar Desain Bareng

Maka, itu adalah pembahasan tentang tabel dan text dalam penggunaan bootstrap.

%d blogger menyukai ini: