Bagaimana Cara Membuat Tabel dalam HTML?
Tabel merupakan elemen HTML yang penting untuk menyusun data dalam bentuk baris dan kolom. Dengan tabel, data dapat disajikan dengan rapi, terstruktur, dan mudah dipahami. Berikut langkah-langkah membuat tabel dalam HTML:
1. Menggunakan Tag <table>
Tag <table>
merupakan tag utama untuk membuat tabel. Semua elemen tabel lainnya berada di dalam tag ini.
2. Menggunakan Tag <tr>
Tag <tr>
(table row) digunakan untuk membuat baris dalam tabel. Setiap baris berisi satu atau lebih kolom.
3. Menggunakan Tag <td>
Tag <td>
(table data) digunakan untuk membuat kolom dalam tabel. Setiap kolom berisi data yang ingin ditampilkan.
Data 1
Data 2
4. Menambahkan Judul Kolom dengan Tag <th>
Tag <th>
(table header) digunakan untuk membuat judul kolom dalam tabel. Judul kolom biasanya ditampilkan dengan format yang berbeda dari data biasa, seperti font yang lebih tebal atau warna yang berbeda.
Judul Kolom 1
Judul Kolom 2
Data 1
Data 2
5. Menambahkan Atribut colspan
dan rowspan
Atribut colspan
digunakan untuk menggabungkan beberapa kolom menjadi satu. Misalnya, jika Anda ingin menggabungkan 2 kolom menjadi satu, Anda dapat menggunakan colspan="2"
.
Data Gabungan
Atribut rowspan
digunakan untuk menggabungkan beberapa baris menjadi satu. Misalnya, jika Anda ingin menggabungkan 2 baris menjadi satu, Anda dapat menggunakan rowspan="2"
.
Data 1
Data 2
Data 3
6. Menambahkan Atribut border
Atribut border
digunakan untuk menambahkan garis batas pada tabel.
Contoh Kode:
Contoh Tabel HTML
Data Siswa
Nama
Kelas
Nilai
John Doe
10
85
Jane Doe
10
90
Penjelasan:
<table>
: Tag utama untuk membuat tabel.<caption>
: Tag untuk menambahkan judul pada tabel.<tr>
: Tag untuk membuat baris tabel.<th>
: Tag untuk membuat judul kolom.<td>
: Tag untuk membuat kolom data.
Kesimpulan:
Dengan menggunakan tag dan atribut yang tepat, Anda dapat membuat tabel HTML yang rapi, terstruktur, dan mudah dipahami. Anda dapat menambahkan berbagai jenis data ke dalam tabel, seperti teks, gambar, dan bahkan tabel lain.