6. Tutorial HTML Membuat Tabel di HTML Dan Contoh + Source Code Website Menggunakan Table - Bewok Tekno

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Responsive Ads Here

Tuesday, May 10, 2016

6. Tutorial HTML Membuat Tabel di HTML Dan Contoh + Source Code Website Menggunakan Table

Haloo kembali dengan om adji, maaf nih om adji ga sempet update soalnya kemaren liburan, jadi om adji jalan - jalan dulu.Oke lanjut aja sebelumnya kita telah membahas tutorial cara membuat hyperlink
pada HTML, kali ini Om adji akan membahas tutorial untuk pembuatan tabel pada HTML
Ok, langsung saja kita mulai.
Untuk membuat tabel pada HTML kita akan menggunakan tag <table></table>. untuk lebih jelasnya langsung praktek aja.
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Belajar membuat tabel pada HTML</title>
</head>
<body>
       <p>Kali ini kita akan belajar membuat tabel<br> Tabel ini akan berisi dua kolom dan tiga                          baris
       </p>
<table border="2">
       <tr>
            <td>kolom pertama baris pertama</td>
            <td>kolom kedua baris pertama</td>
       </tr>
        <tr>
              <td>kolom pertama baris kedua</td>
              <td>kolom kedua baris kedua</td>
        </tr>
        <tr>
              <td>kolom pertama baris ketiga</td>
              <td>kolom kedua baris ketiga</td>
       </tr>
  </table>
</body>
</html>
penjelasan dari <tr></tr> dan <td></td>
<tr></tr> artinya tabel row fungsinya untuk menentukan banyaknya baris pada sebuah tabel
<td></td> artinya tabel data fungsinya untuk menentukan banyaknya kolom atau kotak data pada sebuah tabel
fungsi atribut border pada tag <table> untuk membuat border pada tabel
Hasil dari script diatas sebagai berikut


Review pembelajaran

<!DOCTYPE html>
<head>
       <meta charset="UTF-8">
       <title>belajar HTML</title>
</head>
<body>
    <h1>Selamat Datang</h1>
    <br><br><br><br>
    <p>Selamat datang di tutorial website dasar menggunakan HTML</p>
    <p>Ini adalah halaman latihan untuk mengingat apa yang telah anda pelajari sebelumnya</p>
    <p>Daftar media sosial yang sering dikunjungi</p>
    <ul>
         <li><a href="http://www.facebook.com" target="_blank">Facebook</a></li>
         <li><a href="http://www.twitter.com" target="_blank">Twitter</a></li>
   </ul>
    <p>Tabel aplikasi chatting</p>
   
     <table border="2">
         <tr>
              <td>Nomor</td>
              <td>Nama Aplikasi</td>
              <td>Pengguna</td>
        </tr>
         <tr>
              <td>1</td>
              <td>BBM</td>
              <td>+- 75% penduduk dunia</td>
        </tr>
         <tr>
            <td>2</td>
            <td>Whatsapp</td>
            <td>+- 70% penduduk dunia</td>
        </tr>
         <tr>
            <td>3</td>
            <td>Line</td>
            <td>+- 60% penduduk dunia</td>
        </tr>
</table>
</body>
</html>
Hasilnya sebagai berikut:




Anak muda yang bikin kesel om bewok dateng ke tempat tutorial om adji.
Anak Muda : OM ADJI, mau nanya dong, boleh ga ?
om adji : #hadehh dia yang bikin gedeg si bewok nih. iya mau nanya apa ? boleh kokk.
Anak Muda : bisa ga om, kalau table nya di kasih warna gitu, abis bosen kalau kosong gitu kayak hati aku ?
om adji : nih anak minta bikin tutorial atau curhat  ?

Oke om adji bakal mulai tutorial nya, sebenernya konsep nya sama kok kayak css inline. nah om adji kasih tau contoh koding nya dulu ya
<body>
  <table width="90%" height=50px border="1" bgcolor="#2ecc71" cellspacing="15" cellpadding="8" >
    <tr>
      <td align="center" bgcolor="#27ae60"><font color="white">Hallo</font></td>
      <td align="center" bgcolor="#27ae60"><font color="white">Semua</font></td>
      <td align="center" bgcolor="#27ae60"><font color="white">Om Aji Laper Loh</font></td>
    </tr>
    <tr valign="top">
        <td align="center" height="70px" bgcolor="#e74c3c"><font color="white">Coba ada</font></td>
        <td align="center"   bgcolor="#e74c3c"><font color="white">Yang Bawain</font></td>
        <td align="center"   bgcolor="#e74c3c"><font color="white">Siomay depan kampus gitu</font></td>
    </tr>
        <tr valign="bottom">
        <td align="center" height="70px" bgcolor="#3498db"><font color="white">Atau boleh juga</font></td>
        <td align="center"   bgcolor="#3498db"><font color="white">Bantuin Om aji</font></td>
        <td align="center"  bgcolor="#3498db"><font color="white">KKP</font></td>
    </tr>
  </table>
</body>
DEMO
kalau mau lihat hasil nya seperti ini

Wah jadi banyak yang baru nih, tenang sama aja kok seperti css yang di ajarin om bewok cuman penempatan nya aja yang beda.
  <table width="90%" height=50px border="1" bgcolor="#2ecc71" cellspacing="15" cellpadding="8" >
Maksud nya ap ya ? ada yang tahu, yang tahu om kasih permen, hehe, yap dalam penjelasan bahasa indonesia dengan kalimat nya adalah
Kita buat table yang lebar nya 80% nah tinggi nya kita kasih 50px, dan border , tau dong border, Garis pada kotak nya, nah om kasih 1, kalau makin besar angka nya maka semakin seperti alis kekinian jaman sekarang TEBAL, Oke lanjut bgcolor adalah background nya kebetulan saya kasih hijau. nah cellspacing ini adalah jarak kotak nya seperti margin lah kira - kira. yap itu sajaa , eh ada yang kelupaan yaitu cellpading sama seperti biasa, ukuran kotak di dalam teks, coba aja cellpadding nya di jadiin 1 pasti kotak nya sempit dan berdempetan dengan teks nya. 

Kita bedah satu - satu, gapapa yang panjang yang penting menarik, kita buat kata - katanya menarik mungkin biar yang lain gampang atau mudah di baca, kalau terlalu baku nanti males bacanya. oke lanjutttt

<tr></tr> masa sih masih gatau, gapapa om aji ingetin lagi biar inget TR adalah table row, untuk pembuatan barus
 <tr valign="top">
valign itu format text tapi secara bersamaan yang terdapat di dalam tr jadi ada 3 Top, Middle and Bottom. udah itu aja sebenernya hehe
<td></td>pembuatan kolom,
<td align="center" bgcolor="#27ae60"><font color="white">Hallo</font></td>
Om aji bakal ngasih tau hanya 1 kolom karena semuanya sama cuman di ubah warna nya aja dan background hehe
dalam kalimat bahasa indonesia nya seperti ini ya
Kita buat kolom nih nah format text nya center jadi tulisan nya berada di tengah, bgcolor seperti biasa background yang hanya berada di 1 kolom ya, untuk font color arti nya kamu mengubah warna huruf, Hallo ? Hello kamu ga tau, hello sapaan pada telepon, eh maksud nya ini adalah teks, kamu bisa ganti sesuka mu.

Sebenernya table ini sudah jarang di gunakan sekali dalam pembuatan website, jadi kayak header, sidebar, footer itu sudah ga tidak di pergunakan lagi, bukanya bener - bener vakum si table ini tapi melainkan table ini di gunakan untuk menampilkan data, maksud nya biasanya data yang di tampilkan biar rapih maka di gunakan lah si table ini.

Beberapa bulan yang lalu, kita pernah buat website iseng yang bener - bener di buat dari table,
ada 2 kalian kalau mau download bisa di download, nanti di akhir om aji kasih download nya ya

Website 1

Satu lagi om kasih ya
Website 2

Itu bener bener di buat dengan menggunakan table, ya ada sih pake css dikit, kalau kalian mau source code nya kalian biasa download di github kita ada di bawah


Baiklah karena om adji sudah mau tidur, jadi sampai jumpa


Sekian tutorial kali ini, kita akan lanjutkan lagi lain kali
Tetap semangat yaaaaa 

No comments:

Post a Comment