Membuat tabel menggunakan HTML


 

Assalamu'alaikum teman-teman KWP semuanya🙏😊.

Salam sejahtera bagi kita semua, semoga kita semua tetap dalam lindungan Tuhan Yang Maha Esa.


Pada artike kali ini saya akan membahas tentang Cara Membuat Tabel Menggunakan HTML. Tabel merupakan struktur penting dalam membuat sebuah website untuk mengelompokkan sebuah daftar dalam bentuk kolom dan baris agar tampilannya menjadi rapi dan terstruktur. Tabel didefinisikan dengan Tag <table>. Sebuah tabel dibagi menjadi beberapa baris dengan tag <tr>, dan setiap baris dibagi menjadi beberapa kolom dengan tag <td>. Td merupakan kepandekkan dari Table Data yang berarti tempat menyimpan data (Data Cell). Sebuah cell dapat berupa teks, image, list, paragraf, form, table, dan lain-lain.


Oke langsung aja kita ngodingnya.

Pertama yang akan kita buat adalah defaul table. Silahkan ikuti langkah-langkah dibawah ini.

<html>
<head>
<title>Default Table</title>
</head>
<body>
<h1>Default Table</h1>
<p>
<table border="1">
<tr>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>Zein</td>
<td>Riau</td>
</tr>
<tr>
<td>Ridwan</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Moreno</td>
<td>Palu</td>
</tr>
</table>
</p>
</body>
</html>

  • Silahkan simpan code diatas dan jalankan dibrowser kalian. Maka tampilannya akan seperti dibawah ini


Kedua kita akan membuat Colspan Table 
  • Silahkan ketikkan code HTML dibawah ini
<html>
<head>
<title>Colspan Table</title>
</head>
<body>
<h1>Colspan Table</h1>
<p>
<table border="1">
<tr>
<th>Hari</th>
<th colspan="3">Kuliah</th>
</tr>
<tr>
<td>Senin</td>
<td>Fisika</td>
<td>Kimia</td>
<td>Biologi</td>
</tr>
</p>
</body>
</html>

Keterangan: colspan berguna sebagai penentu banyak kolom dalam satu baris.

  • Simpan code diatas dan jalankan dibrowser. Maka, tampilannya akan seperti dibawah ini

Ke tiga Kita akan membuat Rowspan Table yaitu untuk menggabungkan baris-baris.
  • Silahkan ketikkan code HTML dibawah ini
<html>
<head>
<title>Rowspan Table</title>
</head>
<body>
<h1>Rowspan Table</h1>
<p>
<table border="1">
<tr>
<th>Hari</th>
<td>Senin</td>
</tr>
<tr>
<th rowspan="3">Kuliah</th>
<td>Fisika</td>
</tr>
<tr>
<td>Kimia</td>
</tr>
<tr>
<td>Biologi</td>
</tr>
</table>
</p>
</body>
</html>

  • Simpan code HTML diatas dan jalankan dibrowser kalian. Maka, tampilannya akan seperti dibawah ini



Ke empat kita akan membuat Cellpadding Table yang berguna sebagai pengatur padding cell (jarak antara border dengan konten).
  • Ketikkan Kode HTML dibawah ini
<html>
<head>
<title>Cellpadding Table</title>
</head>
<body>
<h1>Cellpadding Table</h1>
<p>
<table border="1" cellpadding="5">
<tr>
<th>Hari</th>
<td>Senin</td>
</tr>
<tr>
<th rowspan="3">Kuliah</th>
<td>Fisika</td>
</tr>
<tr>
<td>Kimia</td>
</tr>
<tr>
<td>Biologi</td>
</tr>
</table>
</p>
</body>
</html>

  • Simpan dan jalankan dibrowser. Maka, tampilannya akan seperti gambar dibawah ini



Ke lima kita akan membuat Cellspacing Table digunakan untuk memberi jarak antar cell.
  • Ketikkan code HTML dibawah ini
<html>
<head>
<title>Cellspacing Table</title>
</head>
<body>
<h1>Cellspacing Table</h1>
<p>
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Hari</th>
<td>Senin</td>
</tr>
<tr>
<th rowspan="3">Kuliah</th>
<td>Fisika</td>
</tr>
<tr>
<td>Kimia</td>
</tr>
<tr>
<td>Biologi</td>
</tr>
</table>
</p>
</body>
</html>

Keterangan: Berbeda dari sebelumnya table ini lebih renggan karena diberi jarak menggunakan cellspacing


Ke enam kita akan belajar memberikan background warna pada table.
  • Silahkan kalian ketikkan code HTML dibawah ini
<html>
<head>
<title>Background Table</title>
</head>
<body>
<h1>Background Table</h1>
<p>
<table border="1" bgcolor="green">
<tr>
<th>Hari</th>
<th>Pelajaran</th>
</tr>
<tr>
<td>Senin</td>
<td>MTK</td>
</tr>
<tr>
<td>Selasa</td>
<td>Fisika</td>
</tr>
<tr>
<td>Rabu</td>
<td>Kimia</td>
</tr>
</table>
</p>
</body>
</html>

  • Simpan dan jalankan dibrowser. Maka, tampilannya akan seperti gambar dibawah ini


Ke tujuh kita akan membuat Table Background Image.
  • Silahkan ketikkan code HTML dibawah ini
<html>
<head>
<title>Table Background Image</title>
</head>
<body>
<h1>Table Background Image</h1>
<p>
<table border="1" background="https://awsimages.detik.net.id/community/media/visual/2020/07/13/manga-naruto-1_43.webp">
<tr>
<th>Hari</th>
<th>Pelajaran</th>
</tr>
<tr>
<td>Senin</td>
<td>MTK</td>
</tr>
<tr>
<td>Selasa</td>
<td>Fisika</td>
</tr>
<tr>
<td>Rabu</td>
<td>Kimia</td>
</tr>
<tr>
<td>Kamis</td>
<td>Biologi</td>
</tr>
</table>
</p>
</body>
</html>

Keterangan: Saya menggunakan link gambar yang berada di internet. Jika kalian ingin menggunakan gambar yang berada di internal perangkat kalian juga bisa.


  • Simpan dan jalankan dibrowser kalian. Maka, tampilannya akan seperti gambar dibawah ini.


Yang terakhir kita akan membuat Table Border atau bingkai pada table menggunakan warna.
  • Silahkan ketikkan code HTML dibawah ini
<html>
<head>
<title>Table Border</title>
</head>
<body>
<h1>Table Border</h1>
<p>
<table border="1" bordercolor="red">
<tr>
<th>Hari</th>
<th>Pelajaran</th>
</tr>
<tr>
<td>Senin</td>
<td>MTK</td>
</tr>
<tr>
<td>Selasa</td>
<td>Fisika</td>
</tr>
<tr>
<td>Rabu</td>
<td>Kimia</td>
</tr>
</table>
</p>
</body>
</html>

  • Simpan dan jalankan dibrowser kalian. Maka, tampilannya akan seperti gambar dibawah ini.




Oke teman-teman, itulah delapan materi yang saya bahas diartikel Table HTML ini.


Semoga bermanfaat bagi teman-teman kedepannya untuk terus mengembangkan skill dalam membuat sebuah website dengan hasil coding sendiri dan pemikiran sendiri.



Jangan lupa jika kalian tidak paham, kurang paham, ingin berkritik, dan lain-lain silahkan berkomentar dibawah yah teman-teman.

Terimakasih,


Semangat Otodidak💪💪











Komentar

Posting Komentar

Postingan Terpopuler

Cara ngoding HTML di Android

Gambar
  Assalamu'alaikum teman-teman, salam sejahtera bagi kita semua. Banyak diantara kita bertanya-tanya, apakah bisa kita ngoding di android? Jawabannya pasti bisa, karena sudah banyak aplikasi legal yang tersebar di app store atau playstore di Android kalian. Karena saya bukan user atau pengguna android untuk ngoding jadi saya full ngoding di komputer atau laptop saja. Sebenernya ngoding diandroid bisa juga sih, cuman ram android saya 2GB dan sekarang sudah kepenuhan jadi saya tidak bisa pakai android untuk ngoding, karena banyak file penting di handphone saya, hehehehehe... Mungkin saya hanya share pengalaman saya aja nih, karena waktu itu saya juga pernah menjadi programmer yang menggunakan android ya, meskipun cuman ngoding HTML aja sih, apa salahnya jika saya ingin berbagi ilmu buat kalian yang mau ngoding HTML di android.  Yang pernah saya coding di android itu bukan HTML aja sih, CSS dan JavaScript pernah, karena HTML, CSS, JavaScript itu tidak perlu banyak bahan, hanya pe...
Baca selengkapnya

Tulisan berjalan dan menampilkan video dari youtube ke website menggunakan HTML

Gambar
 Assalamu'alaikum sahabat KWP semua🙏😊, Salam sejahtera bagi kita semua, Semoga kita tetap dalam lindungan Tuhan Yang Maha Esa. Driartikel kali ini saya ingin memberikan kalian sebuah materi yaitu tentang Tulisan berjalan dan cara menampilkan video dari youtube ke website milik kita menggunakan HTML. Pastinya kalian pernah melihat tulisan-tulisan berjalan pada sebuah website yah dan juga ada video dari youtube yang ditampilkan pada sebuah website. Untuk tulisan berjalan pada website biasanya para Programmer menyebutnya Marquee , Karena tulisan yang berjalan itu pastinya menggunakan tag Marquee untuk membuat tulisan tersebut berjalan.  Pertama kita akan membuat tulisan yang berjalan dari kanan ke kiri atau Marquee Default . Silahkan ketikkan Code HTML dibawah ini pada Text Editor kalian  <html> <head> <title>Marquee</title> </head> <body> <h1>Marquee</h1> <p> <marquee>Tulisan Ini Berjalan</marquee> </p...
Baca selengkapnya

Perkenalan

Gambar
  Assalamu'alaikum Warahmatullahi Wabarokatuh Perkenalkan nama saya Muhammad Ibnu Zein. Dinisi saya sebagai pendiri Forum Koding Web Programming. Dimana forum tersebut adalah tempat untuk mempelajari tentang Web Developing dari awal. Di postingan pertama saya diblog ini saya hanya memperkenalkan saya dan yang akan dibahas di blog ini saja. Diblog ini saya akan menyampaikan berbagai macam materi tentang dunia Web Developing yang terpenting adalah Start up pertama kali kita mulai belajar tentang Web Developing.  Ada pun materi terpenting yang akan saya bahas di blog ini adalah: 1. HTML Dasar 2. CSS Dasar 3. Praktek Pembuatan Website berbasis HTML & CSS 4. PHP Dasar 5. JavaScript Dasar 6. Mysql Database 7. Tambahan info materi tentang Web Developing.
Baca selengkapnya