Tabel merupakan elemen penting dalam web. Dengan sebuah tabel, penyajian informasi bisa dibuat lebih nyaman untuk disajikan kepada khalayak umum. Mengutip dari ChatGPT, informasi tentang tabel memiliki banyak fungsi yaitu :
- Organisasi Data
Tabel digunakan untuk mengorganisir data secara terstruktur. Data disusun dalam baris dan kolom, memudahkan untuk membaca dan memahami informasi.
- Pemrosesan dan Analisis Data
Dalam bidang statistik dan ilmu data, tabel digunakan untuk menyimpan data mentah yang dapat diolah dan dianalisis. Misalnya, spreadsheet digunakan untuk menghitung total, rata-rata, dan statistik lainnya.
- Database
Dalam sistem manajemen database (DBMS), tabel adalah entitas dasar untuk menyimpan data. Setiap tabel mewakili jenis entitas tertentu, dan setiap baris dalam tabel mewakili entitas tunggal.
- Presentasi Informasi
Tabel digunakan dalam dokumen, presentasi, dan laporan untuk menyajikan informasi secara terstruktur dan terorganisir. Ini memudahkan pembaca untuk memahami data dengan cepat.
- Pelacakan Data
Tabel sering digunakan untuk melacak informasi terkait, seperti inventaris barang, informasi pelanggan, atau catatan transaksi.
- Referensi Cepat
Dalam buku panduan atau indeks, tabel digunakan untuk memberikan referensi cepat terhadap informasi yang dibutuhkan. Daftar isi dalam buku atau panduan adalah contoh umumnya.
- Visualisasi Data
Tabel dapat digunakan sebagai dasar untuk membuat visualisasi data, seperti grafik atau diagram. Data dalam tabel dapat diambil dan diolah untuk membuat representasi grafis yang lebih mudah dimengerti.
- Perhitungan dan Komputasi
Dalam spreadsheet, tabel digunakan untuk melakukan perhitungan dan komputasi. Rumus matematis dapat diterapkan pada data dalam tabel untuk menghasilkan hasil yang diinginkan.
- Pelacakan Perubahan
Dalam beberapa konteks, tabel dapat digunakan untuk melacak perubahan atau peristiwa sepanjang waktu. Misalnya, tabel log dapat mencatat aktivitas sistem atau perubahan data.
Lalu, bagaimana si bentuk tabel itu ?
Begitulah bentuk tabel. Lalu bagaimana membuatnya dengan HTML!? Yuk kita pelajari lebih jauh!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LATIHAN TABEL</title>
</head>
<body>
<table> <!-- tag membuat tabel -->
</table>
</body>
</html>
Untuk membuat tabel, tentu yang paling utama adalah penulisan tag <table>. Kemudian diikuti dengan tag <tr> untuk membuat baris dan terakhir ikuti dengan <td> guna membuat kolom. Baris kode tabel kita menjadi :
<body>
<table> <!-- tag membuat tabel -->
<tr> <!-- membuat definisi baris -->
<td> </td> <!-- membuat kolom dalam baris -->
</tr>
</table>
</body>
Setiap tag dalam HTML harus diikuti dengan tag penutup. Tanda penutup tag ada tanda garis miring ( / ) dalam penulisan tag
Mari kita isi tabel kita diatas dengan tulisan :
<body>
<table> <!-- tag membuat tabel -->
<tr> <!-- membuat definisi baris -->
<td> Isi Dalam Tabel </td> <!-- membuat kolom dalam baris -->
</tr>
</table>
</body>
Hasilnya
Ndak ada garisnya 😕
Santai cuy! Untuk memunculkan garis dalam tabel, kita tambah properti border dalam tag <table>. Menjadi :
<body>
<table border="1"> <!-- tag membuat tabel -->
<tr> <!-- membuat definisi baris -->
<td> Isi Dalam Tabel </td> <!-- membuat kolom dalam baris -->
</tr>
</table>
</body>
Bandingkan dengan tanpa disertai dengan border atau isi border dengan nilai 0, bagaimana tampilannya di browser :
Paham!? 😇
Mari perhatikan konsep tabel dengan memperhatikan ilustrasi dibawah ini!
Nomor :
1 : Merupakan baris pertama, berada di kolom pertama
2 : Merupakan baris pertama, berada di kolom kedua
3 : Merupakan baris pertama, berada di kolom ketiga
4 : Merupakan baris pertama, berada di kolom keempat
Lanjut perhatikan ilustrasi berikut ini :
Terlihat angka 1 sampai 4.
1 : Merupakan baris kedua, berada di kolom pertama
2 : Merupakan baris kedua, berada di kolom kedua
3 : Merupakan baris kedua, berada di kolom ketiga
4 : Merupakan baris kedua, berada di kolom keempat
Begitulah seterusnya sampai bagian bawahnya secara terus menerus menjadi baris ketiga, keempat dan kelima. Mari kita buat bentuk seperti contoh tabel diatas, sebuah tabel dengan 4 kolom dan 5 baris.
Pertama mari kita buat barisnya terlebih dahulu dengan menuliskan tag <tr> sesuai dengan jumlah baris yang kita inginkan.
<body>
<table> <!-- tag membuat tabel -->
<tr> <!-- membuat baris pertama -->
</tr>
<tr> <!-- membuat baris kedua -->
</tr>
<tr> <!-- membuat baris ketiga -->
</tr>
<tr> <!-- membuat baris keempat -->
</tr>
<tr> <!-- membuat baris kelima -->
</tr>
</table>
</body>
Pembuatan tabel dalam HTML diawali dengan menuliskan tag <table> kemudian diikuti dengan tag <tr> dulu, konsepnya adalah baris dulu baru nanti membuat kolom.
Dilanjutkan dengan membuat kolomnya, berapa tadi jumlah kolom kita !? 4!
Untuk membuat kolom, kita tuliskan tag <td> di antara pembuka dan penutup <tr>. Setiap penulisan <td> <!-- value --> </td> artinya membuat satu kolom.
Perhatikan baris kode dibawah ini!
<body>
<table> <!-- tag membuat tabel -->
<tr> <!-- membuat baris pertama -->
<td> Kolom 1 </td> <!-- membuat kolom pertama dalam baris pertama -->
<td> Kolom 2 </td> <!-- membuat kolom kedua dalam baris pertama -->
<td> Kolom 3 </td> <!-- membuat kolom ketiga dalam baris pertama -->
<td> Kolom 4 </td> <!-- membuat kolom keempat dalam baris pertama -->
</tr>
<tr> <!-- membuat baris kedua -->
</tr>
<tr> <!-- membuat baris ketiga -->
</tr>
<tr> <!-- membuat baris keempat -->
</tr>
<tr> <!-- membuat baris kelima -->
</tr>
</table>
</body>
Di dalam tag <tr> pertama kita membuat kolomnya, berjumlah 4 dengan perintah <td>. Bagaimana hasilnya !?
Wah kok gitu ? 😐
Ya! Karena kita belum menuliskan properti untuk menampilkan border atau garis untuk tabel kita. Tambahkan properti "border = 1" di dalam tag tabel kita menjadi :
<table border="1"> <!-- tag membuat tabel -->
<tr> <!-- membuat baris pertama -->
Sehingga membuat tabel kita memiliki garis pembatas. Perlu diketahui semakin besar angka yang kita berikan, garis pembatas akan semakin tebal.
Kita coba ubah border menjadi 10 ya, lihat hasilnya :
Wkwkwkwkwk 😋
Mari fokus kembali! Bereskan tugas kita yaitu membuat tabel sampai baris ke lima
Cukup kita bisa copas ( copy-paste ) tag <td> kita semua lalu letakkan di masing-masing baris, nantinya baris kode kita menjadi :
<body>
<table border="1"> <!-- tag membuat tabel -->
<tr> <!-- membuat baris pertama -->
<td> Kolom 1 </td> <!-- membuat kolom pertama dalam baris pertama -->
<td> Kolom 2 </td> <!-- membuat kolom kedua dalam baris pertama -->
<td> Kolom 3 </td> <!-- membuat kolom ketiga dalam baris pertama -->
<td> Kolom 4 </td> <!-- membuat kolom keempat dalam baris pertama -->
</tr>
<tr> <!-- membuat baris kedua -->
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr> <!-- membuat baris ketiga -->
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr> <!-- membuat baris keempat -->
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr> <!-- membuat baris kelima -->
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
Sudah lengkap deh! Mari kita lihat hasilnya
Sampai disini bisa di mengerti!?
Sekarang tinggal kita ubah untuk kolom-kolom di baris pertama sesuai dengan tabel contoh kita. Yaitu dengan judul value :
- NO
- NAMA WEB
- JUMLAH PENGUNJUNG
- LAMA SITUS ( TAHUN )
<tr> <!-- membuat baris pertama -->
<td> Kolom 1 </td> <!-- membuat kolom pertama dalam baris pertama -->
<td> Kolom 2 </td> <!-- membuat kolom kedua dalam baris pertama -->
<td> Kolom 3 </td> <!-- membuat kolom ketiga dalam baris pertama -->
<td> Kolom 4 </td> <!-- membuat kolom keempat dalam baris pertama -->
</tr>
Menjadi :
<tr> <!-- membuat baris pertama -->
<td> NO </td> <!-- membuat kolom pertama dalam baris pertama -->
<td> NAMA WEB </td> <!-- membuat kolom kedua dalam baris pertama -->
<td> JUMLAH PENGUNJUNG </td> <!-- membuat kolom ketiga dalam baris pertama -->
<td> LAMA SITUS ( TAHUN ) </td> <!-- membuat kolom keempat dalam baris pertama -->
</tr>
Jangan lupa tambahkan judul untuk tabel kita :
<body>
<center>CONTOH TABEL DENGAN HTML</center>
<table border="1"> <!-- tag membuat tabel -->
Terlihat hasilnya
Okey! Sip...
Tabel kita sudah siap 😁
Nah, untuk baris selanjutnya itu kita bisa isi dengan value ( nilai ) sesuai yang kita inginkan. Ambil contoh kita akan isi dengan huruf abjad A - Z ya
Baris kode kita menjadi :
<body>
<center>CONTOH TABEL DENGAN HTML</center>
<table border="1"> <!-- tag membuat tabel -->
<tr> <!-- membuat baris pertama -->
<td> NO </td> <!-- membuat kolom pertama dalam baris pertama -->
<td> NAMA WEB </td> <!-- membuat kolom kedua dalam baris pertama -->
<td> JUMLAH PENGUNJUNG </td> <!-- membuat kolom ketiga dalam baris pertama -->
<td> LAMA SITUS ( TAHUN ) </td> <!-- membuat kolom keempat dalam baris pertama -->
</tr>
<tr> <!-- membuat baris kedua -->
<td> 1 </td>
<td> A </td>
<td> B </td>
<td> C </td>
</tr>
<tr> <!-- membuat baris ketiga -->
<td> 2 </td>
<td> D </td>
<td> E </td>
<td> F </td>
</tr>
<tr> <!-- membuat baris keempat -->
<td> 3 </td>
<td> G </td>
<td> H </td>
<td> I </td>
</tr>
<tr> <!-- membuat baris kelima -->
<td> 4 </td>
<td> J </td>
<td> K </td>
<td> L </td>
</tr>
</table>
</body>
Hasilnya
Cihuy...
Selesai juga akhirnya 😁😎
Selain dengan properti border, dalam tabel juga memiliki properti align. Perintah ini digunakan untuk mengatur posisi tabel maupun value yang ada di dalam tabel. Kalau properti ini kita letakkan di dalam tag <table>, maka keseluruhan tabel akan berada di posisi yang kita tentukan. Sedangkan kalau kita meletakkan di dalam tag <tr>, maka posisi yang akan berubah adalah baris itu saja. Dan yang terkahir, bila diletakkan di dalam tag <td>, maka yang akan berubah posisinya adalah value yang ada di dalam kolom itu saja.
Nah isi dari properti align ada 3, yaitu :
- align = "left", ini merupakan perintah untuk memposisikan tabel atau data kita berada di sisi kiri. Dan ini merupakan posisi otomatis dalam HTML, walaupun tidak menggunakan properti ini tabel atau data kita akan berada di sisi kiri,
- align = "center", ini merupakan perintah untuk memposisikan tabel atau data kita berada di sisi tengah.
- align = "right", ini merupakan perintah untuk memposisikan tabel atau data kita berada di sisi kanan.
Contoh, mari kita letakkan properti align di dalam tag <table> :
<body>
<center>CONTOH TABEL DENGAN HTML</center>
<table border="1" align="center"> <!-- tag membuat tabel dengan align -->
<tr> <!-- membuat baris pertama -->
<td> NO </td> <!-- membuat kolom pertama dalam baris pertama -->
<td> NAMA WEB </td> <!-- membuat kolom kedua dalam baris pertama -->
<td> JUMLAH PENGUNJUNG </td> <!-- membuat kolom ketiga dalam baris pertama -->
<td> LAMA SITUS ( TAHUN ) </td> <!-- membuat kolom keempat dalam baris pertama -->
</tr>
Hasilnya :
<body>
<center>CONTOH TABEL DENGAN HTML</center>
<table border="1" align="center"> <!-- tag membuat tabel, dengan align -->
<tr> <!-- membuat baris pertama -->
<td> NO </td> <!-- membuat kolom pertama dalam baris pertama -->
<td> NAMA WEB </td> <!-- membuat kolom kedua dalam baris pertama -->
<td> JUMLAH PENGUNJUNG </td> <!-- membuat kolom ketiga dalam baris pertama -->
<td> LAMA SITUS ( TAHUN ) </td> <!-- membuat kolom keempat dalam baris pertama -->
</tr>
<tr align="center"> <!-- membuat baris kedua, dengan align -->
<td> 1 </td>
<td> A </td>
<td> B </td>
<td> C </td>
</tr>
Hasilnya :
Sekarang mari kita ubah di bagian <td>, tambahkan properti align menjadi :
<body>
<center>CONTOH TABEL DENGAN HTML</center>
<table border="1" align="center"> <!-- tag membuat tabel -->
<tr> <!-- membuat baris pertama -->
<td> NO </td> <!-- membuat kolom pertama dalam baris pertama -->
<td> NAMA WEB </td> <!-- membuat kolom kedua dalam baris pertama -->
<td> JUMLAH PENGUNJUNG </td> <!-- membuat kolom ketiga dalam baris pertama -->
<td> LAMA SITUS ( TAHUN ) </td> <!-- membuat kolom keempat dalam baris pertama -->
</tr>
<tr align="center"> <!-- membuat baris kedua -->
<td> 1 </td>
<td> A </td>
<td> B </td>
<td> C </td>
</tr>
<tr> <!-- membuat baris ketiga -->
<td align="center"> 2 </td> <!-- membuat kolom dengan align -->
<td> D </td>
<td> E </td>
<td> F </td>
</tr>
Bagaimana hasilnya :
Di sana terlihat cuma angka 2 saja yang pindah di tengah bukan!? Nah begitulah penggunaan properti align di dalam tabel 😌
Untuk mengasah kemampuan dan pemahanan materi pembelajaran kali ini, coba kerjakan sebuah tabel HTML untuk membuat tampilan seperti ini :
Tags:
HTML