CSS Tips of the Day: Text-Shadow sebagai Solusi Alternatif Font-Weight yang Tidak Berfungsi pada Tabel HTML (Sumber: ChatGPT)

Berikut ini penjelasan ulang yang difokuskan pada alternatif penggunaan text-shadow ketika font-weight tidak berfungsi — khususnya dalam konteks penebalan teks pada header/judul kolom tabel HTML.

---

🧩 Masalah Umum:

Pada beberapa kasus, font-weight: bold; tidak memberikan efek tebal yang terlihat jelas, terutama pada:

• Tabel dengan font yang tipis

• Font yang tidak memiliki varian bold (misalnya font custom atau icon font)

• Tampilan layar dengan render tipis (LCD low-res, mobile)

• Penggunaan font-weight yang diabaikan oleh browser atau CSS reset

Contoh HTML:

<table>
  <thead>
    <tr>
      <th>Nama</th>
      <th>Umur</th>
    </tr>
  </thead>
</table>

th {
  font-weight: bold; /* Kadang terlihat masih tipis */
}

---

✅ Solusi Alternatif: text-shadow untuk Efek Tebal

Untuk menebalkan teks secara visual, kita bisa menggunakan text-shadow sebagai simulasi efek bold, dengan cara menambahkan bayangan halus di sekitar huruf:

th {
  font-weight: normal; /* atau tetap bold */
  text-shadow: 
    0.5px 0 currentColor,
   -0.5px 0 currentColor;
}

🔍 Penjelasan:

• 0.5px 0 dan -0.5px 0: Bayangan ke kiri dan kanan

• currentColor: Menggunakan warna teks saat ini, sehingga tidak terlihat sebagai "bayangan", tapi sebagai penebalan sisi huruf

---

🎨 Variasi Penebalan (Lebih Tebal)

Untuk efek yang lebih nyata:

th {
  font-weight: normal;
  text-shadow: 
    0.6px 0 currentColor,
   -0.6px 0 currentColor,
    0 0.6px currentColor,
    0 -0.6px currentColor;
}

Ini menambahkan efek di keempat arah (kiri, kanan, atas, bawah) seperti membuat outline ringan.

---

💡 Tips Tambahan

1. Pastikan ukuran font cukup besar agar efek text-shadow terlihat bagus (idealnya di atas 12px).

2. Gunakan warna kontras tinggi antara teks dan background agar penebalan lebih efektif.

3. Bila memungkinkan, gunakan font yang memang punya varian bold (Google Fonts seperti Roboto, Poppins, Inter mendukung ini).

---

📌 Contoh Lengkap

<style>
  table {
    border-collapse: collapse;
  }

  th {
    padding: 8px 12px;
    font-size: 14px;
    font-weight: normal;
    text-shadow: 
      0.6px 0 currentColor,
     -0.6px 0 currentColor,
      0 0.6px currentColor,
      0 -0.6px currentColor;
    text-align: left;
    background-color: #f4f4f4;
  }
</style>

<table>
  <thead>
    <tr>
      <th>Nama</th>
      <th>Umur</th>
      <th>Alamat</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Rani</td>
      <td>25</td>
      <td>Bandung</td>
    </tr>
  </tbody>
</table>

---

🚫 Kapan tidak disarankan pakai text-shadow?

• Jika teks perlu tetap tajam dan bersih

• Pada tampilan mobile kecil (bisa tampak buram)

• Bila browser performance penting (efek visual sedikit memperberat render)

---

🎯 Kesimpulan

Gunakan text-shadow sebagai solusi alternatif untuk menebalkan teks header tabel ketika:

• font-weight tidak memberi efek yang cukup tebal

• Font yang dipakai tidak punya varian bold

• Anda ingin kontrol visual lebih tinggi atas tampilan teks

Namun, pastikan penggunaannya sesuai konteks desain dan keterbacaan.