[HTML&CSS] Cara Membuat Tabel Zebra & Penjelasan

Untuk postingan ini saya akan menunjukkan cara membuat label zebra ataupun berwarna dengan html dan css sederhana dan tentunya disertai penjelasan lengkap.
So, langsung saja ikuti tutorialnya dibawah ini:

Langkah pertama tambahkan CSSnya terlebih dahulu

Untuk cara penempatan CSS untuk blogger silahkan lihat disini

Copy dan Paste kode CSS berikut

<style>
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 16px;
  font-family: comic sans;
}

th{
  background-color: ;
  }
tr:nth-child(even) {
  background-color: #f2f2f2;
}
</style>

---

Setelah selesai menambahkan CSS, sekarang tambahkan kode HTML

Copy dan Paste HTML berikut

<table>
  <tr>
    <th>Tipe Label 1</th>
    <th>Tipe Label 2</th>
    <th>Tipe Label 2</th>
  </tr>
  <tr>
    <td>Isi Label 1</td>
    <td>Isi Label 2</td>
    <td>Isi Label 3</td>
  </tr>
  <tr>
    <td>Isi Label 1</td>
    <td>Isi Label 2</td>
    <td>Isi Label 3</td>
  </tr>
  <tr>
    <td>Isi Label 1</td>
    <td>Isi Label 2</td>
    <td>Isi Label 3</td>
  </tr>
</table>

Dan hasilnya akan seperti ini

Tipe Label 1	Tipe Label 2	Tipe Label 2
Isi Label 1	Isi Label 2	Isi Label 3
Isi Label 1	Isi Label 2	Isi Label 3
Isi Label 1	Isi Label 2	Isi Label 3

---

Pembahasan dan Modifikasi

---

Bongkar CSS

Penjelasan singkat saya buat dalam gambar, klik gambar dibawah ini:

Dan Mari Kita Modifikasi

Saya merubah CSS menjadi seperti ini:

<style>
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 5px solid #C71585;
}

th, td {
  text-align: left;
  padding: 25px;
  font-family: comic sans ms;
}

th{
  background-color: #9ACD32;
  }
tr:nth-child(even) {
  background-color: #00BFFF;
}
</style>

Dan Jadinya seperti ini:

Agak norak yah warnanya, tapi bodo amat ini cuma contoh, dan dibawah ini penjelasannya

Kalau Untuk text-align, Kalian bisa pilih, antara Left (rata kiri), Center (rata tengah), Right (rata kanan).

Perbandingan

---

Berikut Warna Yang Sering Saya Gunakan

Nama Warna	HEX (Kode Warna)	Warna
WhiteSmoke	#F5F5F5
YellowGreen	#9ACD32
AntiqueWhite	#FAEBD7
AliceBlue	#F0F8FF
Aqua	#00FFFF
Aquamarine	#7FFFD4
Beige	#F5F5DC
DarkTurquoise	#00CED1
DeepSkyBlue	#00BFFF
DeepPink	#FF1493
DimGrey	#696969
Grey	#808080
LawnGreen	#7CFC00
LightSkyBlue	#87CEFA
MediumVioletRed	#C71585
MediumPurple	#9370DB
MediumSpringGreen	#00FA9A

Share this post