Web Accessibility Academy · บทเรียน

หัวแถวและหัวคอลัมน์ที่กำหนดอย่างถูกต้อง

เชื่อมทุกเซลล์กับหัวตารางที่ถูกต้อง

บทเรียน 2 จาก 413 ขั้นตอน

หัวแถวและหัวคอลัมน์ที่กำหนดอย่างถูกต้อง เป็นบทเรียน Web Accessibility Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web Accessibility Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน

ตารางส่วนใหญ่มีหัวตารางสองประเภท

ข้อมูลจริงมักมีหัวตารางอยู่ด้านบนและด้านข้าง แต่ละเซลล์ข้อมูลอยู่ตรงจุดตัดของ หัวคอลัมน์กับหัวแถว

ทุกเซลล์ต้องมีทั้งสองอย่าง

ค่า 92 เพียงอย่างเดียวมีความหมายน้อยมาก เมื่อเชื่อมโยงกับ Ada และ Score ก็จะกลายเป็น Ada, Score, 92 การจับคู่นี้คือ ความสัมพันธ์ที่คุณกำลังสร้าง

หัวคอลัมน์พาดผ่านด้านบน

แถวแรกมีหัวตาราง scope=col เมื่อผู้ใช้เลื่อนลงในคอลัมน์ โปรแกรมอ่านหน้าจอจะประกาศหัวคอลัมน์นั้นซ้ำเพื่อให้มีบริบท

<tr>
  <th scope="col">Student</th>
  <th scope="col">Score</th>
</tr>

หัวแถวเรียงลงด้านข้าง

เซลล์แรกของแต่ละแถวข้อมูลจะกลายเป็นหัว scope=row เซลล์นี้ตั้งชื่อแถว ทำให้ค่าต่าง ๆ มีข้อมูลว่าเป็นของใครหรือเกิดขึ้นเมื่อใดขณะผู้ใช้อ่านไปทางขวา

<tr>
  <th scope="row">Ada</th>
  <td>92</td>
</tr>

เซลล์มุม

เซลล์มุมซ้ายบนมักอยู่เหนือหัวแถวและถัดจากหัวคอลัมน์ การปล่อยให้เป็น th ว่าง ๆ เป็นเรื่องปกติและช่วยรักษาโครงสร้างตารางให้ถูกต้อง

<tr><th></th><th scope="col">Score</th></tr>

scope เริ่มต้นเป็นกับดัก

เบราว์เซอร์พยายามเดา scope แต่การเดานั้นไม่น่าเชื่อถือสำหรับตารางที่ซับซ้อนกว่าตารางพื้นฐานที่สุด ให้กำหนด scope เองเสมอเพื่อความแน่นอน

ใช้ thead และ tbody

ห่อแถวหัวตารางด้วย thead และแถวข้อมูลด้วย tbody วิธีนี้ทำให้โครงสร้างชัดเจนสำหรับเทคโนโลยีสิ่งอำนวยความสะดวก และทำให้มาร์กอัปอ่านง่ายขึ้นมาก

<thead>
  <tr><th scope="col">Name</th></tr>
</thead>
<tbody>
  <tr><th scope="row">Ada</th></tr>
</tbody>

โปรแกรมอ่านหน้าจออ่านอย่างไร

เมื่อไปยังเซลล์ข้อมูล ผู้ใช้จะได้ยินหัวแถว หัวคอลัมน์ แล้วจึงค่าข้อมูล scope ที่ดีทำให้ การประกาศนี้ถูกต้อง

เซลล์หัวตารางหนึ่งเซลล์ หนึ่งหน้าที่

ให้ th ทำหน้าที่เดียว ได้แก่หัวคอลัมน์หรือหัวแถว การผสมข้อมูลกับป้ายกำกับไว้ในเซลล์เดียวทำให้ ความสัมพันธ์สับสนสำหรับทุกคน

ทดสอบโดยอ่านทีละเซลล์

เลือกเซลล์ข้อมูลแบบสุ่มแล้วถามว่า หัวตารางของเซลล์นั้นอธิบายได้ครบถ้วนหรือไม่ หากคุณบอกไม่ได้ว่าตัวเลขหมายถึงอะไรจากหัวตาราง แสดงว่า scope ของคุณไม่ถูกต้อง

ตัวอย่างสองแกน

หัวคอลัมน์อยู่ด้านบน หัวแถวอยู่ด้านซ้าย และข้อมูลอยู่ตรงกลาง รูปทรงแบบ เมทริกซ์นี้ครอบคลุมตารางส่วนใหญ่ที่คุณจะสร้าง

<tr><th scope="row">Ada</th><td>92</td><td>88</td></tr>

ตรวจสอบอย่างรวดเร็ว

ผู้ใช้เลื่อนไปยังเซลล์ข้อมูลที่อยู่ลึกเข้าไปในตารางที่กำหนดโครงสร้างไว้อย่างดี

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป: สองแกน สอง scope

หัวคอลัมน์ใช้ scope=col หัวแถวใช้ scope=row และเซลล์ข้อมูลทุกเซลล์อยู่ตรงจุดตัดของทั้งสอง กำหนด scope เองและอย่าเชื่อการเดา

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 30
บทเรียน: 120

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “หัวแถวและหัวคอลัมน์ที่กำหนดอย่างถูกต้อง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “หัวแถวและหัวคอลัมน์ที่กำหนดอย่างถูกต้อง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Web Accessibility Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “หัวแถวและหัวคอลัมน์ที่กำหนดอย่างถูกต้อง”

เชื่อมทุกเซลล์กับหัวตารางที่ถูกต้อง คุณปฏิบัติ Web Accessibility Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Web Accessibility Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Web Accessibility Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “หัวแถวและหัวคอลัมน์ที่กำหนดอย่างถูกต้อง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Web Accessibility Academy นี้ได้ไหม

ได้ บทเรียน Web Accessibility Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Web Accessibility Academy