Tabel HTML: Ini Cara Membuat dan Contohnya

Tabel HTML mempunyai peranan penting di dalam sebuah website, loh. Apalagi, jika website tersebut merupakan website toko online atau pun acara. Kedua jenis tersebut mesti menampilkan data-data secara terstruktur, kan?

Misal, untuk menampilkan apa saja produk yang ditawarkan, event-event yang ada, dan yang lainnya. Agar tampilannya menjadi rapi, maka, kamu bisa membuat tabel. Yuk, simak bagaimana cara membuat tabel HTML berikut!

Fungsi Tabel HTML

Tabel mempunyai peran yang sangat penting saat kamu akan menyajikan data-data, kan? Dengan menggunakan tabel, sajian data menjadi lebih bagus dan terstruktur, bisa mempermudah pembaca memahaminya.

Adapun fungsi utama tabel HTML ialah buat ngebantu kamu, menyajikan informasi di dalam format grid yang akan mempermudah pembaca untuk menginterpretasikan dan memahami data.

Sementara bagi yang bekerja sebagai web developer, tabel ini akan berguna untuk menampilkan informasi yang lebih jelas dan terstruktur.

Bahkan, pemahaman mengenai tabel HTML juga akan membuat siapa pun bisa membuat desain yang responsif, loh.

Cara Membuat Tabel HTML

Kabar baiknya, cara membuat tabel di HTML tergolong mudah loh, Sob. Kamu bisa ikuti step by step berikut, ya.

1. Pahami Komponen Tabel HTML

Cara pertama yang bisa kamu lakukan adalah dengan memahami komponen apa saja yang ada di dalamnya. Tiap tabel mempunyai empat bagian yakni sel, baris, kolom, dan border.

Sel merupakan kotak kecil yang terdapat di dalam tabel yang akan kamu buat. Setiap kotak tersebut bisa kamu isi dengan berbagai elemen, mulai dari huruf, angka, atau bahkan gambar.

Cek Konten Lainnya:

Apa itu Coding? Ini Penjelasan Mudahnya untuk Pemula

Kemudian, ada baris. Baris sendiri adalah deretan sel yang terdapat di dalam sebuah tabel. Kolom adalah bagian yang vertikal dari sebuah tabel, isinya adalah sel-sel sejajar.

Sementara border adalah garis bagian tepi di sebuah tabel. Border mengelilingi tiap baris, kolom, dan sel. Tujuan dari garis tepi ialah membantu para pengunjung website untuk melihat batas antara informasi di tiap tabel.

2. Pahami Tag Khusus

Selain harus memahami apa saja komponen di dalam tabel HTML, kamu juga harus memahami tag khusus, ya. Pada umumnya, terdapat beberapa tag khusus yang akan membantu kamu untuk mengatur dan membuat tabel. Berikut di antaranya.

<table>

Tag yang satu ini akan mendefinisikan bagian awal dan akhir sebuah tabel. Kamu dapat memasukkan seluruh elemen tabel di bagian ini.

<td>

Elemen yang satu ini berguna untuk menjelaskan atau mendefinisikan sel di dalam sebuah tabel. Tiap selnya bisa kamu letakkan tab satu ini, ya. Dalam hal ini, silahkan isi dengan elemen apa pun yang kamu butuhkan. Seperti gambar, teks, atau angka.

<tr>

Tag tr berguna buat mendefinisikan bagian baris di sebuah tabel. Silakan letakkan tag ini pada tiap baris di tabel yang kamu buat.

<th>

Biasanya, bagian paling atas tabel akan dibuat dengan tulisan tebal dan diletakkan di bagian tengah, kan?

Nah, jika ingin membuat pengaturan seperti ini, kamu bisa gunakan tag ini pada bagian heading atau pun judul tabel. Kabar baiknya lagi, kamu dapat mengisi bagian tersebut dengan berbagai elemen.

3. Buat Elemen Tabel

Setelah memahami kedua poin penting di atas, sekarang silahkan buat struktur dasar membuat tabel pada HTML yakni elemen berupa <table> untuk membuat tabel baru.

Elemen satu ini bakalan jadi kontainer pada seluruh bagian-bagian tabel yang lainnya.

4. Masukkan Baris

Pada tiap barisnya, kamu bisa nambahin sel header, ya. Caranya adalah dengan menambahkan <td> atau kamu juga dapat menggunakan <td> buat nambahin sel data. Coding tabel HTML untuk bagian baris ialah:

Cek Konten Lainnya:

Apa itu User Interface (UI)? Fungsi dan Karakteristik

<table>

<tr>

</tr>

<tr>

</tr>

</table>

5. Gabungkan Sel

Setelah selesai, kamu perlu menggabungkan sel yang vertikal dengan yang horizontal. Dalam hal ini, bisa menggunakan atribut berupa rowspan dengan colspan.

Bagian rowspan berguna saat akan menggabungkan sel secara vertikal, sementara colspan ialah menggabungkan sel secara horizontal. Contoh:

<td colspan=”2″>Menggabungkan 2 kolom</td>

<td rowspan=”2″>Menggabungkan 2 baris</td>

6. Menggabungkan Elemen <th>

Adapun cara membuat tabel di HTML berikutnya adalah dengan menggabungkan elemen <th>. Elemen satu ini mempunyai fungsi untuk ngebuat sel header di dalam sebuah tabel.

Kebanyakan pengguna memakai bagian ini untuk bagian judul pada tiap kolom atau pun baris. Bagian teks biasanya akan langsung rata dan tebal. Codingan tabel HTML yang bisa kamu gunakan ialah:

<tr>

<th>Email</th>

</tr>

7. Atur Border

Cara membuat tabel HTML yang bagus ialah mengatur border. Meskipun pembuatan border tidak wajib, tapi, bagian ini tetap mempunyai peran yang sangat penting loh.

Selain akan membantu pembaca untuk memahami informasi yang ada, border juga berguna untuk memperbagus tampilannya.

Dalam hal ini, kamu bisa menggunakan class yang ada di CSS (Cascading Style Sheets).

Dengan demikian, kamu bisa mengubah banyak hal yang ada pada bagian tabel, tanpa mengubah hal-hal yang substantif. Biasanya, bagian tersebut akan berbentuk seperti:

. table {

border: 2px solid black;

padding: 10px;

margin: 20px;

background-color: lightgray;

}

8. Mengisi Data

Tahap berikutnya adalah dengan mengisi data ke dalam tabel. Saat akan mengisi tabel, kamu bisa menggunakan <td>. Tiap sel yang di dalam tabel mesti diawali plus diakhiri dengan tag yang satu ini.

Nantinya, sel data tersebut bakalan tersusun di dalam baris, agar membuat bentuknya menjadi lebih terstruktur.

9. Tambahkan Warna

Step terakhir adalah pemberian warna pada bagian latar belakang di bagian baris tabel. Adapun perintah html untuk membuat tabel yang bisa digunakan ialah:

Cek Konten Lainnya:

Mengenal Format Gambar WebP dan Kelebihannya

<th>Table Header</th><th>Table Header</th>

</tr>

<tr>

<td>Table cell 1</td><td>Table cell 2</td>

</tr>

<tr>

<td>Table cell 3</td><td>Table cell 4</td>

</tr>

</table>

Contoh Tabel HTML

Berikut ini merupakan contoh tabel yang bisa kamu perhatikan!

<!DOCTYPE html>

<html>

<head>

<title>Belajar Membuat Tabel HTML</title>

</head>

<body>

<table>

<tr>

<td>Baju 1 Gamis 1</td>

<td>jilbab 1 rok 2</td>

</tr>

<tr>

<td>Baju 2 Gamis 1</td>

<td>jilbab 2 rok 2</td>

</tr>

</table>

</body>

</html>

Hasil:

Baju 1 gamis 1 jilbab 1 rok 2

Baju 2 gamis 1 jilbab 2 rok 2

Contoh satu ini tergolong yang paling standar, ya. Kamu tidak menemukan bagian garis di dalamnya. Nantinya, silahkan tambahkan garis atau border, caranya adalah dengan menambahkan border, supaya ada garisnya.

Adapun cara yang bisa dilakukan ialah dengan menambahkan atribut berupa border=’1’ di dalam tag <table>.

<tr>

<td>Baju 1 Gamis 1</td>

<td>jilbab 1 rok 2</td>

</tr>

<tr>

<td>Baju 2 Gamis 1</td>

<td>jilbab 2 rok 2</td>

</tr>

</table>

Angka 1 bagian atribut border merupakan ukuran garis, ya. Ketika ukurannya semakin besar, ini akan membuat ukuran garisnya juga bakalan menjadi lebih besar. Ukuran 1 ini merupakan ukuran yang paling kecil.

Adapun hasil dari penambahan bagian border di atas adalah:

Baju 1 gamis	jilbab 1 rok 2
Baju 2 gamis 1	jilbab 2 rok 2

FAQ

Apa pengertian tabel HTML?

Tabel HTML merupakan elemen untuk menampilkan data dan mengatur data berbentuk baris dan kolom di sebuah halaman website. Sehingga, akan sangat membantu saat akan menyajikan dan mengorganisir informasi yang terstruktur.

Apakah bisa membuat tabel dengan HTML table generator?

Bisa. Kamu bisa menggunakan generator HTML saat membuat tabel. Keberadaan generator akan sangat membantu dan mempercepat proses pembuatan. Hanya saja, penggunaan generator mempunyai keterbatasan pada kustomisasi, ya.

Apa perbedaan tr dan td?

Elemen tr berfungsi untuk menjelaskan pembuatan baris di tabel, sementara td untuk membuat kolom/sel pada tiap baris pada tabel.