HTML ตาราง Colgroup
องค์ประกอบ<colgroup>นี้ใช้เพื่อจัดรูปแบบคอลัมน์เฉพาะของตาราง
HTML ตาราง Colgroup
หากคุณต้องการกำหนดสไตล์สองคอลัมน์แรกของตาราง ให้ใช้
องค์ประกอบ
<colgroup>
และ<col>
| MON | อ | พุธ | เก็บรวบรวม | วันศุกร์ | นั่ง | ดวงอาทิตย์ |
|---|---|---|---|---|---|---|
| 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 |
<colgroup>ควรใช้องค์ประกอบนี้เป็นคอนเทนเนอร์สำหรับข้อกำหนดของคอลัมน์
แต่ละกลุ่มจะถูกระบุด้วย<col>องค์ประกอบ
แอตทริบิวต์spanระบุจำนวนคอลัมน์ที่ได้รับสไตล์
แอตทริบิวต์styleระบุรูปแบบเพื่อให้คอลัมน์
หมายเหตุ:มีการเลือกคุณสมบัติ CSS ทางกฎหมายที่จำกัดสำหรับcolgroups
ตัวอย่าง
<table>
<colgroup>
<col span="2"
style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
หมายเหตุ: แท็ ก<colgroup>ต้องเป็นลูกของ<table>องค์ประกอบและควรวางไว้ก่อนองค์ประกอบตารางอื่นๆ เช่น<thead>,
<tr>, <td>
ฯลฯ แต่อยู่หลัง<caption>องค์ประกอบ หากมี
คุณสมบัติ CSS ทางกฎหมาย
มีตัวเลือกคุณสมบัติ CSS ที่จำกัดมากที่อนุญาตให้ใช้ในคอลกรุ๊ป:
widthคุณสมบัติ
visibilityคุณสมบัติ
backgroundคุณสมบัติ คุณสมบัติ
borderคุณสมบัติ
คุณสมบัติ CSS อื่นๆ ทั้งหมดจะไม่มีผลกับตารางของคุณ
องค์ประกอบ Col หลายรายการ
หากคุณต้องการจัดสไตล์คอลัมน์มากขึ้นด้วยสไตล์ที่แตกต่างกัน ให้ใช้
<col>องค์ประกอบเพิ่มเติมภายใน
<colgroup>:
ตัวอย่าง
<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>
...
Colgroups ว่างเปล่า
หากคุณต้องการจัดรูปแบบคอลัมน์ตรงกลางตาราง ให้แทรกองค์ประกอบ "ว่าง"
<col>(โดยไม่มีรูปแบบ) สำหรับคอลัมน์ก่อน:
ตัวอย่าง
<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>
...
ซ่อนคอลัมน์
คุณสามารถซ่อนคอลัมน์ด้วยvisibility: collapseคุณสมบัติ:
ตัวอย่าง
<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>
...