Test 3 — Tables

# 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: มีช่องว่างระหว่างเซลล์