Table (tabel) Kolom Warna-Warni Dengan Tag Col

Kolom Tabel Warna-Warni - Membuat tabel pada web/blog memang rumit tapi bukan berarti susah, banyak web/blog yang menggunakan tabel untuk memajang datanya, dilihat dari tampilannyapun menarik dan bagus-bagus, tampilan tabel menarik dan bagus bisa dibantu dengan CSS untuk memodifikasi tampilannya.

Begitupun dengan yang akan saya share ini, tampilan tabel dengan kolom yang berbeda-beda background warnanya, dalam hal ini hanya menambahkan inline style pada tag col yang merupakan bagian tag pendukung tag html table, dalam hal ini tag col berpadu dengan tag colgroup yang bisa mengelompokan kolom, baik satu kolom ataupun lebih dengan menambahkan atribut span.

Menyambung mengenai cara membuat tabel secara lengkap dengan tag-tag HTML pendukung table.

① Membuat tabel dengan kolom warna warni dengan menggunkan tag col

② Macam Tag pendukung dalam pembuatan table

Tag colgroup merupakan tag html yang mendukung dalam membuat tabel, dengan dipadukan dengan tag col yang bisa memberikan background pada tiap kolom tabel bisa kita buat warna-warni, seperti contoh tabel sederhana yang saya buat ini:

Contoh Tabel Kolom Warna-Warni

Title-1	Title-2	Title-3	Title-4	Title-5	Title-6	Title-7
Keterangan1	Keterangan2	Keterangan3	Keterangan4	Keterangan5	Keterangan6	Keterangan7
Keterangan1	Keterangan2	Keterangan3	Keterangan4	Keterangan5	Keterangan6	Keterangan7
Keterangan1	Keterangan2	Keterangan3	Keterangan4	Keterangan5	Keterangan6	Keterangan7

Untuk membuat kolom tabel warna-warni kalian bisa menambahkan beberapa tag col (sesuaikan dengan banyaknya kolom) dengan style background yang berbeda-beda warna pada tiap kolomnya, untuk membuat tabel seperti diatas hanya menggunakan html dan style sebagai berikut:

HTML

<table border="1">
<colgroup>
<col span="2" style="background-color:#CBE5EB">
<col style="background-color:#EDF7BA">
<col style="background-color:#84A5E7">
<col style="background-color:#B2BBBD">
<col style="background-color:#D4BACB">
<col style="background-color:#8DB0A4">
</colgroup>
<tr>
<th>Title-1</th>
<th>Title-2</th>
<th>Title-3</th>
<th>Title-4</th>
<th>Title-5</th>
<th>Title-6</th>
<th>Title-7</th>
</tr>
<tr>
<td>Keterangan1</td>
<td>Keterangan2</td>
<td>Keterangan3</td>
<td>Keterangan4</td>
<td>Keterangan5</td>
<td>Keterangan6</td>
<td>Keterangan7</td>
</tr>
<tr>
<td>Keterangan1</td>
<td>Keterangan2</td>
<td>Keterangan3</td>
<td>Keterangan4</td>
<td>Keterangan5</td>
<td>Keterangan6</td>
<td>Keterangan7</td>
</tr>
<tr>
<td>Keterangan1</td>
<td>Keterangan2</td>
<td>Keterangan3</td>
<td>Keterangan4</td>
<td>Keterangan5</td>
<td>Keterangan6</td>
<td>Keterangan7</td>
</tr>
</table>

Unik bukan kalau mempunyai tabel dengan kolom yang memiliki warna yang berbeda-beda. Untuk lebih baiknya tampilan tabel bisa dimodifikasi dengan menambahkan CSS yang lebih komplek dan lengkap supaya tampilannya menjadi lebih baik dan sesuai dengan background template yang dipergunakan.