ตาราง

ตาราง HTML แสดงข้อมูลแบบตารางที่มีแถวและคอลัมน์ คุณควรเลือกใช้ <table> ตามเนื้อหาที่แสดงและความต้องการของผู้ใช้ ที่เกี่ยวข้องกับเนื้อหานั้น หากมีการนำเสนอ เปรียบเทียบ จัดเรียง คำนวณ หรืออ้างอิงโยงข้อมูล <table> น่าจะเป็นตัวเลือกที่เหมาะสม หากคุณสนใจจัดระเบียบเนื้อหาที่ไม่ใช่แบบตาราง เช่น เช่น กลุ่มภาพขนาดย่อจำนวนมาก ตารางจะไม่เหมาะสม แต่ให้สร้างรายการรูปภาพและจัดรูปแบบตารางกริดด้วย CSS แทน

ในส่วนนี้ เราจะพูดถึงองค์ประกอบทั้งหมดที่ประกอบกันเป็นตาราง รวมถึง ฟีเจอร์การช่วยเหลือพิเศษและการใช้งานบางอย่างที่ควรพิจารณาเมื่อนำเสนอข้อมูลในรูปแบบตาราง แม้ว่าบทเรียน HTML จะไม่ได้มุ่งเน้นที่ CSS แต่เราจะกล่าวถึงคุณสมบัติ 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>อาจมีองค์ประกอบคอลัมน์ตาราง (<col>) ที่ซ้อนกันอยู่ ทั้งนี้ขึ้นอยู่กับว่า<colgroup>มีแอตทริบิวต์spanหรือไม่

โดยรายการย่อยของตารางคือ

1. องค์ประกอบ <caption>
2. องค์ประกอบ <colgroup>
3. องค์ประกอบ <thead>
4. องค์ประกอบ <tbody>
5. องค์ประกอบ <tfoot>

เราจะพูดถึงองค์ประกอบย่อยของ <table> ซึ่งเป็นองค์ประกอบที่ไม่บังคับแต่ขอแนะนำ จากนั้นจะดูแถว เซลล์ส่วนหัวของตาราง และเซลล์ข้อมูลของตาราง ส่วน <colgroup> จะอธิบายเป็นส่วนสุดท้าย

คำอธิบายตาราง

วิธีการตั้งชื่อตารางที่แนะนำคือองค์ประกอบเชิงความหมาย <caption> <caption> ระบุชื่อตารางที่สื่อความหมายซึ่งเชื่อมโยงกับโปรแกรม โดยค่าเริ่มต้น ฟีเจอร์นี้จะปรากฏและพร้อมให้บริการแก่ผู้ใช้ทุกคน

องค์ประกอบ <caption> ควรเป็นองค์ประกอบแรกที่ซ้อนอยู่ในองค์ประกอบ <table> การใส่คำอธิบายจะช่วยให้ผู้ใช้ทุกคนทราบ วัตถุประสงค์ของตารางได้ทันทีโดยไม่ต้องอ่านข้อความโดยรอบ หรือคุณจะใช้ aria-label หรือ aria-labelledby ใน <table> เพื่อระบุชื่อที่เข้าถึงได้เป็นคำบรรยายแทนเสียงก็ได้ องค์ประกอบ <caption> ไม่มีแอตทริบิวต์เฉพาะองค์ประกอบ

คำบรรยายจะปรากฏนอกตาราง คุณตั้งค่าตำแหน่งของคำบรรยายแทนเสียงได้ด้วยพร็อพเพอร์ตี้ caption-side ของ CSS ซึ่งเป็นวิธีที่ดีกว่าการใช้แอตทริบิวต์ align ที่เลิกใช้งานแล้ว ซึ่งจะตั้งค่าคำบรรยายแทนเสียงไว้ที่ด้านบนและด้านล่างได้ ระบบยังไม่รองรับการจัดตำแหน่งด้านซ้ายและขวาด้วย inline-start และ inline-end โดยสมบูรณ์ Top คือการนำเสนอเบราว์เซอร์เริ่มต้น

ตารางข้อมูลควรมีส่วนหัวและคำอธิบายที่ชัดเจน และมีความชัดเจนมากพอที่จะอธิบายตัวเองได้ โปรดทราบว่า ผู้ใช้แต่ละรายมีความสามารถทางสติปัญญาไม่เหมือนกัน เมื่อตาราง "แสดงประเด็น" หรือต้องมีการตีความ ให้สรุปประเด็นหรือฟังก์ชันหลักของตารางโดยย่อ ตำแหน่งของข้อมูลสรุปจะขึ้นอยู่กับความยาวและความซับซ้อนของข้อมูล หากข้อความสั้น ให้ใช้เป็นข้อความด้านในของคำบรรยายแทนเสียง หากยาวกว่านั้น ให้สรุปในคำบรรยายแทนเสียง และระบุสรุปใน ย่อหน้าก่อนหน้าตาราง โดยเชื่อมโยงทั้ง 2 อย่างด้วยแอตทริบิวต์ aria-describedby การใส่ตารางใน <figure> และใส่ข้อมูลสรุปใน <figcaption> เป็นอีกตัวเลือกหนึ่ง

การแบ่งส่วนข้อมูล

เนื้อหาของตารางประกอบด้วยส่วนต่างๆ สูงสุด 3 ส่วน ได้แก่ ส่วนหัวของตาราง (<thead>) ส่วนเนื้อหาของตาราง (<tbody>) และส่วนท้ายของตาราง (<tfoot>) ซึ่งอาจมีหรือไม่มีก็ได้ โดยระบบรองรับส่วนต่างๆ เหล่านี้ตั้งแต่ 0 รายการขึ้นไป

องค์ประกอบเหล่านี้ไม่ได้ช่วยหรือขัดขวางการช่วยเหลือพิเศษของตาราง แต่มีประโยชน์ในแง่ของการใช้งาน โดยมี ฮุกการจัดรูปแบบ เช่น เนื้อหาส่วนหัวสามารถทำให้ติดหนึบ ขณะที่เนื้อหา<tbody>สามารถทำให้เลื่อนได้ แถวที่ไม่ได้ซ้อนอยู่ในองค์ประกอบที่ประกอบด้วย 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>

มีแอตทริบิวต์สำหรับเพิ่มระยะห่างระหว่างเซลล์และภายในเซลล์ สำหรับเส้นขอบ และสำหรับการจัดแนวข้อความ ควรตั้งค่า Cellpadding และ cellspacing ซึ่งกำหนดช่องว่างระหว่างเนื้อหาของเซลล์และเส้นขอบของเซลล์ รวมถึงระหว่างเส้นขอบของเซลล์ที่อยู่ติดกัน ด้วยพร็อพเพอร์ตี้ 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 รายการ ได้แก่ ปีและ Lou Minious การเชื่อมโยงนี้บอกให้เราทราบว่า "1956" คือ "ปี" ที่ "Lou Minious" จบการศึกษา ในตัวอย่างนี้ เราจะเห็นตารางทั้งหมด ดังนั้นการเชื่อมโยงจึงเห็นได้ชัด การใช้ <th> จะช่วยให้การเชื่อมโยงยังคงอยู่แม้ว่าคอลัมน์หรือแถวส่วนหัวจะเลื่อนออกนอกมุมมองไปแล้วก็ตาม เราอาจตั้งค่า <th scope="col">Year</th> และ <th scope="row">Lou Minious</th> อย่างชัดเจน แต่เมื่อใช้ตารางเช่นนี้ ค่าเริ่มต้นที่แจกแจงไว้จะใช้งานได้ ค่าอื่นๆ สำหรับ scope ได้แก่ rowgroup และ colgroup ซึ่งมีประโยชน์กับตารางที่ซับซ้อน

ผสานเซลล์

คุณสามารถรวมหลายเซลล์เป็นเซลล์เดียวได้เช่นเดียวกับใน MS Excel, Google ชีต และ Numbers ซึ่งทำได้ด้วยแอตทริบิวต์ HTML colspan และ rowspan ดังนี้

• 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> ไม่มีความหมายเชิงความหมาย ซึ่งจะส่งผลต่อการเข้าถึงตาราง แต่ช่วยคุณจัดรูปแบบคอลัมน์ ด้วย CSS ได้ เช่น การตั้งค่าความกว้าง

สไตล์ที่เกี่ยวข้องกับ <td> และ <th> จะลบล้างสไตล์ <col> ใน CodePen เราตั้งค่า colspan เพื่อผสานแถวบางแถวของตาราง แต่ไม่ใช่ทั้งหมด หากใช้ตัวเลือก CSS ของ nth-child กับ <tr> การดำเนินการนี้อาจส่งผลต่อรูปแบบ ทั้งนี้ขึ้นอยู่กับแถวหรือคอลัมน์ที่ผสาน

แต่ระบบรองรับพร็อพเพอร์ตี้เพียงไม่กี่รายการเท่านั้น ระบบจะไม่รับค่าสไตล์ในเซลล์ และวิธีเดียวในการกำหนดเป้าหมายเซลล์ด้วย <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 Grid

ใช้ตารางสำหรับข้อมูลเท่านั้น

ลองคิดแบบนี้ หากข้อมูลของคุณต้องใช้สเปรดชีตเพื่อนำเสนอในการประชุม ให้ใช้ <table> หากต้องการใช้ฟีเจอร์ที่มีในซอฟต์แวร์งานนำเสนอ เช่น Google สไลด์หรือ PowerPoint คุณอาจต้องใช้รายการคำอธิบาย

กล่าวโดยสรุปคือ หากไม่ได้นำเสนอข้อมูลตาราง อย่าใช้ <table> หากใช้ตารางในการนำเสนอ ให้ตั้งค่า role="none"

นักพัฒนาแอปหลายคนใช้ตารางเพื่อจัดวางแบบฟอร์ม แต่ไม่จำเป็นต้องทำเช่นนั้น คุณต้องทราบเกี่ยวกับแบบฟอร์ม HTML

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับตาราง