CARA MEMBUAT TABEL DI HTML

Membuat tabel di HTML sebenarnya sangat mudah. Kamu hanya perlu memahami beberapa tag dasar HTML yang digunakan untuk membuat tabel. Artikel ini akan menjelaskan langkah-langkahnya secara detil.

Apa Itu Tabel HTML

Tabel HTML digunakan untuk menampilkan data dalam format yang terstruktur. Tabel terdiri dari baris dan kolom, yang bisa kamu gunakan untuk mengatur informasi secara efisien dan membuat tampilan web kamu menjadi lebih rapi.

Untuk membuat tabel di HTML, kamu perlu menggunakan tiga tag utama, yaitu <table>, <tr> (table row), dan <td> (table data).

Langkah-langkah Membuat Tabel di HTML

1. Membuat Tag Table

Mulailah dengan membuat tag <table>, yang akan berisi seluruh baris dan data tabel.

<table>
</table>

2. Membuat Tag TR

Tag <tr> digunakan untuk membuat baris baru dalam tabel. Di dalam tag <tr>, kamu bisa menambahkan tag <td> untuk membuat data tabel baru.

<table>
  <tr>
  </tr>
</table>

3. Membuat Tag TD

Tag <td> digunakan untuk membuat data baru di dalam baris yang sudah dibuat. Kamu dapat menambahkan sebanyak apapun tag <td> yang kamu inginkan di dalam setiap baris.

<table>
  <tr>
    <td></td>
  </tr>
</table>

4. Memasukkan Data ke Dalam Tabel

Kemudian, masukkan data yang kamu inginkan ke dalam setiap tag <td>. Jika kamu ingin membuat baris baru, cukup tambahkan tag <tr> dan <td> lagi.

<table>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <tr>
    <td>Data 3</td>
    <td>Data 4</td>
  </tr>
</table>

Styling Tabel dengan CSS

Setelah tabel berhasil dibuat, kamu mungkin ingin memberikan style pada tabel supaya lebih menarik. Kamu bisa melakukan ini dengan menggunakan CSS.

Misalnya, kamu ingin memberikan border pada setiap sel dalam tabel. Untuk melakukan ini, kamu cukup menambahkan kode CSS berikut di dalam style HTML kamu.

<style>
table, td {
  border: 1px solid black;
}
</style>

Kemudian, tambahkan atribut class pada tag <table> dan <td> kamu dengan nilai yang sama dengan kode CSS yang telah dibuat.

<table class="border">
  <tr>
    <td class="border">Data 1</td>
    <td class="border">Data 2</td>
  </tr>
  <tr>
    <td class="border">Data 3</td>
    <td class="border">Data 4</td>
  </tr>
</table>

Itulah cara membuat tabel di HTML. Semoga artikel ini membantu kamu dalam belajar membuat tabel menggunakan HTML. Selamat mencoba!