HTML มีองค์ประกอบ (elements) ที่ช่วยจัดหรือตกแต่งเฉพาะคอลัมน์ของตารางได้ ได้แก่
<colgroup> และ <col> | MON | TUE | WED | THU | FRI | SAT | SUN |
|---|---|---|---|---|---|---|
| 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> เบื้องต้น
หากต้องการตกแต่ง 2 คอลัมน์แรกของตาราง ให้ใช้
<colgroup> และ <col> <colgroup>ระบุคอลัมน์ที่ต้องการตกแต่ง<col>ใช้ระบุแต่ละกลุ่มคอลัมน์spanระบุจำนวนคอลัมน์styleระบุรูปแบบสไตล์
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
📝 Note
<colgroup> เป็น Tag ลูกของ <table>
โดยจะวางไว้ก่อน <thead>, <tr>, <td>
หากมี <caption> ต้องวาง <colgroup> ไว้หลัง <caption>
กฎคุณสมบัติของ CSS ใน <colgroup>
ในการใช้งาน
<colgroup> มีข้อจำกัดของ Properties CSS ที่ใช้ได้ ได้แก่: widthvisibilitybackgroundborder
สำหรับ CSS อื่น ๆ จะไม่มีผลต่อคอลัมน์
การตกแต่งตารางหลายคอลัมน์
หากต้องการตกแต่งหลายคอลัมน์ในหลายแบบ สามารถใช้
<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>
...
ซ่อนคอลัมน์
หากต้องการซ่อนคอลัมน์ สามารถทำได้โดยใช้ Property
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>
...