ตาราง 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
หรือไม่
ตารางย่อยของตารางมีดังนี้
- องค์ประกอบ
<caption>
- องค์ประกอบ
<colgroup>
- องค์ประกอบ
<thead>
- องค์ประกอบ
<tbody>
- องค์ประกอบ
<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()
หากทั้ง <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 เราจะพูดถึงเรื่องนี้ในลำดับถัดไป
ทดสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับตาราง
องค์ประกอบใดที่ใช้ทำเครื่องหมายเซลล์ที่เป็นส่วนหัว
<caption>
<header>
<th>
ข้อมูลใดมีแนวโน้มที่จะเหมาะกับเลย์เอาต์ที่มีตาราง