Dalam pembuatan halaman web, tabel digunakan untuk mengorganisir dan menampilkan data secara terstruktur. Tabel terdiri dari baris dan kolom yang membentuk grid, di mana data ditempatkan dalam sel-sel tabel. Dalam tutorial ini, kita akan membahas apa itu tabel, fungsi dan kegunaannya, kapan tabel diperlukan, tag dan elemen yang digunakan dalam tabel, serta bagaimana membuat tabel menggunakan HTML dan mendesainnya dengan CSS.
Apa itu Tabel?
Tabel adalah sebuah struktur data dalam bentuk grid yang terdiri dari baris dan kolom. Tabel digunakan untuk menyajikan data dengan cara yang terstruktur dan mudah dibaca. Setiap sel dalam tabel dapat berisi teks, angka, atau jenis data lainnya.
Unsur unsur Tabel
- Baris Tabel terdiri dari serangkaian baris yang berjalan secara horizontal. Setiap baris dalam tabel memiliki nomor atau label unik yang membedakannya dari baris lainnya.
- Kolom Tabel juga terdiri dari serangkaian kolom yang berjalan secara vertikal. Setiap kolom dalam tabel diberi judul atau label yang menjelaskan jenis data yang terdapat dalam kolom tersebut.
- Sel Setiap persimpangan antara baris dan kolom dalam tabel disebut sebagai sel. Sel merupakan unit terkecil dalam tabel yang dapat berisi data.
- Header Baris pertama dalam tabel biasanya digunakan sebagai header atau judul kolom. Header memberikan informasi tentang isi kolom di bawahnya.
- Isi Bagian dari tabel yang berisi data sebenarnya disebut sebagai isi tabel. Data ini dapat berupa teks, angka, tanggal, atau jenis data lainnya.
- Garis bantu Tabel sering menggunakan garis bantu untuk membagi antara baris dan kolom, serta memisahkan header dari isi tabel. Garis bantu membantu memperjelas struktur tabel dan memudahkan pembacaan data.
Fungsi Tabel
- Mengorganisir data Tabel membantu mengatur dan mengorganisir data dalam format grid yang terstruktur.
- Menampilkan data Tabel memungkinkan pengguna untuk menampilkan data dalam bentuk yang mudah dibaca dan dipahami.
- Membandingkan data Dengan tabel, pengguna dapat membandingkan data yang berbeda secara visual.
- Membuat kerangka data Tabel memberikan kerangka atau struktur untuk mengisi dan menampilkan data secara sistematis.
Kapan Tabel Diperlukan
Tabel diperlukan ketika Anda ingin menampilkan data yang memiliki struktur dan hubungan yang jelas antara setiap elemen. Beberapa contoh penggunaan tabel dibawah ini.
- Daftar produk atau harga
- Jadwal atau kalender
- Data statistik atau perbandingan
- Daftar kontak atau informasi kontak
- Hasil survei atau data penelitian
Tag dan Elemen pada Tabel
Dalam HTML, terdapat beberapa tag dan elemen yang digunakan untuk membuat dan memformat tabel.
- <table> Tag utama yang menunjukkan awal dan akhir tabel.
- <tr> Tag untuk membuat baris dalam tabel.
- <th> Tag untuk membuat sel header dalam tabel.
- <td> Tag untuk membuat sel data dalam tabel.
- <caption> Tag untuk menambahkan judul atau keterangan tabel.
Membuat Tabel dengan HTML
Berikut dibawah ini contoh tabel yang dibuat dengan HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Tabel</title>
</head>
<body>
<table border="1" cellspacing="0">
<thead>
<th>No</th>
<th>Nama</th>
<th>Jurusan</th>
<th>Semester</th>
</thead>
<tbody>
<td>1</td>
<td>Samotuho Ndruru</td>
<td>Teknik Informatika</td>
<td>Delapan</td>
</tbody>
<tbody>
<td>2</td>
<td>Samotuho</td>
<td>Teknik Informatika</td>
<td>Delapan</td>
</tbody>
<tbody>
<td>3</td>
<td>Samo</td>
<td>Teknik Informatika</td>
<td>Delapan</td>
</tbody>
<tbody>
<td>4</td>
<td>Jhon Dow</td>
<td>Teknik Informatika</td>
<td>Delapan</td>
</tbody>
<tbody>
<td>5</td>
<td>Petter</td>
<td>Teknik Informatika</td>
<td>Delapan</td>
</tbody>
</table>
</body>
</html>
Membuat Desain Tabel dengan CSS
Dengan membuat tabel seperti di kode diatas, kita dapat membuat desain pada tabel tersebut menggunakan CSS, seperti dibawah ini.
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
table {
border-collapse: collapse;
width: 500px;
}
th,
td {
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
Kesimpulan
Tabel adalah struktur data dalam bentuk grid yang digunakan untuk mengorganisir, menampilkan, dan membandingkan data dalam format yang terstruktur. Dalam pembuatan halaman web, tabel sangat berguna untuk menyajikan informasi secara jelas dan teratur.
Dengan HTML dan CSS, kita dapat membuat tabel dan mendesainnya sesuai dengan kebutuhan. Dengan demikian, tabel merupakan alat penting dalam pembuatan halaman web untuk menyajikan data dengan cara yang mudah dipahami dan dikelola.
2 komentar