CARA MEMBUAT TABEL DI CSS

CSS atau Cascading Style Sheets adalah bahasa pemrograman yang digunakan untuk mengatur tampilan dan layout halaman web. Salah satu elemen yang sering digunakan dalam desain web adalah tabel. Berikut ini akan kita bahas cara membuat tabel di CSS.

Persiapan Sebelum Membuat Tabel di CSS

Sebelum membuat tabel di CSS, ada beberapa hal yang perlu kamu miliki yaitu:

1. Editor teks, seperti Notepad++ atau Sublime Text.
2. Pengetahuan dasar tentang HTML. HTML akan digunakan untuk menentukan struktur dasar tabel, sementara CSS digunakan untuk mengatur tampilannya.

Membuat Struktur Tabel dengan HTML

Pertama-tama, kamu perlu membuat struktur tabel dengan HTML. Berikut adalah contoh struktur 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>
</table>

Mendesain Tampilan Tabel dengan CSS

Setelah struktur tabel dibuat, selanjutnya kita akan mendesain tampilan tabel menggunakan CSS. Berikut adalah contoh kode CSS untuk desain tabel:

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

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

th {
  background-color: #f2f2f2;
}

Penjelasan Kode CSS

1. Selector table

Selector table digunakan untuk mengatur tampilan keseluruhan tabel. Properti width: 100%; digunakan untuk membuat lebar tabel mengisi seluruh lebar halaman atau elemen pembungkusnya. Properti border-collapse: collapse; digunakan untuk menghapus jarak antara batas sel.

2. Selector th, td

Selector th, td digunakan untuk mengatur tampilan header dan sel tabel. Properti border: 1px solid black; digunakan untuk membuat batas sel berukuran 1 piksel dan berwarna hitam. Properti padding: 15px; digunakan untuk memberikan ruang di dalam sel. Properti text-align: left; digunakan untuk mengatur teks diselaras ke kiri.

3. Selector th

Selector th digunakan untuk mengatur tampilan khusus header tabel. Properti background-color: #f2f2f2; digunakan untuk memberikan warna latar belakang pada header tabel.

Dengan mengikuti panduan di atas, kamu sudah bisa membuat tabel di CSS yang sederhana tapi profesional. Selamat mencoba! Jika ada pertanyaan atau kesulitan, silakan ditulis di kolom komentar.