ตาราง HTML ใช้สำหรับแสดงข้อมูลแบบตารางที่มีแถวและคอลัมน์ การตัดสินใจใช้ <table>
ควรขึ้นอยู่กับเนื้อหาที่คุณนำเสนอและความต้องการของผู้ใช้ที่เกี่ยวข้องกับเนื้อหานั้น หากมีการนำเสนอ เปรียบเทียบ จัดเรียง คำนวณ หรืออ้างอิงข้อมูลระหว่างกัน <table>
ก็น่าจะเป็นตัวเลือกที่เหมาะสมแล้ว หากต้องการจัดองค์ประกอบที่ไม่ใช่ตารางไว้อย่างเป็นระเบียบ เช่น ภาพขนาดย่อกลุ่มใหญ่ ตารางอาจไม่เหมาะสม ให้สร้างรายการรูปภาพและจัดรูปแบบตารางกริดด้วย CSS แทน
ในส่วนนี้ เราจะพูดถึงองค์ประกอบทั้งหมดที่ประกอบกันเป็นตาราง รวมถึงฟีเจอร์การช่วยเหลือพิเศษและความสามารถในการใช้งานที่คุณควรพิจารณาเมื่อนำเสนอข้อมูลแบบตาราง แม้ว่า "เรียนรู้ HTML" จะไม่ได้เกี่ยวกับ CSS โดยพื้นฐาน และเรามีทั้งหลักสูตรที่มีไว้สำหรับการเรียนรู้ CSS โดยเฉพาะ แต่เราจะพูดถึงพร็อพเพอร์ตี้ CSS เฉพาะตารางบางส่วน
องค์ประกอบตารางตามลําดับ
แท็ก <table>
จะรวมเนื้อหาในตาราง รวมถึงองค์ประกอบทั้งหมดในตาราง
บทบาท ARIA โดยนัยของ <table>
คือ table
เทคโนโลยีความช่วยเหลือพิเศษรู้ว่าองค์ประกอบนี้เป็นโครงสร้างตารางที่มีข้อมูลที่จัดเรียงในแถวและคอลัมน์ หากตารางคงสถานะการเลือกไว้ มีการนำทางแบบ 2 มิติ หรือให้ผู้ใช้จัดเรียงลำดับเซลล์ใหม่ ให้ตั้งค่า role="grid"
หากแถวของ grid
สามารถขยายและยุบได้ ให้ใช้ role="treegrid"
แทน
ภายใน <table>
คุณจะเห็นส่วนหัวของตาราง (<thead>
) เนื้อหาตาราง (<tbody>
) และส่วนท้ายตาราง (<tfoot>
) (ไม่บังคับ)
ทั้ง 2 อย่างประกอบด้วยแถวของตาราง (<tr>
) แถวจะมีส่วนหัวของตาราง (<th>
) และเซลล์ข้อมูลตาราง (<td>
) ซึ่งท้ายที่สุดแล้วจะมีข้อมูลทั้งหมด
ใน DOM ก่อนเกิดเหตุการณ์ใดๆ ข้างต้น คุณอาจเห็นฟีเจอร์เพิ่มเติม 2 อย่าง ได้แก่ คำบรรยายตาราง (<caption>
) และกลุ่มคอลัมน์ (<colgroup>
) อาจมีองค์ประกอบคอลัมน์ในตารางที่ซ้อนกัน (<col>
) โดยขึ้นอยู่กับว่า <colgroup>
มีแอตทริบิวต์ span
หรือไม่
ตารางย่อยจะเรียงตามลำดับต่อไปนี้
- องค์ประกอบ
<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>
เป็นอีกตัวเลือกหนึ่ง
ส่วนข้อมูล
เนื้อหาของตารางประกอบด้วย 3 ส่วน ได้แก่ ส่วนหัวของตารางศูนย์รายการ (<thead>
) เนื้อหาตาราง (<tbody>
) และส่วนท้ายตาราง (<tfoot>
) ตั้งแต่ 0 ส่วนขึ้นไป ส่วนทั้งหมดเป็นส่วนที่ไม่บังคับ โดยที่ทุกส่วนรองรับมากกว่า 0 ส่วน
องค์ประกอบเหล่านี้ไม่ได้ช่วยหรือขัดขวางการเข้าถึงตาราง แต่จะมีประโยชน์ในแง่ของความสามารถในการใช้งาน พวกเขาช่วยจัดสไตล์ตะขอ เช่น เนื้อหาส่วนหัวสามารถทำให้ติดหนึบได้ ส่วนเนื้อหา <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-collapse และ border-spacing ของ CSS ตามลำดับ Border-spacing
จะไม่มีผลหากตั้งค่า border-collapse: collapse
หากตั้งค่า border-collapse: separate;
คุณจะซ่อนเซลล์ว่างได้ด้วย empty-cells: hide;
ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดรูปแบบตารางได้จากสไลด์ชุดนี้แบบอินเทอร์แอกทีฟของรูปแบบ CSS เกี่ยวกับตาราง
ในตัวอย่าง เราได้เพิ่มเส้นขอบในตารางและแต่ละเซลล์ด้วย CSS เพื่อทำให้ฟีเจอร์บางอย่างชัดเจนขึ้น ดังนี้
ในตัวอย่างนี้ เรามีคำบรรยาย ส่วนหัวของตาราง และเนื้อหาตาราง ส่วนหัวมี 1 แถวที่มีส่วนหัว 3 เซลล์ <th>
จึงสร้างเป็น 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 และคอลัมน์ที่ 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>
ไม่มีความหมายเชิงความหมายในแง่ของการช่วยให้เข้าถึงตารางได้ง่ายขึ้น แต่อนุญาตให้ใช้การจัดรูปแบบคอลัมน์แบบจำกัด ซึ่งรวมถึงการกำหนดความกว้างของคอลัมน์ด้วย 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
ด้วย ถึงแม้ว่าจะฟังดูซ้ำซ้อน แต่พร็อพเพอร์ตี้ display
ของ CSS ก็อาจส่งผลต่อแผนผังการช่วยเหลือพิเศษในบางเบราว์เซอร์
การนำเสนอข้อมูล
องค์ประกอบตารางมีความหมายเชิงความหมายที่เทคโนโลยีความช่วยเหลือพิเศษใช้เพื่อให้ไปยังส่วนต่างๆ ของแถวและคอลัมน์ได้โดยที่ "ไม่หาย" ไม่ควรใช้องค์ประกอบ <table>
สำหรับการนำเสนอ หากต้องการส่วนหัวของรายการ ให้ใช้ส่วนหัวและรายการ หากต้องการจัดวางเนื้อหาในหลายคอลัมน์ ให้ใช้เลย์เอาต์หลายคอลัมน์
หากต้องการจัดวางเนื้อหาในตารางกริด ให้ใช้ตารางกริด CSS ใช้ตารางสำหรับข้อมูลเท่านั้น ลองคิดในลักษณะนี้ ถ้าข้อมูลของคุณต้องใช้สเปรดชีตเพื่อนำเสนอในการประชุม ให้ใช้ <table>
หากต้องการใช้ฟีเจอร์ที่มีให้ใช้งานในซอฟต์แวร์งานนำเสนอ เช่น Keynote หรือ PowerPoint คุณจะต้องใช้รายการคำอธิบาย
แม้ว่าการจัดเรียงคอลัมน์ในตารางจะเป็นขอบเขตการทำงานของ JavaScript แต่การมาร์กอัปส่วนหัวเพื่อแจ้งให้ผู้ใช้ทราบว่าคอลัมน์นั้นสามารถจัดเรียงได้ซึ่งเป็นขอบเขตของ HTML
แจ้งให้ผู้ใช้ทราบว่าสามารถจัดเรียงคอลัมน์ในตารางได้ด้วยระบบการตีความสัญลักษณ์จากน้อยไปมาก จากมากไปน้อย หรือไม่จัดเรียง คอลัมน์ที่จัดเรียงในปัจจุบันควรมีแอตทริบิวต์ aria-sort ที่มีค่าแจกแจงของทิศทางการจัดเรียง
<caption>
จะประกาศการอัปเดตอย่างสุภาพเพื่อจัดลำดับการจัดเรียงผ่าน aria-live และช่วงเวลาที่อัปเดตแบบไดนามิก และผู้ใช้โปรแกรมอ่านหน้าจอมองเห็นได้ เนื่องจากคอลัมน์จัดเรียงได้ด้วยการคลิกเนื้อหาส่วนหัว เนื้อหาส่วนหัวจึงควรเป็น <button>
หากคุณไม่ได้นำเสนอข้อมูลแบบตาราง อย่าใช้ <table>
หากคุณใช้ตารางสำหรับการนำเสนอ ให้ตั้งค่า role="none"
นักพัฒนาซอฟต์แวร์จำนวนมากใช้ตารางเพื่อจัดวางแบบฟอร์ม แต่ไม่จำเป็นต้องใช้ แต่คุณจำเป็นต้องทราบเกี่ยวกับรูปแบบ HTML ซึ่งเราจะพูดถึงเรื่องนี้ต่อไป
ทดสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับตาราง
องค์ประกอบใดใช้เพื่อมาร์กอัปเซลล์ที่เป็นส่วนหัว
<header>
<caption>
<th>
ข้อมูลใดน่าจะเหมาะกับเลย์เอาต์ที่มีตาราง
<dl>
มากกว่า<ul>
มากกว่า