Cara Membuat Tabel di Dalam HTML
Membuat tabel di dalam HTML adalah keterampilan penting bagi pengembang web. Tabel digunakan untuk menampilkan data dalam format yang terorganisir dan mudah dibaca. Dalam artikel ini, kita akan membahas cara membuat tabel di dalam HTML dengan menggunakan kode HTML dasar dan CSS. Langkah 1: Menulis Struktur Tabel HTML Langkah pertama dalam membuat tabel di dalam HTML adalah menulis struktur tabel HTML. Ini melibatkan pembuatan tabel dengan baris dan kolom. Berikut adalah contoh sederhana dari tabel HTML: ```html <table > <tr > <th >Header 1 </th > <th >Header 2 </th > </tr > <tr > <td >Baris 1, Kolom 1 </td > <td >Baris 1, Kolom 2 </td > </tr > <tr > <td >Baris 2, Kolom 1 </td > <td >Baris 2, Kolom 2 </td > </tr > </table > ``` Dalam contoh di atas, kita telah membuat tabel dengan dua kolom dan dua baris. Baris tabel (` <tr >`) digunakan untuk membuat baris baru, sedangkan sel tabel (` <td >`) digunakan untuk membuat sel individu dalam tabel. Header tabel (` <th >`) digunakan untuk menambah ke tabel. Langkah 2: Menambahkan Gaya CSS Setelah struktur tabel HTML telah ditulis, langkah selanjutnya adalah menambahkan gaya CSS untuk membuat tabel terlihat lebih menarik. Berikut adalah contoh bagaimana kita dapat menambahkan gaya CSS ke tabel HTML: ```html <style > table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid black; padding: 8px; text-align: left; } tr:nth-child(even) { background-color: #f2f2f2; } </style > <table > <tr > <th >Header 1 </th > <th >Header 2 </th > </tr > <tr > <td >Baris 1, Kolom 1 </td > <td >Baris 1, Kolom 2 </td > </tr > <tr > <td >Baris 2, Kolom 1 </td > <td >Baris 2, Kolom 2 </td > </tr > </table > ``` Dalam contoh di atas, kita telah menambahkan gaya CSS untuk tabel HTML. Kita telah menambahkan lebar penuh ke tabel, menghapus batas ganda, menambahkan batas 1px ke setiap sel, dan mengatur penyesuaian teks ke kiri. Selain itu, kita juga telah menambahkan warna latar belakang abu-abu pada baris ganjil untuk membedakannya dari baris lainnya. Langkah 3: Menambahkan Data ke Tabel Setelah tabel HTML dan gaya CSS telah ditambahkan, langkah selanjutnya adalah menambahkan data ke tabel. Ini dapat dilakukan dengan menambahkan sel baru atau mengedit sel yang ada. Berikut adalah contoh bagaimana kita dapat menambahkan data ke tabel: ```html <table > <tr > <th >Header 1 </th > <th >Header 2 </th > </tr > <tr > <td >Baris 1, Kolom 1 </td > <td >Baris 1, Kolom 2 </td > </tr > <tr > <td >Baris 2, Kolom 1 </td > <td >Baris 2, Kolom 2 </td > </tr > <tr > <td >Baris 3, Kolom 1 </td > <td >Baris 3, Kolom 2 </td > </tr > </table > ``` Dalam contoh di atas, kita telah menambahkan sel baru ke tabel dengan menambahkan baris baru (` <tr >`) dan sel (` <td >`). Kesimpulan: Membuat tabel di dalam HTML adalah keterampilan penting bagi pengembang web. Dengan menggunakan kode HTML dasar dan CSS, kita dapat membuat tabel yang terorganisir dan mudah dibaca. Dengan mengikuti langkah-langkah di atas, Anda dapat membuat tabel yang sesuai