Bagaimana Cara Membuat Tabel Dalam Html

4 min read Jul 01, 2024
Bagaimana Cara Membuat Tabel Dalam Html

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.

Latest Posts