Cara Membuat Tabel Sederhana di Postingan Blog

Tutorial kali ini agak berbeda dengan sebelumnya, yang berjudul Cara Membuat Tabel Keren Responsive di Blogger.

Kali ini tabel yang akan kita buat cukup sederhana. Contoh tabelnya:

Karena teksnya panjang dan luas ke kanan, maka bisa digeser dengan bantuan kode css: overflow: auto

Kode tabelnya:

<style>
   .table {overflow: auto; white-space: nowrap}
   table {background:#19AF9B;width:100%}
   th,td {height:20px;padding:5px;border:1px solid #fff;background:#19AF9B;color:#fff}
   th {background:#0B8474;color:white}
</style>
<div class="table">
  <table>
    <tbody>
  <tr>
<th>No.</th>
    <th>Nama Barang</th>
    <th>Jumlah</th>
    <th>Keterangan</th>
</tr>
<tr>
<td>1</td>
    <td>Komputer (PC)</td>
    <td>24</td>
    <td>2 dari 24 komputer belum diinstall ulang</td>
</tr>
<tr>
<td>2</td>
    <td>Laptop (Netbook/Notebook)</td>
    <td>48</td>
    <td>6 Windows & 42 Linux Backtrack</td>
</tr>
<tr>
<td>3</td>
    <td>AC</td>
    <td>12</td>
    <td>Panasonic 4, Midea 3, dan Daikin 5</td>
</tr>
<tr>
<td>4</td>
    <td>TV LCD</td>
    <td>2</td>
    <td>55" OLED S85F 4K Samsung Vision AI Smart TV (2025) and Galaxy Buds3 Pro</td>
</tr>
     </tbody>
  </table>
</div>

1. Buat postingan blog seperti biasa

2. Pada mode tulis HTML, copas kode di atas, atur sedemikian rupa 😁

3. Jika ragu, klik tombol preview. Kalau sudah oke, langsung saja klik publikasikan artikel

Teman2 bisa mengeditnya sesuka hati. Kreasikan dan sesuaikan dengan selera teman2.

No.	Nama Barang	Jumlah	Keterangan
1	Komputer (PC)	24	2 dari 24 komputer belum diinstall ulang
2	Laptop (Netbook/Notebook)	48	6 Windows & 42 Linux Backtrack
3	AC	12	Panasonic 4, Midea 3, dan Daikin 5
4	TV LCD	2	55" OLED S85F 4K Samsung Vision AI Smart TV (2025) and Galaxy Buds3 Pro

O iya, untuk warnanya ada di kode yang sudah ditandai. Bisa diubah/diganti! 😁 Manfaatkan situs web HTML color codes untuk mendapatkan warna HTML yang diinginkan.