DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja

Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

CARA MEMBUAT TABEL DI CSS

Langkah-langkah mudah dalam membuat tabel di CSS untuk membuat halaman web Anda lebih teratur dan menarik.

Daftar Isi:

Persiapan Sebelum Membuat Tabe...
Membuat Struktur Tabel dengan ...
Mendesain Tampilan Tabel denga...

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.


Daftar newsletter skodev masukkan emailmu untuk dapat informasi menarik dari dunia koding