Membuat Table background Pelangi dengan CSS

Pada Kesempatan ini kita akan belajar membuat table dengan warna background berwarna warni yang kita susun sesuai dengan urutan warna pelangi. Pembuatan tabel dengan background warna pelangi ini hanya menggunakan HTML-CSS yang digabung dalam 1 File HTML.

Koding untuk Table

<table>
<tbody>
<tr>
    <th>Baris 1</th>
    <th>Kolom 2</th>
    <th>Kolom 3</th>
    <th>Kolom 4</th>
    <th>Kolom 5</th>
    <th>Kolom 6</th>
    <th>Kolom 7</th>
    <th>Kolom 8</th>
    <th>Kolom 9</th>
</tr>
<tr>
    <td>Baris 2</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>

</tr>
<tr>
    <td>Baris 3</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>

</tr>
<tr>
    <td>Baris 4</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
</tr>
<tr>
    <td>Baris 5</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
    <td>isi</td>
</tr>
</tbody>
</table>

Koding CSS Warna background Pelangi

:

body{
    font-family:arial,verdana;
    font-size:12px;
}
 
table, th, td {
    border-collapse: collapse;
}

th,td{
    padding:5px 10px;
    text-align:center;
}
 
/* Warna Border */
table,td,th {border:1px solid #ddd;}

/* Efek Rainbow */

/* Warna Pelangi Header (lebih Tua) */
table th:nth-child(1){
    background:#d00; /* Kolom 1 */
}

table th:nth-child(2){
    background:#d60; /* Kolom 2*/
}

table th:nth-child(3){
    background:#dd0; /* Kolom 3*/
}

table th:nth-child(4){
    background:#0d0; /* Kolom 4 */
}

table th:nth-child(5){
    background:#0d6; /* Kolom 5*/
}

table th:nth-child(6){
    background:#0dd; /* Kolom 5*/
}

table th:nth-child(7){
    background:#06d; /* Kolom 7*/
}

table th:nth-child(8){
    background:#d0d; /* Kolom 8*/
}

table th:nth-child(9){
    background:#d06; /* Kolom 9*/
}


/* Content Table (Warna Lebih Terang) */
table td:nth-child(1){
    background:#f33; /* Kolom 1 */
}

table td:nth-child(2){
    background:#f73; /* Kolom 2 */
}

table td:nth-child(3){
    background:#ff3; /* Kolom 3 */
}

table td:nth-child(4){
    background:#3f3; /* Kolom 4 */
}

table td:nth-child(5){
    background:#3f7; /* Kolom 5*/
}

table td:nth-child(6){
    background:#3ff; /* Kolom 6*/
}

table td:nth-child(7){
    background:#37f; /* Kolom 7*/
}

table td:nth-child(8){
    background:#f3f; /* Kolom 8*/
}

table td:nth-child(9){
    background:#f37; /* Kolom 9*/
}

[button title=”DEMO” icon=”icon-download” icon_position=”left” link=”https://webdesign.tutorials.id/demo/table-rainbow.html” target=”_blank” color=”” font_color=”” large=”0″ class=”” download=””]

(Visited 248 times, 3 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *