Table (tabel) Kolom Warna-Warni Dengan Tag Col

Membuat kolom tabel (html table) warna-warni hanya dengan menambahkan tag col, yang merupakan bagian pendukung tag html table

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.



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.

1 comment:

Terima Kasih Atas Komentar Anda

  • +Bagikan
  • +Admin