.
Berikut ini adalah contoh hasilnya (silakan di refresh, untuk melihat perubahan warna dan padding yang random pada tabel berikut ini.
Data Besi UNP

Data Besi UNP

Ukuran	Berat	Harga Baru
UNP 50 x 32 x 5 x 6M (B)	15.00 kg	Rp 228.850
UNP 50 x 32 x 5 x 6M (STD)	17.00 kg	Rp 261.900
UNP 65 x 38 x 5 x 6M (STD)	23.00 kg	Rp 352.000
UNP 80 x 45 x 6 x 6M (STD)	27.00 kg	Rp 380.800
UNP 80 x 45 x 6 x 6M (SNI)	53.00 kg	Rp 646.700
UNP 100 x 50 x 5 x 6M (B)	36.00 kg	Rp 520.300
UNP 100 x 50 x 5 x 6M (STD)	48.00 kg	Rp 645.700
UNP 100 x 50 x 5 x 6M (SNI)	56.00 kg	Rp 708.500
UNP 120 x 55 x 6 x 6M (STD)	60.00 kg	Rp 948.100
UNP 120 x 55 x 7 x 6M (SNI)	81.00 kg	Rp 1.036.900
UNP 125 x 65 x 5 x 6M (STD)	68.00 kg	Rp 955.500
UNP 150 x 75 x 6 x 6M (B)	78.00 kg	Rp 1.326.100
UNP 140 x 55 x 5 x 6M (STD)	68.00 kg	Rp 1.052.000
UNP 150 x 75 x 7 x 6M (STD)	98.00 kg	Rp 1.607.300
UNP 150 x 75 x 7 x 6M (SNI)	112.00 kg	Rp 1.730.500
UNP 200 x 80 x 7 x 6M (STD)	118.00 kg	Rp 2.035.600
UNP 200 x 80 x 8 x 6M (SNI)	148.00 kg	Rp 2.331.100
UNP 250 x 90 x 9 x 6M (SNI)	208.00 kg	Rp 3.692.100

. Dan berikut ini adalah penjelasan kode-nya.

Penjelasan Kode

Penjelasan Kode

Fungsi Utama dan Variabel

1. Fungsi getRandomColor(min, max):

Tujuan: Menghasilkan warna RGB acak dalam rentang nilai yang ditentukan (min hingga max).

Cara Kerja:

return `rgb(${Math.floor(Math.random() * (max - min + 1)) + min}, 
            ${Math.floor(Math.random() * (max - min + 1)) + min}, 
            ${Math.floor(Math.random() * (max - min + 1)) + min})`;

Menggunakan Math.random() untuk menghasilkan nilai acak antara 0 dan 1.
Math.floor() digunakan untuk membulatkan nilai ke bawah, memastikan hasilnya adalah angka bulat.
Menghitung tiga komponen warna (R, G, B) secara independen, lalu menyusunnya dalam format rgb(r, g, b).

2. Variabel randomPadding:

Tujuan: Menghasilkan nilai padding acak antara 2px hingga 18px.

const randomPadding = Math.floor(Math.random() * 17) + 2;

3. Variabel Warna:

headerColor: Warna gelap untuk elemen <th> (header tabel), menggunakan rentang RGB antara 50 hingga 105.
oddColor dan evenColor: Warna cerah untuk baris ganjil dan genap, menggunakan rentang RGB antara 180 hingga 255.

Penerapan Gaya pada Elemen

1. Pewarnaan Header (<th>):

Header diberi warna acak dari headerColor:

document.querySelectorAll('.ot thead th').forEach(th => th.style.backgroundColor = headerColor);

2. Pewarnaan Baris (<tr>):

Baris ganjil dan genap diberi warna yang berbeda:

document.querySelectorAll('.ot tbody tr').forEach((row, index) => {
    row.style.backgroundColor = index % 2 === 0 ? oddColor : evenColor;
});

3. Padding untuk Semua Sel (<td> dan <th>):

Padding diterapkan secara uniform dengan nilai acak:

document.querySelectorAll('.ot td, .ot th').forEach(cell => {
    cell.style.paddingTop = `${randomPadding}px`;
    cell.style.paddingBottom = `${randomPadding}px`;
});

Alur Eksekusi

Fungsi getRandomColor digunakan untuk menghitung tiga warna: Header, baris ganjil, dan baris genap.
Padding acak dihitung satu kali dan diterapkan ke semua sel.
Pewarnaan diterapkan ke header, baris, dan padding ke semua elemen tabel yang sesuai.

Hasil Akhir

Header (<th>): Mempunyai warna gelap lembut dengan padding atas dan bawah yang seragam.
Baris Ganji/Genap (<tr>): Diwarnai secara acak dengan warna lembut untuk membedakan baris.
Sel (<td> dan <th>): Memiliki padding seragam untuk seluruh tabel.

Kode ini menghasilkan tabel yang tampak menarik dengan sedikit variasi gaya yang dinamis.

Berikut adalah contoh kode lengkapnya:

<style>
table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
}
th, td {
    padding: 2px;
    text-align: left;
    border: 1px solid #ddd;
}
th {
    text-align: center;
    background-color: #0056b3;
    color: #fff;
}
tr:nth-child(even) {
    background-color: #f2f2f2;
}
td:nth-child(2), td:nth-child(3) {
    text-align: right;
    padding-right: 13px;
}
td:nth-child(1) {
    padding-left: 13px;
}
tr:hover {
    background-color: #eaf2ff;
}
</style>

<title>Data Besi UNP</title>
<h1>Data Besi UNP</h1>
<div style="border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px; margin-top: 20px; overflow: auto;">
    <table class="ot">
        <thead>
            <tr>
                <th><b>Ukuran</b></th>
                <th><b>Berat</b></th>
                <th><b>Harga Baru</b></th>
            </tr>
        </thead>
        <tbody>
            <tr><td>UNP 50 x 32 x 5 x 6M (B)</td><td>15.00 kg</td><td>Rp 228.850</td></tr>
            <tr><td>UNP 50 x 32 x 5 x 6M (STD)</td><td>17.00 kg</td><td>Rp 261.900</td></tr>
            ...
        </tbody>
    </table>
</div>

<script>
function getRandomColor(min, max) {
    return `rgb(${Math.floor(Math.random() * (max - min + 1)) + min}, ${Math.floor(Math.random() * (max - min + 1)) + min}, ${Math.floor(Math.random() * (max - min + 1)) + min})`;
}
const randomPadding = Math.floor(Math.random() * 17) + 2; 
const headerColor = getRandomColor(50, 105);
const oddColor = getRandomColor(180, 255);
const evenColor = getRandomColor(180, 255);
document.querySelectorAll('.ot thead th').forEach(th => th.style.backgroundColor = headerColor);
document.querySelectorAll('.ot tbody tr').forEach((row, index) => {
    row.style.backgroundColor = index % 2 === 0 ? oddColor : evenColor;
});
document.querySelectorAll('.ot td, .ot th').forEach(cell => {
    cell.style.paddingTop = `${randomPadding}px`;
    cell.style.paddingBottom = `${randomPadding}px`;
});
</script>