ตาราง

ตาราง 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> อาจมีองค์ประกอบคอลัมน์ตาราง (<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 อย่างเต็มรูปแบบ ด้านบนคืองานนำเสนอของเบราว์เซอร์เริ่มต้น

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

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

เนื้อหาของตารางประกอบด้วยส่วนต่างๆ สูงสุด 3 ส่วน ได้แก่ ส่วนหัวของตาราง (<thead>) เนื้อความของตาราง (<tbody>) และส่วนท้ายของตาราง (<tfoot>) โดยส่วนต่างๆ เหล่านี้เป็นตัวเลือกที่ไม่บังคับและระบบรองรับส่วนต่างๆ เหล่านี้ตั้งแต่ 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> แต่ละรายการ

มีแอตทริบิวต์สำหรับเพิ่มระยะห่างจากขอบระหว่างเซลล์และภายในเซลล์ สําหรับเส้นขอบ และการจัดแนวข้อความ ควรตั้งค่า Cellpadding และ cellspacing ซึ่งกำหนดระยะห่างระหว่างเนื้อหาของเซลล์กับเส้นขอบของเซลล์ และระหว่างเส้นขอบของเซลล์ที่อยู่ติดกันด้วยพร็อพเพอร์ตี้ border-collapse และ 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 ส่วน ได้แก่ ปีและ 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 ใช้เพื่อผสานเซลล์ที่อยู่ติดกันอย่างน้อย 2 เซลล์ภายในแถวเดียว แอตทริบิวต์ rowspan ใช้เพื่อผสานเซลล์ในแถวต่างๆ โดยวางไว้บนเซลล์ในแถวบนสุด

ในตัวอย่างนี้ ส่วนหัวของตารางมี 2 แถว แถวส่วนหัวแรกมี 3 เซลล์ที่ครอบคลุม 4 คอลัมน์ โดยเซลล์กลางมี colspan="2" ซึ่งจะผสานเซลล์ที่อยู่ติดกัน 2 เซลล์ เซลล์แรกและเซลล์สุดท้ายมี rowspan="2" ซึ่งจะผสานเซลล์นั้นกับเซลล์ในแถวถัดไปที่อยู่ด้านล่าง

แถวที่ 2 ในส่วนหัวของตารางมี 2 เซลล์ ซึ่งเป็นเซลล์ของคอลัมน์ที่ 2 และ 3 ในแถวที่ 2 ไม่มีการประกาศเซลล์สําหรับคอลัมน์แรกหรือคอลัมน์สุดท้าย เนื่องจากเซลล์ในคอลัมน์แรกและคอลัมน์สุดท้ายในแถวแรกครอบคลุม 2 แถว

ในกรณีที่เซลล์หนึ่งๆ กำหนดโดยเซลล์ส่วนหัวหลายเซลล์ที่มีการเชื่อมโยงซึ่งไม่สามารถตั้งค่าได้ด้วยแอตทริบิวต์ scope เพียงอย่างเดียว ให้ใส่แอตทริบิวต์ headers พร้อมรายการส่วนหัวที่เชื่อมโยงโดยคั่นด้วยเว้นวรรค เนื่องจากตัวอย่างนี้เป็นตารางที่ซับซ้อนกว่า เราจึงกําหนดขอบเขตของส่วนหัวอย่างชัดเจนด้วยแอตทริบิวต์ scope เพื่อความชัดเจนยิ่งขึ้น เราเพิ่มแอตทริบิวต์ headers ลงในเซลล์แต่ละเซลล์

คุณอาจไม่จำเป็นต้องใช้แอตทริบิวต์ headers ใน Use Case ที่เรียบง่ายเช่นนี้ แต่ควรมีไว้ในกล่องเครื่องมือเมื่อตารางมีความซับซ้อนมากขึ้น ตารางที่มีโครงสร้างซับซ้อน เช่น ตารางที่ผสานส่วนหัวหรือเซลล์ หรือมีส่วนหัวของคอลัมน์หรือแถวมากกว่า 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()

การแสดงผลแบบเลเยอร์ขององค์ประกอบที่ใช้ออกแบบตาราง HTML

หากทั้ง <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 Grid ใช้ตารางสำหรับข้อมูลเท่านั้น ลองคิดแบบนี้ หากข้อมูลต้องใช้สเปรดชีตเพื่อนำเสนอในการประชุม ให้ใช้<table> หากต้องการใช้ฟีเจอร์ที่มีในซอฟต์แวร์นำเสนอ เช่น Keynote หรือ PowerPoint คุณอาจต้องใช้รายการคำอธิบาย

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

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

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

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

องค์ประกอบใดที่ใช้ทำเครื่องหมายเซลล์ที่เป็นส่วนหัว

<header>
<th>
<caption>

ข้อมูลใดมีแนวโน้มที่จะเหมาะกับเลย์เอาต์ที่มีตาราง

สเปรดชีตที่มีรายละเอียดของนักเรียนและคะแนนตลอด 3 ภาคการศึกษา
ส่วนผสมสำหรับสูตรอาหาร
คําศัพท์ทางวิทยาศาสตร์และคำอธิบาย