ตาราง HTML ใช้สำหรับการแสดงข้อมูลแบบตารางที่มีแถวและคอลัมน์ การตัดสินใจใช้ <table>
ควรอิงตาม
เนื้อหาที่คุณกำลังนำเสนอและผู้ใช้ของคุณ ที่เกี่ยวข้องกับเนื้อหานั้น หากมีการนำเสนอ เปรียบเทียบ จัดเรียงข้อมูล
คำนวณแล้ว หรือมีการอ้างอิงเปรียบเทียบกัน ในกรณีนี้ <table>
น่าจะเป็นตัวเลือกที่เหมาะสม หากคุณเพียงแค่ต้องการจัดเลย์เอาต์เนื้อหา
แบบไม่เป็นตารางให้สวยงาม
เช่น กลุ่มภาพขนาดย่อขนาดใหญ่ ตารางไม่เหมาะสม: สร้างรายการรูปภาพแทนและ
จัดรูปแบบตารางกริดด้วย CSS
ในส่วนนี้ เราจะกล่าวถึงองค์ประกอบทั้งหมดที่ประกอบกันเป็นตารางนี้ ตลอดจนคุณลักษณะการช่วยเหลือพิเศษและความสามารถในการใช้งานบางอย่าง คุณควรพิจารณาเมื่อนำเสนอข้อมูลแบบตาราง แม้ว่าการเรียนรู้ HTML จะไม่ใช่เรื่องเกี่ยวกับ CSS โดยพื้นฐานแล้ว เรามีทั้งหลักสูตรโดยเฉพาะ สำหรับ CSS การเรียนรู้ เราจะกล่าวถึงคุณสมบัติ CSS เฉพาะตารางบางรายการ
องค์ประกอบตารางตามลำดับ
แท็ก <table>
จะรวมเนื้อหาในตารางรวมถึงองค์ประกอบทั้งหมดในตาราง
บทบาท ARIA โดยนัยของ <table>
คือ table
เทคโนโลยีความช่วยเหลือพิเศษรู้ว่าองค์ประกอบนี้เป็นโครงสร้างตารางที่มีข้อมูลซึ่งจัดเรียง
แถวและคอลัมน์ หากตารางยังคงสถานะการเลือก มีการนำทางแบบ 2 มิติ หรืออนุญาตให้ผู้ใช้จัดเรียงลำดับของเซลล์ใหม่ ให้ตั้งค่า role="grid"
หากแถวของ grid
ขยายและยุบได้ ให้ใช้ role="treegrid"
แทน
ภายใน <table>
คุณจะเห็นส่วนหัวของตาราง (<thead>
) ส่วนเนื้อหาของตาราง (<tbody>
) และส่วนท้ายของตาราง (<tfoot>
) (ไม่บังคับ)
แต่ละแถวประกอบด้วยแถวในตาราง (<tr>
) แถวมีเซลล์ส่วนหัวของตาราง (<th>
) และข้อมูลตาราง (<td>
) ซึ่งมีข้อมูลทั้งหมด
ใน DOM ที่ผ่านมา คุณอาจเห็นฟีเจอร์เพิ่มเติม 2 รายการ ได้แก่ คำบรรยายตาราง (<caption>
) และกลุ่มคอลัมน์ (<colgroup>
) แล้วแต่กรณี
ว่า <colgroup>
มีแอตทริบิวต์ span
หรือไม่ หรืออาจมีองค์ประกอบคอลัมน์ตาราง (<col>
) ที่ฝังไว้
องค์ประกอบย่อยของตารางจะมีลำดับดังนี้
- องค์ประกอบ
<caption>
<colgroup>
องค์ประกอบ<thead>
องค์ประกอบ<tbody>
องค์ประกอบ<tfoot>
องค์ประกอบ
เราจะพูดถึงองค์ประกอบ <table>
ย่อย ซึ่งเป็นตัวเลือกทั้งหมดแต่แนะนำ
แล้วดูที่แถว เซลล์ส่วนหัวของตาราง
และเซลล์ข้อมูลในตาราง โดยจะครอบคลุม <colgroup>
เป็นลำดับสุดท้าย
คำบรรยายภาพตาราง
เนื่องจากเป็นองค์ประกอบเนทีฟและมีความหมาย <caption>
แนะนำให้ใช้
วิธีการตั้งชื่อตาราง <caption>
จะระบุชื่อตารางที่สื่อความหมายและเชื่อมโยงแบบเป็นโปรแกรม ใช่เลย
และพร้อมใช้งานสำหรับผู้ใช้ทุกคนโดยค่าเริ่มต้น
องค์ประกอบ <caption>
ควรเป็นองค์ประกอบแรกที่ฝังอยู่ในองค์ประกอบ <table>
การเพิ่มนี้จะช่วยให้ผู้ใช้ทั้งหมดทราบว่า
ของตารางทันทีโดยไม่ต้องอ่านข้อความโดยรอบ อีกทางเลือกหนึ่งคือใช้ aria-label
หรือ aria-labelledby
บน <table>
เพื่อระบุชื่อที่เข้าถึงได้เป็นคำบรรยาย องค์ประกอบ <caption>
ไม่มีแอตทริบิวต์เฉพาะองค์ประกอบ
คำบรรยายภาพจะปรากฏนอกตาราง ตั้งค่าตําแหน่งของคําบรรยายวิดีโอได้โดยใช้พร็อพเพอร์ตี้ CSS caption-side
ซึ่งเป็น
แนวทางปฏิบัติที่ดียิ่งกว่าการใช้แอตทริบิวต์ align
ที่เลิกใช้งานแล้ว ซึ่งจะเป็นการตั้งค่าคำบรรยายเป็นด้านบนและด้านล่าง ด้านซ้ายและขวา
การจัดตำแหน่งด้านข้างโดยใช้ inline-start
และ inline-end
ยังไม่ได้รับการรองรับอย่างเต็มรูปแบบ "ด้านบน" เป็นงานนำเสนอเริ่มต้นของเบราว์เซอร์
โดยเฉพาะอย่างยิ่ง ตารางข้อมูลควรมีส่วนหัวและคำอธิบายภาพที่ชัดเจน และเรียบง่ายพอที่จะเข้าใจในตัวเอง ทั้งนี้ โปรดทราบว่า
ผู้ใช้แต่ละคนมีความสามารถทางสติปัญญาที่ไม่เหมือนกัน เมื่อตารางเป็น "การชี้นำ" หรือต้องการการตีความ
สรุปสั้นๆ เกี่ยวกับประเด็นหรือฟังก์ชันหลักของตาราง ตำแหน่งที่สรุปจะขึ้นอยู่กับความยาวและความซับซ้อน
หากสั้นกระชับ ให้ใช้เป็นข้อความด้านในของคำบรรยาย หากยาวกว่านั้น ให้สรุปไว้ในคำบรรยายและใส่ข้อมูลสรุปใน
ย่อหน้าที่อยู่ก่อนหน้าตารางซึ่งเชื่อมโยง 2 ย่อหน้ากับ aria-describedby
การวางตารางใน <figure>
และการใส่ข้อมูลสรุปใน <figcaption>
เป็นอีกตัวเลือกหนึ่ง
การแบ่งข้อมูล
เนื้อหาของตารางประกอบด้วยสามส่วน ได้แก่ ส่วนหัวของตาราง 0 รายการหรือมากกว่า (<thead>
) ส่วนเนื้อหาของตาราง (<tbody>
)
และส่วนท้ายของตาราง (<tfoot>
) ทั้งหมดเป็นตัวเลือกที่ไม่บังคับโดยไม่มีค่าที่รองรับแต่ละรายการ
องค์ประกอบเหล่านี้ไม่ได้ช่วยหรือขัดขวางการเข้าถึงตาราง แต่จะมีประโยชน์ในแง่ของความสามารถในการใช้งาน ซึ่งมี
ตะขอการจัดรูปแบบ ตัวอย่างเช่น เนื้อหาส่วนหัวสามารถทำให้ติดหนึบได้
ขณะที่เนื้อหา <tbody>
สามารถเลื่อนได้ แถวที่ไม่ได้ซ้อนอยู่ใน 1 ใน 3 องค์ประกอบนี้อยู่โดยปริยาย
อยู่ใน <tbody>
ผลิตภัณฑ์ทั้ง 3 มีบทบาทโดยนัยเดียวกัน rowgroup
องค์ประกอบ 3 อย่างนี้ไม่มีแอตทริบิวต์ที่เจาะจงสำหรับองค์ประกอบใด
สิ่งที่เรามีจนถึงตอนนี้
<table>
<caption>MLW Students</caption>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
เดิมองค์ประกอบ <tfoot>
ระบุไว้ให้อยู่หลัง <thead>
และก่อน <tbody>
เพื่อเหตุผลด้านการช่วยเหลือพิเศษ
คุณจึงอาจเห็นลำดับแหล่งที่มาที่ไม่ซับซ้อนนี้ในโค้ดเบสเดิม
เนื้อหาของตาราง
คุณสามารถแบ่งตารางออกเป็นส่วนหัว เนื้อความ และส่วนท้ายของตารางได้ แต่ทุกตารางจะไม่ส่งผลอะไรเลยหากตารางไม่
มีแถว เซลล์ และเนื้อหาของตาราง แต่ละแถวในตาราง โดย <tr>
จะมีเซลล์อย่างน้อย 1 เซลล์ หากเซลล์เป็นเซลล์ส่วนหัว ให้ใช้ <th>
หรือไม่เช่นนั้น ให้ใช้ <td>
โดยทั่วไปแล้ว สไตล์ชีต User-agent จะแสดงเนื้อหาในเซลล์ส่วนหัวของตาราง <th>
เป็นตัวหนาและตรงกลาง รูปแบบเริ่มต้นเหล่านี้
และการจัดรูปแบบทั้งหมด จะควบคุมด้วย CSS ได้ดีที่สุด แทนที่จะเป็นแอตทริบิวต์ที่เลิกใช้งานซึ่งเคยมีในแต่ละเซลล์
แถว และแม้กระทั่ง <table>
มีแอตทริบิวต์สำหรับเพิ่มระยะห่างจากขอบระหว่างเซลล์และภายในเซลล์ สำหรับเส้นขอบ และการจัดข้อความ ระยะห่างจากขอบของเซลล์และการใช้เซลล์
ซึ่งกำหนดช่องว่างระหว่างเนื้อหาของเซลล์และขอบของเซลล์ และระหว่างเส้นขอบของเซลล์ที่ติดกันควรตั้งค่า
ที่มีการยุบเส้นขอบและborder-spacingของ CSS
พร็อพเพอร์ตี้ ตามลำดับ Border-spacing
จะไม่มีผลหากตั้งค่า border-collapse: collapse
ไว้ หาก border-collapse: separate;
ตั้งค่าแล้ว คุณจะซ่อนเซลล์ว่างทั้งหมดด้วย empty-cells: hide;
ได้ หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการจัดรูปแบบตาราง โปรดดู
สไลด์ประกอบการนำเสนอแบบอินเทอร์แอกทีฟของรูปแบบ CSS ที่เกี่ยวข้องกับตาราง
ในตัวอย่าง เราได้เพิ่มเส้นขอบในตารางและแต่ละเซลล์ที่มี CSS เพื่อให้มองเห็นคุณลักษณะบางอย่างได้ชัดเจนยิ่งขึ้น
ในตัวอย่างนี้ เรามีคำบรรยายภาพ ส่วนหัวของตาราง และเนื้อความของตาราง ส่วนหัวมี 1 แถวที่มีเซลล์ <th>
ส่วนหัว 3 เซลล์
จึงทำให้มี 3 คอลัมน์ ส่วนเนื้อหามีข้อมูล 3 แถว เซลล์แรกคือเซลล์ส่วนหัวของแถว เราจึงใช้ <th>
แทน <td>
เซลล์ <th>
มีความหมายโดยมีบทบาท ARIA โดยนัยของ columnheader
หรือ rowheader โดยจะกำหนดเซลล์เป็นส่วนหัวของคอลัมน์หรือแถวของเซลล์ในตาราง
ขึ้นอยู่กับค่าของแอตทริบิวต์ scope
ที่แจกแจง เบราว์เซอร์จะมีค่าเริ่มต้นเป็น col
หรือ row
หากไม่ได้ตั้งค่า scope
ไว้อย่างชัดแจ้ง
เนื่องจากเราใช้มาร์กอัปเชิงความหมาย เซลล์ 1956
มีส่วนหัว 2 แบบ ได้แก่ Year และ Lou Minious การเชื่อมโยงนี้บอกเราว่า "1956" คือ
"ปี" ของการสำเร็จการศึกษาสำหรับ "Lou Minious" ในตัวอย่างนี้ ดังที่เราเห็นทั้งตาราง การเชื่อมโยงจะเห็นได้อย่างชัดเจน
การใช้ <th>
จะทำให้เกิดการเชื่อมโยง แม้ว่าคอลัมน์ส่วนหัวหรือแถวจะเลื่อนออกจากมุมมองก็ตาม เราสามารถตั้ง
<th scope="col">Year</th>
และ <th scope="row">Lou Minious</th>
แต่ด้วยตารางง่ายๆ แบบนี้ ค่าเริ่มต้นที่แจกแจงไว้จะใช้ได้
ค่าอื่นๆ สำหรับ scope
ได้แก่ rowgroup
และ colgroup
ซึ่งมีประโยชน์สำหรับตารางที่ซับซ้อน
กำลังผสานเซลล์
คุณสามารถรวมหลายเซลล์ไว้ในเซลล์เดียวได้เช่นเดียวกับ MS Excel, Google ชีต และตัวเลข ซึ่งทำได้ด้วย HTML
ใช้แอตทริบิวต์ colspan
เพื่อผสานเซลล์ที่อยู่ติดกัน 2 เซลล์ขึ้นไปภายในแถวเดียว ใช้แอตทริบิวต์ rowspan
เพื่อผสานเซลล์ในแถวต่างๆ
กำลังอยู่ในเซลล์แถวบนสุด
ในตัวอย่างนี้ ส่วนหัวของตารางมี 2 แถว แถวส่วนหัวแรกมีเซลล์ 3 เซลล์ที่ครอบคลุม 4 คอลัมน์ ได้แก่ เซลล์ตรงกลาง
มี colspan="2"
ระบบจะผสานเซลล์ 2 เซลล์ที่อยู่ติดกัน เซลล์แรกและเซลล์สุดท้ายประกอบด้วย rowspan="2"
เงื่อนไขนี้จะผสานเซลล์กับเซลล์
ในแถวติดกัน อยู่ใต้แถวนั้น
แถวที่ 2 ในส่วนหัวของตารางจะมี 2 เซลล์ ดังนี้ นี่คือเซลล์ของคอลัมน์ที่ 2 และ 3 ในแถวที่ 2 ไม่มีการประกาศเซลล์สำหรับคอลัมน์แรกหรือคอลัมน์สุดท้ายเป็นเซลล์ในคอลัมน์แรกและคอลัมน์สุดท้ายในแถวแรกที่ครอบคลุม 2 แถว
ในกรณีที่กำหนดเซลล์โดยเซลล์ส่วนหัวหลายเซลล์ที่มีการเชื่อมโยงซึ่งไม่สามารถตั้งค่าโดยแอตทริบิวต์ scope
เพียงอย่างเดียวได้
รวมแอตทริบิวต์ headers
ที่มีรายการส่วนหัวที่เกี่ยวข้องที่คั่นด้วยช่องว่าง เนื่องจากตัวอย่างนี้เป็นตารางที่ซับซ้อนมากขึ้น เราจึงกำหนด
ขอบเขตของส่วนหัวที่มีแอตทริบิวต์ scope
เราเพิ่มแอตทริบิวต์ headers
ลงในแต่ละเซลล์เพื่อความชัดเจนยิ่งขึ้น
แอตทริบิวต์ headers
อาจไม่จำเป็นสำหรับกรณีการใช้งานง่ายๆ เช่นนี้ แต่แอตทริบิวต์เหล่านี้จำเป็นต้องมีในกระเป๋าเครื่องมือของคุณ เช่น
ตารางของคุณมีความซับซ้อนยิ่งขึ้น ตารางที่มีโครงสร้างที่ซับซ้อน เช่น ตารางที่มีการผสานส่วนหัวหรือเซลล์หรือการผสานกับ
ส่วนหัวของคอลัมน์หรือแถวมากกว่า 2 ระดับ จำเป็นต้องมีการระบุเซลล์ส่วนหัวที่เกี่ยวข้องอย่างชัดเจน ในตารางที่ซับซ้อนดังกล่าว
เชื่อมโยงเซลล์ข้อมูลแต่ละเซลล์กับเซลล์ส่วนหัวแต่ละเซลล์ที่เกี่ยวข้องด้วยรายการค่า id
ที่คั่นด้วยช่องว่างของส่วนหัวทั้งหมดที่เกี่ยวข้อง
เป็นค่าของแอตทริบิวต์ headers
แอตทริบิวต์ headers
พบบ่อยกว่าในองค์ประกอบ <td>
แต่ก็ยังใช้ได้ใน <th>
ด้วย
อย่างไรก็ตาม โครงสร้างตารางที่ซับซ้อนอาจทำให้ผู้ใช้ทุกคนเข้าใจได้ยาก ไม่ใช่แค่ผู้ใช้โปรแกรมอ่านหน้าจอเท่านั้น การรับรู้ และในแง่ของการรองรับโปรแกรมอ่านหน้าจอ ตารางที่ง่ายขึ้นซึ่งมีเซลล์ที่จำกัดหรือไม่มีขอบเขตเลย แม้จะไม่ได้เพิ่มขอบเขตและส่วนหัวก็ตาม เข้าใจ และยังจัดการได้ง่ายกว่าอีกด้วย
การจัดรูปแบบตาราง
มีองค์ประกอบที่ค่อนข้างคลุมเครือ 2 รายการซึ่งกล่าวถึงคร่าวๆ แล้ว ได้แก่ กลุ่มคอลัมน์ <colgroup>
และองค์ประกอบ
และองค์ประกอบสืบทอดเพียงรายการเดียวคือองค์ประกอบคอลัมน์ <col>
ที่ว่างเปล่า
ใช้องค์ประกอบ <colgroup>
เพื่อกำหนดกลุ่มคอลัมน์ หรือองค์ประกอบ <col>
ภายในตาราง
หากใช้ การจัดกลุ่มคอลัมน์ควรฝังอยู่ใน <table>
โดยอยู่ต่อจาก <caption>
และอยู่ก่อนข้อมูลตาราง
หากครอบคลุมมากกว่า 1 คอลัมน์ ให้ใช้แอตทริบิวต์ span
โดยทั่วไปลำดับโครงร่างเนื้อหาของตารางจะเป็นดังนี้ โดยมี <table>
และ <caption>
เป็น 2 องค์ประกอบที่
ควรรวม:
<table>
<caption>Table Caption</caption>
<colgroup>
<col/>
</colgroup>
<thead>...
ทั้ง <colgroup>
และ <col>
ไม่ได้มีความหมายทางความหมายในแง่ของการช่วยให้ตารางเข้าถึงได้ง่ายขึ้น แต่ทั้ง 2 อย่างอนุญาต
สำหรับการจัดรูปแบบคอลัมน์ที่จำกัด ซึ่งรวมถึงการตั้งค่าความกว้างของคอลัมน์ด้วย CSS
สไตล์ <col>
จะจัดรูปแบบคอลัมน์ตราบใดที่ไม่มีสไตล์ <td>
หรือ <th>
ที่ลบล้างการจัดรูปแบบดังกล่าว ตัวอย่างเช่น เมื่อ
<colspan>
ใช้เพื่อผสานเซลล์ในบางแถวของตาราง แต่ไม่ใช่ทั้งหมด คุณจึงไม่แน่ใจว่าตัวเลือก เช่น tr > *:nth-child(8)
หรือไม่
ซึ่งจะเลือกคอลัมน์ย่อยที่ 8 ของทุกแถว จะไฮไลต์คอลัมน์ที่ 8 แบบเต็ม หรือจะไฮไลต์คอลัมน์ที่ 8 ในหลายๆ แถว
แต่จะมีการกระจัดกระจายของเซลล์คอลัมน์ที่ 9 และ 10 ขึ้นอยู่กับว่ามีเซลล์แถวหรือคอลัมน์ใดที่มีการผสานกัน
ขออภัย ระบบรองรับคุณสมบัติเพียงไม่กี่รายการ ลักษณะดังกล่าวไม่ได้รับช่วงมาจากเซลล์ และเป็นวิธีเดียวในการใช้ <col>
ในเซลล์การกำหนดเป้าหมายมีตัวเลือกที่ซับซ้อน ซึ่งรวมถึงตัวเลือกเชิงสัมพันธ์ :has()
หากทั้ง <table>
และ <colgroup>
มีสีพื้นหลัง background-color
ของ <colgroup>
จะอยู่ด้านบน
ลำดับของภาพวาดคือตาราง กลุ่มคอลัมน์ คอลัมน์ กลุ่มแถว แถว มีเซลล์อยู่ท้ายสุดและด้านบนสุด ดังที่แสดงในสคีมาของตาราง
เลเยอร์ องค์ประกอบ <td>
และ <th>
ไม่ใช่องค์ประกอบสืบทอดจากองค์ประกอบ <colgroup>
หรือ <col>
และไม่รับค่าการจัดรูปแบบ
ตัวเลือกโครงสร้าง CSS มีประโยชน์มากในการทำให้ตารางเป็นแถบสี เช่น tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);}
จะเพิ่มสีดำโปร่งแสงลงในแถวคี่แต่ละแถวในส่วนเนื้อหาของตาราง เพื่อให้เอฟเฟกต์พื้นหลังที่ตั้งค่าไว้ใน <colgroup>
แสดงออกมาได้
ตารางจะไม่ตอบสนองโดยค่าเริ่มต้น แต่มีการกำหนดขนาดตามเนื้อหาโดยค่าเริ่มต้น ต้องมีมาตรการเพิ่มเติมเพื่อให้ได้ตาราง
การจัดรูปแบบเพื่อให้ทำงานในอุปกรณ์ต่างๆ ได้อย่างมีประสิทธิภาพ หากคุณเปลี่ยนคุณสมบัติการแสดงผล CSS สำหรับองค์ประกอบตาราง
รวมแอตทริบิวต์ ARIA role
แม้จะฟังดูซ้ำซ้อน แต่พร็อพเพอร์ตี้ CSS display
อาจส่งผลกระทบต่อโครงสร้างการช่วยเหลือพิเศษในบางเบราว์เซอร์
การนำเสนอข้อมูล
องค์ประกอบตารางมีความหมายทางอรรถศาสตร์ที่เทคโนโลยีความช่วยเหลือพิเศษใช้เพื่อเปิดใช้การนำทางผ่านแถวและคอลัมน์
โดยไม่ต้อง "หาย" ไม่ควรใช้องค์ประกอบ <table>
สำหรับการนำเสนอ หากต้องการส่วนหัวเหนือรายการ ให้ใช้ส่วนหัว
และรายการ หากคุณต้องการจัดเลย์เอาต์เนื้อหาในหลายคอลัมน์ ให้ใช้เลย์เอาต์หลายคอลัมน์
หากต้องการจัดวางเนื้อหาในตารางกริด ให้ใช้ตารางกริด CSS ใช้ตารางสำหรับข้อมูลเท่านั้น ลองคิดในลักษณะนี้: หากข้อมูลของคุณต้องใช้สเปรดชีตในการนำเสนอในการประชุม ให้ใช้ <table>
ถ้าต้องการใช้ฟีเจอร์ที่มีให้ในซอฟต์แวร์งานนำเสนอ เช่น Keynote หรือ PowerPoint คุณอาจต้องใช้รายการคำอธิบาย
แม้ว่าการจัดเรียงคอลัมน์ในตารางจะเป็นขอบเขตการทำงานของ JavaScript การมาร์กอัปส่วนหัวเพื่อให้ผู้ใช้ทราบว่าตนสามารถจัดเรียงคอลัมน์ได้เป็นมุมมองทั้งหมดของ HTML
แจ้งให้ผู้ใช้ทราบว่าคอลัมน์ในตารางจะจัดเรียงได้ด้วยระบบการตีความสัญลักษณ์จากน้อยไปมาก จากมากไปน้อย หรือไม่ได้จัดเรียง คอลัมน์ที่ได้รับการจัดเรียงในปัจจุบันควร
รวมแอตทริบิวต์ aria-sort พร้อมค่าแจกแจงของทิศทางการจัดเรียง
<caption>
สามารถประกาศการอัปเดตเพื่อจัดเรียงลำดับผ่าน aria-live และ
ที่อัปเดตแบบไดนามิก และแสดงต่อผู้ใช้โปรแกรมอ่านหน้าจอ เนื่องจากคอลัมน์สามารถจัดเรียงได้โดยคลิกเนื้อหาส่วนหัว เนื้อหาของส่วนหัวจึงควรเป็น <button>
หากไม่ได้นำเสนอข้อมูลแบบตาราง โปรดอย่าใช้ <table>
หากคุณใช้ตารางสำหรับการนำเสนอ ให้ตั้งค่า role="none"
นักพัฒนาซอฟต์แวร์จำนวนมากใช้ตารางเพื่อวางแบบฟอร์ม แต่ไม่จำเป็นต้องทำเช่นนั้น แต่คุณจำเป็นต้องทราบเกี่ยวกับแบบฟอร์ม HTML ดังนั้นเราจะพูดถึงเรื่องนี้ต่อไป
ตรวจสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับตาราง
องค์ประกอบใดใช้เพื่อมาร์กอัปเซลล์ที่มีส่วนหัว
<caption>
<header>
<th>
ข้อมูลใดน่าจะเหมาะกับการจัดวางด้วยตาราง