กลุ่มหัวตารางคืออะไร?
ใน CSS คำว่า “ กลุ่มหัวตาราง ” ใช้เพื่อแสดงส่วนหัวของตารางผ่านทาง “ <ส่วนหัว> ” แท็ก ส่วนหัวสอดคล้องกับรายการแรกในคอลัมน์แนวตั้ง มันระบุข้อมูลเกี่ยวกับรายการตาราง ส่วนหัวยังสามารถครอบคลุมหลายคอลัมน์หากจำเป็น สามารถทำได้โดยการสร้าง Table-Column Group ใน CSS
ตัวอย่าง
ส่วนหัวของตารางมีการจัดรูปแบบที่แตกต่างจากรายการที่เหลือในตารางเพื่อแยกออกจากกันโดยมองเห็นได้ สิ่งเหล่านี้มักจะแสดงด้วยขนาดตัวอักษรที่เป็นตัวหนาหรือข้อความขนาดใหญ่ เมื่อใส่ชื่อ “ผู้ชาย” และ “ผู้หญิง” เราสามารถกำหนดให้เป็น Headers ในแถวแยกกันได้ดังตัวอย่างด้านล่าง:
< โต๊ะ >
< มด >
< ท >
< ไทย > ผู้ชาย < / ไทย >
< ไทย > ผู้หญิง < / ไทย >
< / ท >
< / มด >
< ร่างกาย >
< ท >
< td > เจมส์ < / td >
< td > เจสสิก้า < / td >
< / ท >
< ท >
< td > เดวิด < / td >
< td > ลอร่า < / td >
< / ท >
< ท >
< td > ยาโคบ < / td >
< td > รีเบคก้า < / td >
< / ท >
< / ร่างกาย >
< / โต๊ะ >
ขั้นตอนต่อไปนี้จะอธิบายวิธีการสร้างหัวตาราง:
- เพิ่ม ' <ตาราง> แท็ก ” เพื่อสร้างตาราง
- ในขั้นตอนถัดไป ให้ระบุ “ <ส่วนหัว> ” แท็กที่อ้างถึงส่วนหัวของตาราง
- เพิ่มค่าส่วนหัวเป็นแถวโดยใช้แท็ก “
” และปิดส่วนหัวโดยใช้แท็ก “” - ตอนนี้รวม ' ” แท็กเพื่อเริ่มต้นเนื้อหาของตาราง
- แทรกข้อมูลสำหรับแต่ละแถวโดยใช้แท็ก “
' และ ' ” แท็กตามลำดับ” - สรุปเนื้อหาของตารางและตารางผ่าน '
เอาต์พุต
กลุ่มส่วนท้ายตารางคืออะไร?
“ กลุ่มส่วนท้ายตาราง ” ใช้เพื่อแสดงส่วนท้ายของตารางใน CSS ด้วยความช่วยเหลือของ “ <เท้า> ” แท็ก ส่วนท้ายยังให้ข้อมูลเกี่ยวกับเนื้อหาของตารางที่สามารถช่วยให้ผู้อ่านเข้าใจข้อมูลได้ชัดเจนยิ่งขึ้น ใช้ตัวอย่างเดียวกันจากส่วนก่อนหน้า เพิ่มส่วนท้ายซึ่งระบุจำนวนรวมของรายการในแต่ละคอลัมน์สำหรับ 'ผู้ชาย' และ 'ผู้หญิง' ในตาราง
ตัวอย่าง
< โต๊ะ >
ภาพรวมของตัวอย่างต่อไปนี้ที่อธิบายแนวคิดที่กล่าวถึง:
< มด >
< ท >
< ไทย >ผู้ชาย< / ไทย >
< ไทย >ผู้หญิง< / ไทย >
< / ท >
< / มด >
< ร่างกาย >
< ท >
< td >เจมส์< / td >
< td >เจสสิก้า< / td >
< / ท >
< ท >
< td >เดวิด< / td >
< td >ลอร่า< / td >
< / ท >
< ท >
< td >เจคอบ< / td >
< td >รีเบคก้า< / td >
< / ท >
< / ร่างกาย >
< เท้า >
< ท >
< td ระดับ = 'บีจี-เทา-200' >ทั้งหมด 03< / td >
< td ระดับ = 'บีจี-เทา-200' >ทั้งหมด 03< / td >
< / ท >
< / เท้า >
< / โต๊ะ >ขั้นตอนต่อไปนี้อธิบายขั้นตอนในการสร้างส่วนท้ายของตาราง:
- คล้ายกับตัวอย่างก่อนหน้านี้ เพิ่ม “ <ตาราง> ” แท็กเพื่อสร้าง/รวมตาราง
- รวมถึง “ <ส่วนหัว> ” แท็กเพื่อระบุส่วนหัวของตาราง
- ในทำนองเดียวกัน ให้เพิ่มชื่อส่วนหัวเป็นแถวและปิดส่วนหัวผ่านทาง ' ” แท็ก
- ระลึกถึงวิธีการที่กล่าวถึงในการระบุเนื้อหาของตารางและรวมถึงข้อมูลในนั้น
- ตอนนี้เพิ่ม ' <เท้า> ” เพื่อเริ่มส่วนท้ายของตาราง
- เพิ่มข้อมูลสำหรับส่วนท้ายของตารางเป็นแถวและปิดส่วนท้ายโดยใช้ปุ่ม ' ” แท็ก
- สุดท้าย สรุปตารางโดยใช้ “ ” แท็ก
เอาต์พุต
โค้ดที่เขียนไว้ด้านบนสร้างผลลัพธ์ต่อไปนี้:
บทสรุป
ส่วนหัวและส่วนท้ายในตารางใน CSS ช่วยเพิ่มข้อมูลเพิ่มเติมที่ด้านบนและด้านล่างของตารางตามลำดับ ข้อมูลนี้ช่วยในการพิจารณาว่าตารางนั้นเกี่ยวกับอะไร และให้รายละเอียดเพิ่มเติมที่อยู่ภายในค่าที่แทรกในตาราง เมื่อรวมกันแล้ว ทั้งสองจะจัดกรอบข้อมูลที่ห่อหุ้มภายในตารางได้อย่างสมบูรณ์แบบ
- ตอนนี้รวม ' ” แท็กเพื่อเริ่มต้นเนื้อหาของตาราง