Colgroup Tabel HTML
Elemen <colgroup>ini digunakan untuk menata kolom tertentu dari sebuah tabel.
Colgroup Tabel HTML
Jika Anda ingin memberi gaya pada dua kolom pertama tabel, gunakan elemen <colgroup>
dan <col>
.
| SEN | SELASA | MENIKAHI | MENGUMPULKAN | JUMAT | DUDUK | MATAHARI |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
Elemen <colgroup>tersebut harus digunakan sebagai wadah untuk spesifikasi kolom.
Setiap grup ditentukan dengan <col>elemen.
Atribut spanmenentukan berapa banyak kolom yang mendapatkan gaya.
Atribut stylemenentukan gaya untuk memberikan kolom.
Catatan: Ada pilihan yang sangat terbatas dari properti CSS legal untuk colgroups .
Contoh
<table>
<colgroup>
<col span="2"
style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Catatan: Tag <colgroup>harus merupakan anak dari <table>elemen dan harus ditempatkan sebelum elemen tabel lainnya, seperti <thead>,
<tr>, <td>
dll., tetapi setelah <caption>elemen, jika ada.
Properti CSS Legal
Hanya ada pilihan properti CSS yang sangat terbatas yang diizinkan untuk digunakan dalam colgroup:
widthproperti
visibilityproperti
backgroundproperti
borderproperti
Semua properti CSS lainnya tidak akan berpengaruh pada tabel Anda.
Beberapa Elemen Kol
Jika Anda ingin menata lebih banyak kolom dengan gaya berbeda, gunakan lebih banyak
<col>elemen di dalam
<colgroup>:
Contoh
<table>
<colgroup>
<col span="2"
style="background-color: #D6EEEE">
<col span="3"
style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Colgroup kosong
Jika Anda ingin menata kolom di tengah tabel, sisipkan
<col>elemen "kosong" (tanpa gaya) untuk kolom sebelumnya:
Contoh
<table>
<colgroup>
<col span="3">
<col
span="2"
style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
Sembunyikan Kolom
Anda dapat menyembunyikan kolom dengan visibility: collapseproperti:
Contoh
<table>
<colgroup>
<col span="2">
<col span="3"
style="visibility: collapse">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...