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
Sekian tutorial kali ini, kita akan lanjutkan lagi lain kali
Tetap semangat yaaaaa
Terima kasih admin untuk artikel nya, karena artikel dari admin saya bisa tau bagaimana cara membuat tabel dengan kode html, ternyata caranya cukup mudah jika kita memahaminya. Saya harap admin terus membuat artikel-artikel seperti ini ya..
ReplyDeletePerkenalkan nama saya mozza muthia rahman
Kunjungi website kampus saya di link ini
(https://www.atmaluhur.ac.id/)
Alhamdulillah Artikel ini sangat menarik dan mudah untuk dipahami, terutama bagi saya yang pemula ini, semoga dengan adanya artikel "Cara Membuat Tabel di HTML" ini membuat saya menjadi lebih paham lagi bagaimana caranya dan langkah-langkah apa saja yang akan kita kerjakan agar sesuai dengan yang kita inginkan
ReplyDeleteTerimakasih atas Artikelnya. Terus buat karya-karya yang lebih menarik lagi ya
Perkenalkan Saya Mutia Amirah Rahim
Kunjungi Website Kampus Saya https://www.atmaluhur.ac.id/
The brand is what sets one organization apart from another and it is mostly identified through a logo. So, if the company is using its unique logo to communicate with the audience through the print materials, they have to make sure that the logo is placed strategically on the website, to instantly connect with the audience. This helps in maintaining brand uniformity. website coding
ReplyDelete