Cara Membuat Tabel Warna Otomatis menggunakan (HTML + JavaScript)

🧩 Cara Membuat Tabel Warna Otomatis (HTML + JavaScript)

Tentu anda semua sudah tidak asing lagi dengan kode kode warna html yaitu sebagai bagian penting dalam dunia desain website dan pengembangan tampilan untuk antarmuka modern blog dan website itu. Selain itu anda pun pasti sudah sering menemukan hampir di semua blog tutorial selalu menyediakan list / daftar kode warna tersebut yang biasanya di tampilkan di dalam tabel kode warna HTML, Contoh seperti pada halaman ini Tabel Kode Warna HTML Lengkap

Dan di artikel ini saya ingin berbagi cara membuat tabel kode warna tersebut secara otomatis hanya dengan menggunakan teknik looping javascript yang nanti akan di panggil dengan ID html. Dengan kata lain tabel warna otomatis ini dalah tabel yang dibuat secara dinamis menggunakan JavaScript untuk menampilkan daftar warna tanpa menulis satu per satu di HTML.

Cocok untuk: tool desain, referensi warna, UI developer, dan website edukasi.

⚙️ Konsep Dasar

• Menggunakan array untuk menyimpan data warna
• Looping dengan JavaScript
• Menampilkan hasil ke tabel HTML

Langkah Cara pembuatan tabel warna

Pilih tempat dimana tabel warna ini mau di tampilkan, saya contohkan di bagian halaman status di blog anda

Masuk ke Dashboard, pilih tab halaman lalu klik halaman baru atau tekan tanda (+)

Pilih editor HTML bukan (compose/text)

Salin dan tempel kode 🧱 Struktur HTML ini pada editor postingan anda

📌 HTML & CSS

</>

<table> <thead> <tr> <th>No</th> <th>Nama Warna</th> <th>Kode</th> <th>Preview</th> </tr> </thead> <tbody id="colorTable"></tbody> </table> <style> .color-box { width: 100%; height: 25px; border-radius: 5px; } table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ddd; padding: 8px; text-align: center; } </style>

Safelink-aza

lalu tambahkan ⚡ JavaScript Otomatis ini dibawahnya, atau Rekomendasibisa di simpan di dalam template sebelum tag penutup </body>

📌 Javascript nya

</>

<script> let colors = [ { name: "Merah", code: "#ff0000" }, { name: "Hijau", code: "#00ff00" }, { name: "Biru", code: "#0000ff" }, { name: "AliceBlue", code: "#F0F8FF"}, { name: "AntiqueWhite", code: "#FAEBD7"}, { name: "Aqua", code: "#00FFFF"}, { name: "Aquamarine", code: "#7FFFD4"}, { name: "Azure", code: "#F0FFFF"}, { name: "Beige", code: "#F5F5DC"}, { name: "Black", code: "#000000"}, { name: "Blue", code: "#0000FF"}, { name: "Brown", code: "#A52A2A"}, { name: "Coral", code: "#FF7F50"}, { name: "Crimson", code: "#DC143C"}, { name: "Cyan", code: "#00FFFF"}, { name: "Gold", code: "#FFD700"}, { name: "Gray", code: "#808080"}, { name: "Green", code: "#008000"}, { name: "HotPink", code: "#FF69B4"}, { name: "Indigo", code: "#4B0082"}, { name: "Khaki", code: "#F0E68C"}, { name: "Lime", code: "#00FF00"}, { name: "Magenta", code: "#FF00FF"}, { name: "Navy", code: "#000080"}, { name: "Orange", code: "#FFA500"}, { name: "Pink", code: "#FFC0CB"}, { name: "Purple", code: "#800080"}, { name: "Red", code: "#FF0000"}, { name: "Salmon", code: "#FA8072"}, { name: "Silver", code: "#C0C0C0"}, { name: "Teal", code: "#008080"}, { name: "White", code: "#FFFFFF"}, { name: "Yellow", code: "#FFFF00"} ]; let table = document.getElementById("colorTable"); colors.forEach((c, i) => { table.innerHTML += ` <tr> <td>${i + 1}</td> <td>${c.name}</td> <td>${c.code}</td> <td><div class="color-box" style="background:${c.code}"></div></td> </tr> `; }); </script>

Safelink-aza

Lalu publish/publikasikan postingan.

Jika ingin menambah warna terlebih dulu sebelum di publish, Anda bisa menambahkan kode warna di bagian yang saya tandai di atas

🎨 Contoh Hasil Tabel Sederhana

No	Nama Warna	Kode	Preview

Bagaimana mudahkan membuat tabel kode warna HTML secara otomstis ini?. jika ada yang kurang di mengerti ataupun kode tidak berfungsi, bisa kita diskusikan di kolom komentsr ya.

🚀 Kesimpulan

Dengan kombinasi HTML, CSS, dan JavaScript, anda bisa membuat tabel warna secara otomatis yang fleksibel, dinamis, dan mudah dikembangkan menjadi abel warna profesional.

Pertanyaan Umum (FAQ)

Bagaimana cara membuat tabel warna otomatis di HTML?

Kamu bisa membuat tabel kosong di HTML, lalu mengisinya secara otomatis menggunakan JavaScript dari array data warna..

Kenapa warna bisa muncul otomatis di kolom preview?

Karena JavaScript memasukkan nilai kode warna (hex) langsung ke CSS lewat style..

blogspot Tutorial