Membuat Tabel Pada HTML

Nur Kholis Majid 6:36:00 AM Pemrograman

Umumnya saat kalian menampilkan suatu data yang terstruktur dari database, kalian akan menampilkannya dalam bentuk tabel bukan? Maka dari itu, HTML sebagai bahasa markup telah menyediakan elemen table yang bisa digunakan saat kalian ingin membuat tabel.

Sebelum itu, mari kenali terlebih dahulu apa itu tabel. Tabel pada dasarnya digunakan untuk mengelompokkan suatu data secara terstruktur yang terdiri dari baris, kolom dan sel. Baris, kolom dan sel pada suatu tabel ini sangat membantu dalam melihat informasi keterkaitan di dalamnya.

Dari gambar di atas, bisa kalian pahami bahwa sel merupakan pertemuan antara baris dengan kolom. Mau tidak mau kalian harus memahami betul cara membuat tabel karena ini berkaitan erat dengan menampilkan data ketika suatu website sudah terdapat PHP - MySQL.

"Orang sukses akan mengambil keuntungan dari kesalahan dan mencoba lagi dengan cara yang berbeda." – Dale Carnegie

Memahami Elemen HTML dalam Membuat Tabel

Ada beberapa tag HTML dasar dalam membuat tabel yang harus kalian pahami yaitu :

<table> digunakan untuk mendefinisikan pembuatan tabel
<tr> digunakan untuk mendefinisikan pembuatan baris pada tabel
<td> digunakan untuk membuat kolom atau sel di setiap baris pada tabel

Seiring dengan perkembangan dan kebutuhan akan tabel, HTML juga menyediakan elemen-elemen opsional lain dalam pembuatan tabel seperti berikut :

<th> digunakan untuk mendefinisikan header di dalam tabel
<thead> digunakan untuk membungkus konten bagian judul atau kepala tabel
<tbody> digunakan untuk membungkus konten bagian isi atau tubuh dari tabel
<tfoot> digunakan untuk membungkus konten bagian kaki atau bawah dari tabel

Contoh dan Pembahasan

Pertama silakan buat file html baru. Beri nama file html tersebut sesuai selera atau dapat kalian beri nama “index.html”. Silakan perhatikan contoh kode berikut dan salin ke dalam file index.html.


<!DOCTYPE html>
<html>

   <head>
      <title>HTML Tables</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <td>Baris 1, Kolom 1</td>
            <td>Baris 1, Kolom 2</td>
         </tr>
         
         <tr>
            <td>Baris 2, Kolom 1</td>
            <td>Baris 2, Kolom 2</td>
         </tr>
      </table>
      
   </body>
</html>

Elemen tabel wajib disusun seperti contoh di atas. Tag <td> harus berada di dalam tab <tr>, kemudian tag <tr> harus berada di dalam tag <table>. Perlu kalian ingat, bahwa tag pada tabel semuanya memiliki pasangan, jadi jangan lupa membuat penutup di setiap tag-nya.

Pada contoh code di atas, akan menghasilkan tabel yang terdiri dari 2 baris dan 2 kolom. Sehingga secara otomatis akan menghasilkan 4 buah sel. Salah satu atribut yang digunakan pada contoh tabel di atas adalah border, yang berfungsi untuk memberikan garis tepi suatu tabel. Berikut hasilnya:

Sumber: https://www.dicoding.com/blog/cara-membuat-table-di-html/

Most Visited

Membuat Tabel Pada HTML

Memahami Elemen HTML dalam Membuat Tabel

Contoh dan Pembahasan

0 Comments

Post a Comment