วิธีปรับปรุงการเข้าถึงตาราง HTML ด้วยมาร์กอัป

ความสามารถในการเข้าถึงเว็บหมายถึงการออกแบบเว็บแอปพลิเคชันในลักษณะที่สามารถใช้งานได้ง่ายโดยผู้ที่มีความบกพร่องทางสายตา ผู้ใช้เหล่านี้บางคนพึ่งพา โปรแกรมอ่านหน้าจอ เพื่ออ่านเนื้อหาในหน้าเว็บ โปรแกรมอ่านหน้าจอ ตีความรหัสที่มีอยู่บนหน้า และ อ่านเนื้อหาให้กับผู้ใช้.

เป็นองค์ประกอบ HTML ที่ใช้กันอย่างแพร่หลายเพื่อแสดงข้อมูลในรูปแบบที่มีโครงสร้างในหน้าเว็บ การออกแบบมีตั้งแต่แบบธรรมดาไปจนถึงแบบซับซ้อนพร้อมหัวแถว, ส่วนหัวแบบผสานและอื่น ๆ.

หากตารางไม่ได้รับการออกแบบโดยคำนึงถึงความสามารถในการเข้าถึงผู้อ่านหน้าจอจะแปลข้อมูลในตารางที่ซับซ้อนได้ยากสำหรับผู้ใช้ ดังนั้นเพื่อให้ตาราง HTML ที่ซับซ้อนเข้าใจได้ง่ายขึ้นสำหรับการเข้าถึงเราต้อง ตรวจสอบให้แน่ใจว่ามีการกำหนดส่วนหัวกลุ่มคอลัมน์กลุ่มแถว ฯลฯ อย่างชัดเจน. เราจะดูด้านล่างว่ามันเป็นอย่างไร ทำได้ในมาร์กอัป.

คุณสมบัติขอบเขต

แม้กระทั่งสำหรับตารางง่ายๆด้วย

มาร์กอัปด้วย ขอบเขต = "พ" ช่วยให้เทคโนโลยีช่วยเหลือระบุว่าเซลล์ที่ตามมาในคอลัมน์เดียวกันเป็นชื่อของนักเรียน.

ในทำนองเดียวกันเซลล์เช่น

มี ขอบเขต = "COLGROUP" ช่วยให้ผู้ใช้ระบุว่าข้อมูลในเซลล์ที่ตามมาในกลุ่มคอลัมน์ที่ครอบคลุมนั้นเกี่ยวข้องกับเรื่องนั้น ๆ.

จากนั้นมี

มาร์กอัปด้วย ขอบเขต = "แถว" ที่กำหนดว่าเซลล์ที่ตามมาในแถวเดียวกันมี “เกรด” ข้อมูลเกี่ยวกับชื่อนักเรียนนั้น.

กลุ่มแถว

ตอนนี้ให้เราย้ายไปอีกตัวอย่างหนึ่งตัวอย่างนี้จะมีตารางเกือบเหมือนตารางด้านบนยกเว้นเราจะสลับแถวและส่วนหัวคอลัมน์ดังนั้นเราจะสามารถทำงานกับกลุ่มแถวได้.

แท็กที่กำหนดส่วนหัวอย่างชัดเจนคุณสามารถปรับปรุงการเข้าถึงได้ด้วย ขอบเขต คุณลักษณะและไม่ให้ความสับสนใด ๆ ที่อาจเกิดขึ้นจากข้อมูลประเภทเดียวกันในเซลล์.

  ชื่อพนักงาน  รหัสพนักงาน  รหัสโครงการ  การแต่งตั้งพนักงาน  
  จอห์นโด  32456  456789  ผู้อำนวยการ  
  Miriam Luther  78902  456789  รองผู้อำนวยการ

แอตทริบิวต์ขอบเขตทำอะไร ตาม W3C:

กล่าวอีกนัยหนึ่งมันช่วยให้เราเชื่อมโยงเซลล์ข้อมูลกับเซลล์ส่วนหัวที่เกี่ยวข้อง.

โปรดทราบว่าในตัวอย่างข้างต้นคุณสามารถสลับ

สำหรับ

. ตราบใดที่มัน ขอบเขต มีค่า เทือกเขา, มันจะถูกตีความว่าเป็นส่วนหัวของคอลัมน์ที่เกี่ยวข้อง.

ขอบเขต แอตทริบิวต์สามารถมีหนึ่งในสี่ค่าเหล่านี้ เทือกเขา, แถว, rowgroup, COLGROUP เพื่ออ้างถึงส่วนหัวของคอลัมน์ส่วนหัวของแถวกลุ่มส่วนหัวของคอลัมน์และส่วนหัวของแถวตามลำดับ.

ตารางที่ซับซ้อน

ตอนนี้ให้เราไปยังตารางที่ซับซ้อนมากขึ้น.

ด้านบนเป็นตารางที่แสดงรายชื่อนักเรียนในชั้นเรียนและผลการเรียนของพวกเขาทั้งภาคปฏิบัติและทฤษฎีสำหรับสามวิชา.

นี่คือรหัส HTML สำหรับมัน ตารางมีการใช้ rowspan และ colspan เพื่อสร้างส่วนหัวที่ผสานสำหรับเซลล์ข้อมูล.

  ชื่อนักเรียน  ชีววิทยา  เคมี  ฟิสิกส์  
  ประยุกต์  ทฤษฎี  ประยุกต์  ทฤษฎี  ประยุกต์  ทฤษฎี  
  จอห์นโด   +  B    -  
  Miriam Luther    C  C+   -

ในตารางข้างต้นแต่ละเซลล์ข้อมูลนั่นคือแต่ละเซลล์ตาราง แสดงเกรด, เชื่อมโยงกับข้อมูลสามส่วน:

นักเรียนคนไหนทำคะแนนนี้?
วิชานี้เป็นวิชาอะไร?
เป็นเกรดนี้สำหรับส่วน Practical หรือ Theory?

ข้อมูลทั้งสามนั้นถูกกำหนดไว้ในเซลล์ส่วนหัวสามประเภทที่มีโครงสร้างและมองเห็นได้:

ชื่อนักเรียน
ชื่อเรื่อง
ปฏิบัติหรือทฤษฎี

ขอนิยามเดียวกันสำหรับความสามารถในการเข้าถึง.

      ชื่อนักเรียน  ชีววิทยา  เคมี  ฟิสิกส์  
  ประยุกต์  ทฤษฎี  ประยุกต์  ทฤษฎี  ประยุกต์  ทฤษฎี  
  จอห์นโด   +  B    -  
  Miriam Luther    C  C+   -

ในมาร์กอัปด้านบนเราได้เพิ่ม ขอบเขต ไปยังเซลล์ที่มีข้อมูลส่วนหัวเกี่ยวกับเซลล์ข้อมูล.

กลุ่มคอลัมน์

ชีววิทยาเคมีและเซลล์ฟิสิกส์ต้องเชื่อมโยงกับกลุ่มของสองคอลัมน์แต่ละอัน (ทฤษฎีและการปฏิบัติ) เพียงแค่เพิ่ม colspan = "2" ไม่ได้สร้างกลุ่มคอลัมน์เพียงแสดงว่าเซลล์นั้นมีพื้นที่ว่างสองเซลล์.

ในการสร้างกลุ่มคอลัมน์คุณต้องใช้ COLGROUP แล้วเพิ่ม ระยะ แอตทริบิวต์ที่ระบุจำนวนคอลัมน์ที่กลุ่มคอลัมน์มี.

ชื่อนักเรียน

ชีววิทยา

จอห์นโด

เรื่อง		จอห์นโด	Miriam Luther
ชีววิทยา	ประยุกต์
ชีววิทยา	ทฤษฎี	+
เคมี	ประยุกต์	B	C
เคมี	ทฤษฎี		C+
ฟิสิกส์	ประยุกต์
ฟิสิกส์	ทฤษฎี	-	-

ตอนนี้เรามีตัวอย่างของเราที่จะทำงานกับให้เราเริ่มต้นด้วยการสร้างกลุ่มแถวเหมือนที่เราทำกับกลุ่มคอลัมน์ในตัวอย่างก่อนหน้า.

อย่างไรก็ตามไม่สามารถสร้างกลุ่มแถวโดยใช้แท็กเช่น COLGROUP เพราะไม่มี rowgroup ธาตุ.

โดยทั่วไปแถว HTML จะถูกจัดกลุ่มโดยใช้ , และ องค์ประกอบ HTML เดียว

องค์ประกอบสามารถมีหนึ่ง , หนึ่ง และหลายรายการ . เราจะใช้หลายอย่าง tbody ในตารางของเราเพื่อสร้างกลุ่มแถวและเพิ่มขอบเขตให้กับเซลล์ส่วนหัว.

เรื่อง		จอห์นโด	Miriam Luther
ชีววิทยา	ประยุกต์
ชีววิทยา	ทฤษฎี	+
เคมี	ประยุกต์	B	C
เคมี	ทฤษฎี		C+
ฟิสิกส์	ประยุกต์
ฟิสิกส์	ทฤษฎี	-	-

เราได้เพิ่มแถว “ประยุกต์” และ “ทฤษฎี” ในแต่ละ tbody สร้างกลุ่มแถวที่มีสองแถวในแต่ละ เรายังได้เพิ่ม ขอบเขต = "rowgroup" ไปยังเซลล์ที่มีข้อมูลส่วนหัวเกี่ยวกับสองแถวเหล่านั้น (ซึ่งเป็นชื่อเรื่องที่เกรดนั้นเป็นของในกรณีนี้).

ตอนนี้อ่าน: ความสูงของคอลัมน์เท่ากับด้วย CSS