Box Model

1. Core Idea

border-collapse ใช้กำหนดว่าเส้นขอบของ table cell ควรแยกกันหรือรวมกันเป็นเส้นเดียว เวลาทำตารางข้อมูลจริง ถ้าไม่เข้าใจ property นี้ ตารางมักดูเหมือนมีเส้นขอบหนาซ้อนกันระหว่างช่อง

• ใช้กับ element ที่เป็น table เช่น table หรือ element ที่ตั้ง display เป็น table
• ค่า separate คือ cell แต่ละช่องมี border ของตัวเอง
• ค่า collapse คือ border ที่ติดกันถูกรวมเป็นเส้นเดียว
• border-spacing มีผลเฉพาะตอนใช้ separate

2. Mental Model

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

3. Rule / Definition

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #94a3b8;
  padding: 8px 10px;
}

4. Worked Example

• เริ่มจากมี table ที่ th และ td ทุกช่องมี border
• ถ้าใช้ค่า default อย่าง separate เส้นขอบของช่องที่อยู่ติดกันจะยังเป็นของใครของมัน
• เมื่อตั้ง border-collapse: collapse บน table เส้นที่ชนกันจะรวมเป็นเส้นเดียว
• ถ้าอยากเว้นช่องระหว่าง cell ให้ใช้ separate พร้อม border-spacing แทน

5. Code Example

6. Recap

• ตั้ง border-collapse บน table ไม่ใช่บน td ทีละช่อง
• ใช้ collapse เมื่อต้องการเส้นตารางคม สะอาด และไม่ซ้อนหนา
• ใช้ separate เมื่อต้องการให้ cell แยกเป็นกล่อง และอาจใช้ border-spacing เพิ่มช่องว่าง
• border-spacing จะไม่เห็นผลเมื่อ table ใช้ border-collapse: collapse

Lab 1: ฝึกใช้ separate

เป้าหมาย: เข้าใจว่า separate ทำให้ cell แต่ละช่องยังมี border ของตัวเอง และสามารถเว้นช่องว่างด้วย border-spacing ได้

Lab 2: ฝึกใช้ collapse

เป้าหมาย: ฝึกใช้ collapse เพื่อลดเส้นขอบที่ซ้อนกันระหว่าง cell ให้กลายเป็นเส้นเดียว

Lab 3: แก้ตารางให้เส้นขอบไม่ซ้อนกัน

เป้าหมาย: เลือกใช้ collapse กับตารางข้อมูลจริง และไม่พึ่ง border-spacing เพราะ border-spacing ไม่มีผลเมื่อ table อยู่ในโหมด collapse