CARA MEMBUAT TABEL DI HTML DAN CSS

Membuat tabel di HTML dan CSS adalah salah satu keterampilan dasar dalam web development. Dalam artikel ini, kami akan membahas cara mudah untuk membuat tabel dengan menggunakan HTML dan CSS. Mari kita mulai petualangan coding kita.

Langkah 1: Membuat Tabel di HTML

Membuat tabel di HTML sederhananya melibatkan penggunaan tag <table>, <tr> (table row), <td> (table data) dan <th> (table header).

Mari kita lihat contoh di bawah ini:

<table>
  <tr>
    <th>Nama</th>
    <th>Email</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Joko</td>
    <td>joko@example.com</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Budi</td>
    <td>budi@example.com</td>
    <td>30</td>
  </tr>
</table>

Pada kode di atas, tag <tr> digunakan untuk mendefinisikan baris dalam tabel. Sedangkan tag <th> digunakan untuk mendefinisikan header tabel dan tag <td> untuk mendefinisikan sel dalam tabel.

Langkah 2: Memformat Tabel dengan CSS

Setelah tabel dibuat, kamu bisa menggunakan CSS untuk memberikan gaya dan membuat tabel lebih menarik.

Berikut adalah entri CSS sederhana untuk memformat tabel:

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding: 10px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

Dalam kode CSS di atas, properti border-collapse: collapse; digunakan untuk menghapus jarak antara batas. border: 1px solid black; digunakan untuk membuat batas sel hitam dan tipis. Properti padding: 10px; memberikan ruang di sekitar teks sel, dan text-align: left; mengatur teks di sel ke kiri.

Bagian th { background-color: #f2f2f2; } menetapkan warna latar belakang untuk sel header tabel.

Kesimpulan

Dengan memahami cara membuat tabel di HTML dan CSS, kamu telah mempelajari salah satu keterampilan dasar yang penting dalam web development. Jangan takut untuk bereksperimen dengan kode di atas dan membuat tabelmu sendiri sesuai kebutuhanmu. Selamat belajar dan semoga sukses!