Cara Membuat Tabel Dalam Postingan Blog

Admin Pengkaji Seo Pada April 10, 2026

contoh tabel


Hallo teman-teman semua lama tak bersua di Blog ini karena kendala dan tenang karena kini saya kembali lagi untuk memberikan kajian-kajian tentang Tutorial membuat Tabel dalam postingan blog.

Pengaturan Tanam atau Berulang Setiap Post

Tanam yang dimaksud menambahkan css pada pengaturan tema atau setiap membuat postingan baru menginclude kan css.

Mode Mode Tanam css

Pada tema edit html dan tambahkan kode css berikut diatas ]]></b:skin>.


/* Kode CSS otomatis berwarna */
.table-container {
  overflow-x: auto;
  margin: 20px 0;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

/* Desain Tabel */
.fan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
  background: #ffffff;
}

.fan-table th {
  background-color: #f8fafc;
  color: var(--primary-color);
  font-weight: 700;
  padding: 12px 15px;
  border-bottom: 2px solid #f1f5f9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fan-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #f1f5f9;
  color: #475569;
}

/* Warna Baris Selang-Seling */
.fan-table tr:nth-child(even) {
  background-color: #fcfdfe;
}

/* Hover Effect */
.fan-table tr:hover {
  background-color: rgba(13, 148, 136, 0.05); /* Warna Teal transparan */
}

/* Baris Terakhir tanpa Border */
.fan-table tr:last-child td {
  border-bottom: none;
}

.table-title {
  caption-side: top;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  color: var(--primary-color);
  padding: 15px 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 3px solid var(--accent-color); /* Garis Teal di bawah tajuk */
  margin-bottom: 5px;
}

Secara default css diatas akan menjadi style table default anda.

Mode Post Artikel

Sebenernya ini kelanjutan dari mode tanam, pada pembuatan artikel baru tinggal panggil css dengan callback html dibawah ini, gunakan mode html saat menginput.


<div class="table-container">
  <table class="fan-table">
    <caption class="table-title">Daftar Calon Pengantin</caption>
    
    <thead>
      <tr>
        <th>No</th>
        <th>Nama Mempelai Pria</th>
        <th>Nama Mempelai Wanita</th>
        <th>Tanggal Pernikahan</th>
        <th>Lokasi Acara</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>01</td>
        <td>Andi Setiawan</td>
        <td>Siti Aminah</td>
        <td>20 Mei 2026</td>
        <td>Gedung Serbaguna, Jakarta</td>
      </tr>
      <tr>
        <td>02</td>
        <td>Budi Pratama</td>
        <td>Larasati Putri</td>
        <td>15 Juni 2026</td>
        <td>Masjid Agung, Bandung</td>
      </tr>
      <tr>
        <td>03</td>
        <td>Dedi Kurniawan</td>
        <td>Dewi Lestari</td>
        <td>07 Juli 2026</td>
        <td>Hotel Melati, Surabaya</td>
      </tr>
    </tbody>
  </table>
</div>

Contoh Table .1

Daftar Calon Pengantin
No Nama Mempelai Pria Nama Mempelai Wanita Tanggal Pernikahan Lokasi Acara
01 Andi Setiawan Siti Aminah 20 Mei 2026 Gedung Serbaguna, Jakarta
02 Budi Pratama Larasati Putri 15 Juni 2026 Masjid Agung, Bandung
03 Dedi Kurniawan Dewi Lestari 07 Juli 2026 Hotel Melati, Surabaya

Penggabungan jika tidak ingin table tersebut tidak ditanam, letakkan kode dibawah ini langsung pada artikel baru tanpa edit html pada tema.


<style>
.table-container {
  overflow-x: auto;
  margin: 20px 0;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.fan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
  background: #ffffff;
}

.fan-table th {
  background-color: #f8fafc;
  color: var(--primary-color);
  font-weight: 700;
  padding: 12px 15px;
  border-bottom: 2px solid #f1f5f9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fan-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #f1f5f9;
  color: #475569;
}

.fan-table tr:nth-child(even) {
  background-color: #fcfdfe;
}

.fan-table tr:hover {
  background-color: rgba(13, 148, 136, 0.05); /* Warna Teal transparan */
}

.fan-table tr:last-child td {
  border-bottom: none;
}

.table-title {
  caption-side: top;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  color: var(--primary-color);
  padding: 15px 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 3px solid var(--accent-color); /* Garis Teal di bawah tajuk */
  margin-bottom: 5px;
}
</style>

<div class="table-container">
  <table class="fan-table">
    <caption class="table-title">Daftar Calon Pengantin</caption>
    
    <thead>
      <tr>
        <th>No</th>
        <th>Nama Mempelai Pria</th>
        <th>Nama Mempelai Wanita</th>
        <th>Tanggal Pernikahan</th>
        <th>Lokasi Acara</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>01</td>
        <td>Andi Setiawan</td>
        <td>Siti Aminah</td>
        <td>20 Mei 2026</td>
        <td>Gedung Serbaguna, Jakarta</td>
      </tr>
      <tr>
        <td>02</td>
        <td>Budi Pratama</td>
        <td>Larasati Putri</td>
        <td>15 Juni 2026</td>
        <td>Masjid Agung, Bandung</td>
      </tr>
      <tr>
        <td>03</td>
        <td>Dedi Kurniawan</td>
        <td>Dewi Lestari</td>
        <td>07 Juli 2026</td>
        <td>Hotel Melati, Surabaya</td>
      </tr>
    </tbody>
  </table>
</div>

Output dari tanam maupun langsung post sama akan menghasilkan contoh table .1 seperti diatas.

Untuk menambah baris baru untuk masing-masing kolom tambahkan kode pada kedalam <tbody> mengikuti urutan.


      <tr>
        <td>04</td>
        <td>Wahyu Setiawan</td>
        <td>Ani Aminah</td>
        <td>10 Juli 2026</td>
        <td>Gedung Jasmani, Jakarta</td>
      </tr>

Contoh Table .2

Daftar Absensi Siswa
No NIS/NISN Nama Lengkap L/P Kehadiran Keterangan
01 2223001 Ahmad Fathoni L Hadir Tepat Waktu
02 2223002 Bunga Citra Lestari P Izin Acara Keluarga
03 2223003 Deni Ramdani L Alfa -
04 2223004 Eka Putri Wahyuni P Sakit Surat Dokter

HTML


<div class="table-container">
  <table class="fan-table">
    <caption class="table-title">Daftar Absensi Siswa</caption>
    
    <thead>
      <tr>
        <th>No</th>
        <th>NIS/NISN</th>
        <th>Nama Lengkap</th>
        <th>L/P</th>
        <th class="txt-center">Kehadiran</th>
        <th>Keterangan</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>01</td>
        <td>2223001</td>
        <td>Ahmad Fathoni</td>
        <td>L</td>
        <td class="txt-center"><span class="status-hadir">Hadir</span></td>
        <td>Tepat Waktu</td>
      </tr>
      <tr>
        <td>02</td>
        <td>2223002</td>
        <td>Bunga Citra Lestari</td>
        <td>P</td>
        <td class="txt-center"><span class="status-izin">Izin</span></td>
        <td>Acara Keluarga</td>
      </tr>
      <tr>
        <td>03</td>
        <td>2223003</td>
        <td>Deni Ramdani</td>
        <td>L</td>
        <td class="txt-center"><span class="status-alfa">Alfa</span></td>
        <td>-</td>
      </tr>
      <tr>
        <td>04</td>
        <td>2223004</td>
        <td>Eka Putri Wahyuni</td>
        <td>P</td>
        <td class="txt-center"><span class="status-sakit">Sakit</span></td>
        <td>Surat Dokter</td>
      </tr>
    </tbody>
  </table>
</div>

Contoh Table .3

Daftar Harga Barang Terbaru
No Nama Produk Kategori Harga Satuan Stok
01 Template Blogger Premium Web Design Rp 250.000 Tersedia
02 Jasa Redesign Landing Page Service Rp 500.000 Tersedia
03 E-Book SEO Blogger E-Book Rp 75.000 Habis

HTML


<div class="table-container">
  <table class="fan-table">
    <caption class="table-title">Daftar Harga Barang Terbaru</caption>
    
    <thead>
      <tr>
        <th>No</th>
        <th>Nama Produk</th>
        <th>Kategori</th>
        <th>Harga Satuan</th>
        <th>Stok</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>01</td>
        <td>Template Blogger Premium</td>
        <td>Web Design</td>
        <td class="txt-price">Rp 250.000</td>
        <td><span class="status-ready">Tersedia</span></td>
      </tr>
      <tr>
        <td>02</td>
        <td>Jasa Redesign Landing Page</td>
        <td>Service</td>
        <td class="txt-price">Rp 500.000</td>
        <td><span class="status-ready">Tersedia</span></td>
      </tr>
      <tr>
        <td>03</td>
        <td>E-Book SEO Blogger</td>
        <td>E-Book</td>
        <td class="txt-price">Rp 75.000</td>
        <td><span class="status-empty">Habis</span></td>
      </tr>
    </tbody>
  </table>
</div>

Demikianlah sekiranya dapat membantu, happy coding!
Kategori:

Artikel Terkait:

Komentar

Posting Komentar