Test 3: Tables (ตาราง)

ทดสอบตารางยาวข้ามหน้า, thead/tfoot repeat, colspan/rowspan, และ border-collapse

Test 3.1 — ตารางยาวข้ามหน้า (Long Table)

ตาราง 50 แถว — ควรไหลข้ามหน้าได้ถูกต้อง:

# ชื่อ-นามสกุล ตำแหน่ง เงินเดือน
1 สมชาย ใจดี ผู้จัดการ 55,000
2 สมหญิง รักไทย หัวหน้าฝ่าย 45,000
3 ประเสริฐ มั่นคง วิศวกร 42,000
4 อรุณี สว่างใจ นักบัญชี 38,000
5 วิชัย ก้าวหน้า โปรแกรมเมอร์ 50,000
6 พรพิมล ศรีสุข นักออกแบบ 40,000
7 ธนพล เจริญกิจ นักวิเคราะห์ 43,000
8 จิราภรณ์ สุขใจ เลขานุการ 32,000
9 กิตติพงษ์ ยิ่งใหญ่ หัวหน้าทีม 48,000
10 นันทนา อุดมผล ผู้ชำนาญการ 46,000
11 ศักดิ์ชัย พลศักดิ์ วิศวกรอาวุโส 58,000
12 อัญชลี งามวงศ์ ผู้ช่วยผจก. 35,000
13 พิชิต ชัยฤทธิ์ โปรแกรมเมอร์ 52,000
14 รัชนี โชตินันท์ นักทดสอบ 37,000
15 ภูวดล ภูผา DevOps 55,000
16 มณีรัตน์ แก้วใส UX Designer 44,000
17 ชัยวัฒน์ ธรรมดา ที่ปรึกษา 60,000
18 สุดา วิไลวรรณ การเงิน 36,000
19 เกียรติศักดิ์ ศิลป์ดี Fullstack Dev 54,000
20 ปัทมา ดอกไม้ ธุรการ 30,000
21 อนุชา รุ่งเรือง วิศวกร 42,000
22 กนกพร เพชรดี โปรแกรมเมอร์ 48,000
23 สุรศักดิ์ มุ่งมั่น Sr. Developer 62,000
24 วราภรณ์ ชื่นใจ PM 56,000
25 กฤษณะ นาคสุด Data Engineer 58,000
26 พิมพ์ใจ ใสสะอาด QA Lead 47,000
27 สาธิต บุญมาก SRE 53,000
28 ลักขณา ใจเย็น Scrum Master 50,000
29 วรวุฒิ ปราชญ์ Tech Lead 65,000
30 จันทร์จิรา งามตา Frontend Dev 45,000
31 ทวีศักดิ์ ฤกษ์ดี Backend Dev 51,000
32 ปภาดา สุวรรณ Designer 40,000
33 ณรงค์ ตรงใจ เจ้าหน้าที่IT 35,000
34 อรพรรณ ศิริ HR 38,000
35 ชนินทร์ วงศ์ดี CTO 80,000
36 จุฑามาศ แจ่มใส COO 75,000
37 ไกรศร เข้มแข็ง Architect 70,000
38 ดวงใจ สดใส Marketing 42,000
39 ปรีชา ลึกซึ้ง Research 45,000
40 สุภาวดี อ่อนหวาน Support 32,000
✓ ตารางต้องไหลข้ามหน้าได้โดยโครงสร้างไม่พัง, เส้นขอบต่อเนื่อง

Test 3.2 — Repeating thead/tfoot

ตารางที่มี thead และ tfoot — ควรพิมพ์ซ้ำทุกหน้า:

รหัส สินค้า จำนวน ราคา/หน่วย รวม
รวมทั้งหมด ฿ 999,999
P001 คอมพิวเตอร์โน้ตบุ๊ก 5 35,000 175,000
P002 หน้าจอมอนิเตอร์ 27" 10 12,000 120,000
P003 คีย์บอร์ด Mechanical 15 3,500 52,500
P004 เมาส์ไร้สาย 20 1,200 24,000
P005 เครื่องพิมพ์เลเซอร์ 3 15,000 45,000
P006 แท็บเล็ต 8 18,000 144,000
P007 หูฟังบลูทูธ 25 2,500 62,500
P008 Webcam HD 12 1,800 21,600
P009 UPS สำรองไฟ 6 8,000 48,000
P010 เราเตอร์ Wi-Fi 6 4 5,500 22,000
P011 SSD 1TB NVMe 15 3,200 48,000
P012 RAM DDR5 32GB 10 4,500 45,000
P013 ชุดอุปกรณ์สำนักงาน 30 800 24,000
P014 โปรเจ็กเตอร์ 2 25,000 50,000
P015 กระดานไวท์บอร์ด 5 3,000 15,000
✓ thead repeat ทำงานแล้ว — หัวตารางซ้ำทุกหน้า, tfoot repeat ทำงานแล้ว — ท้ายตารางซ้ำทุกหน้า

Test 3.3 — Colspan & Rowspan

หมวด รายการ Q1 Q2 Q3 Q4
รายรับ ยอดขาย 1.2M 1.5M 1.8M 2.1M
บริการ 0.3M 0.4M 0.5M 0.6M
รวมรายรับ 1.5M 1.9M 2.3M 2.7M
รายจ่าย เงินเดือน 0.8M 0.8M 0.9M 0.9M
วัตถุดิบ 0.3M 0.4M 0.4M 0.5M
รวมรายจ่าย 1.1M 1.2M 1.3M 1.4M
กำไรสุทธิ 0.4M 0.7M 1.0M 1.3M
✓ colspan ต้องรวมเซลล์ถูกต้อง, ความกว้างพอดี

Test 3.4 — Border Collapse

border-collapse: collapse (เส้นขอบซ้อนทับ ไม่หนา 2 เท่า):

A1 B1 C1
A2 B2 C2
A3 B3 C3

border-collapse: separate (เส้นขอบแยก เห็นช่องว่าง):

A1 B1 C1
A2 B2 C2
✓ collapse: เส้นขอบหนา 2px ไม่ใช่ 4px — separate: มีช่องว่างระหว่างเซลล์