Membuat Tabel dengan Code CSS

Tabel

Membuat tabel di web atau di blog sangatlah rumit bagi orang awam karena hanya menggandalkan kode dan angka yang sangat rumit untuk membuat ukuran, warna, bentuk dan struktur tabel sangat jauh berbeda ketika membuat tabel di Microsoft Word dan Excel yang begitu mudah

Tabel responsif adalah tabel yang fituristik dapat digeser kekiri dan kekanan untuk menyesuaikan ukurannya dengan lebar jendela browser.

Tabel responsif biasanya digunakan untuk menampilkan data pada perangkat dengan ukuran layar yang berbeda-beda, seperti komputer, laptop, tablet, dan smartphone

kali ini saya akan membuat tiga gaya penulisan tabel yang berbeda-beda hanya dengan menggunakan code css saja, berikut ini tampilannya.

Table Responsive

Nama	Usia	Alamat	E-Mail	Asal	Telepon
John Doe	25	Jl. Merdeka No. 123	jhon@asnasa.com	Cirebon	+62856×××××
Andi suardi	30	Jl. Vilan Intan No. 123	andi@asnasa.com	Cirebon	+62856×××××
Ahmad	20	Jl. Monas Utara No. 456	ahmad@asnasa.com	Cirebon	+62856×××××
Dalbo	21	Jl. Sukses No. 12	dalbo@asnasa.com	Cirebon	+62856×××××
Andi suardi	25	Jl. Vila Intan No. 123	suardi@asnasa.com	Cirebon	+62856×××××
Dullah	20	Jl. Kalidres No. 456	dullah@asnasa.com	Cirebon	+62856×××××

Table Standar

Head	Master	Kepala
Master	Data 2	Pintar 3
Master	Data 2	Pintar 3
Master	Data 2	Pintar 3
Master	Data 2	Pintar 3
Data Master 1	Data 2	Murid Pintar 3
Data Master 1	Data 2	Murid Pintar 3

Table Responsive 2

Nama	Email	Domisili	Telepon	Nilai	Langganan
Rain	rain@email.com	Sukabumi	+62852xxxxx	90	Tidak
Yanfei	yanfei@email.com	Liyue	+62852xxxxx	100	Ya
Hayley	hayley@email.com	Jakarta	+62852xxxxx	97	Ya
Natasha	nat@email.com	Cianjur	+62852xxxxx	100	Tidak
Fulan	fulan@email.com	Bandung	+62852xxxxx	60	Tidak

     /* Tabel */

.ps table {
  /* Margin */
  margin: 10px auto;

  /* Font */
  font-size: 14px;
  font-family: var(--fontB);
}

/* Tabel tanpa caption container */
.ps table:not(.tr-caption-container) {
  /* Minimal lebar */
  min-width: 100%;

  /* Border */
  border: 1.5px solid var(--contentL);
  border-radius: 3px;

  /* Overflow */
  overflow: hidden;
}

/* Header tabel */
.ps table:not(.tr-caption-container) th {
  /* Background color */
  background-color: var(--linkC);

  /* Color */
  color: #ffffff;

  /* Padding */
  padding: 10px;

  /* Text alignment */
  text-align: inherit;

  /* Font weight */
  font-weight: bold;

  /* Border */
  border-bottom: 2px double var(--contentL);
}

/* Body tabel */
.ps table:not(.tr-caption-container) td {
  /* Padding */
  padding: 8px;

  /* Whitespace */
  white-space: nowrap;
}

/* Zebra striping */
.ps table:not(.tr-caption-container) tr:nth-child(2n+1) td {
  background-color: var(--waveB);
}

/* Border bawah baris kecuali baris terakhir */
.ps table:not(.tr-caption-container) tr:not(:last-child) td {
  border-bottom: 1px dotted var(--contentL);
}

/* Header table tanpa caption container */
.ps table th {
  /* Padding */
  padding: 10px;

  /* Text alignment */
  text-align: inherit;

  /* Border */
  border-bottom: 2px double var(--contentL);
}

/* Scroll horizontal */
.ps .table {
  display: block;

  /* Scroll vertikal tersembunyi */
  overflow-y: hidden;

  /* Scroll horizontal otomatis */
  overflow-x: auto;

  /* Perilaku scroll halus */
  scroll-behavior: smooth;
}

/* Responsive pada mobile */
@media (max-width: 768px) {
  .ps table {
    /* Lebar penuh */
    width: 100%;
  }
}

Step by step

Berikut adalah langkah-langkah untuk menerapkan kode CSS pada Blogger:

1. Masuk ke akun Blogger Anda
2. Klik tab Menu yang seperti ini
3. Klik Thema
4. lalu Edit HTML Tambahkan Code CSS diatas /*]]>*/</style>
5. Klik Simpan
6. Untuk Melihat hasil akhirnya panggil dengan code Html dengan class table
7. Berikut ini code html, silakan di copy dengan cara double clik pada code

<div class="table">
  <table>
    <thead>
      <tr>
        <th>Nama</th>
        <th>Email</th>
        <th>Domisili</th>
        <th>Telepon</th>
        <th>Nilai</th>
        <th>Langganan</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Rain</td>
        <td>rain@email.com</td>
        <td>Sukabumi</td>
        <td>+62852xxxxx</td>
        <td>90</td>
        <td>Tidak</td>
      </tr>
      <tr>
        <td>Yanfei</td>
        <td>yanfei@email.com</td>
        <td>Liyue</td>
        <td>+62852xxxxx</td>
        <td>100</td>
        <td>Ya</td>
      </tr>
      <tr>
        <td>Hayley</td>
        <td>hayley@email.com</td>
        <td>Jakarta</td>
        <td>+62852xxxxx</td>
        <td>97</td>
        <td>Ya</td>
      </tr>
      <tr>
        <td>Natasha</td>
        <td>nat@email.com</td>
        <td>Cianjur</td>
        <td>+62852xxxxx</td>
        <td>100</td>
        <td>Tidak</td>
      </tr>
      <tr>
        <td>Fulan</td>
        <td>fulan@email.com</td>
        <td>Bandung</td>
        <td>+62852xxxxx</td>
        <td>60</td>
        <td>Tidak</td>
      </tr>
    </tbody>
  </table>
  </div>
  

8. Lalu, Paste dihalaman statis HTML View bukan di Compose View
9. Selamat Mencoba semoga berhasil

Penutup

saya kasih bonus Qoutes semoga kamu tetap semangat.

Setiap orang mungkin bisa menulis kode yang dapat dipahami komputer, jika ada seseorang yang dapat menulis kode yang dapat dipahami manusia, berarti dia benar benar HEBAT

buat perencanaan struktur kode yang akan kamu buat kemudian perhatikan baik-baik banyak bersabar dan terus mencoba gagal coba lagi

Membuat coding pemrogram itu seperti sedang menjelaskan warna kepada orang buta.

Andi Suardi Nasa

---

Baca Juga