สร้างตาราง (Tables)

สร้างตาราง

สร้างตารางได้โดยใช้ Tag <table>

แต่ละแถวของตารางใช้ Tag <tr>

หัวคอลัมน์ใช้ Tag <th> ตัวอักษรจะเป็นตัวหนาและตัวอักษรจะจัดอยู่ตรงกลางอัตโนมัติ

สร้างเซลล์ใส่ข้อมูลใช้ Tag <td> ซึ่งสามารถใส่ข้อมูลอะไรก็ได้ ไม่ว่าจะเป็นข้อความ รูป ลิสต์ หรือตารางซ้อนตาราง

ใส่กรอบตาราง

ถ้าเราไม่ตั้งค่ากรอบ เบราว์เซอร์จะไม่แสดงกรอบให้

ซึ่งเราสามารถระบุค่ากรอบได้ โดยใช้ CSS property border

กรอบเส้นเดียว

ถ้าเราไม่ตั้งค่าใดๆ กรอบจะมีค่า default เป็นกรอบ 2 ชั้น

ถ้าเราต้องการระบุให้กรอบมีชั้นเดียว ให้ใช้ CSS property border-collapse แล้วกำหนดค่าเป็น collapse

เพิ่มระยะห่างภายในเซลล์ (Paadding)

ถ้าเราไม่กำหนดค่าใดๆ เริ่มต้นตารางจะมีระยะห่างระหว่างข้อมูลภายในเซลล์และกรอบของมันเท่ากับศูนย์

เราสามารถระบุระยะห่างระหว่างข้อมูลภายในเซลล์และกรอบของมันได้ ด้วยการใช้ CSS property padding

ข้อความหัวคอลัมน์ชิดซ้าย (Left Align)

ค่าเริ่มต้นของหัวคอลัมน์ <th> จะเป็นตัวหนาและตัวอักษรอยู่ตรงกลาง

ถ้าเราต้องการให้ข้อความอยู่ชิดซ้าย ให้ใช้ CSS property text-align

เพิ่มระยะห่างระหว่างเซลล์

เพิ่มระยะห่างระหว่างเซลล์ในตาราง ให้ใช้ CSS property border-spacing

รวมเซลล์แนวนอน (Column Span)

การรวมหลายๆ คอลัมน์เป็นเซลล์เดียว ให้ใช้ Attribute colspan แล้วใส่ค่าเป็นจำนวนคอลัมน์ถัดไปที่ต้องการรวม

รวมเซลล์แนวตั้ง (Row Span)

การรวมหลายๆ แถวเป็นเซลล์เดียว ให้ใช้ Attribute rowspan แล้วใส่ค่าเป็นจำนวนแถวถัดไปที่ต้องการรวม

ใส่หัวเรื่อง (Caption)

การใส่หัวเรื่องให้กับตาราง เราใช้ Tag <caption> และใส่ภายในและหลังจาก Element <table> ทันที

ตกแต่งตารางเฉพาะ

ถ้าเราต้องการกำหนดค่า CSS ให้กับแค่บางตารางเท่านั้น เราสามารถใช้ Attribute id หรือ Attribute class

ถ้าเฉพาะเจาะจงตารางเดียว ให้ใช้ Attribute id

ถ้ากำหนดแค่เป็นกลุ่มประเภทตาราง ให้ใช้ Attribute class

ใส่สีแถวสลับกัน

บทสรุป

• ใช้ <table> สร้างตาราง
• ใช้ <tr> สร้างแถว
• ใช้ <td> สร้างเซลล์ใส่ข้อมูล
• ใช้ <th> สร้างหัวคอลัมน์
• ใช้ <caption> สร้างหัวเรื่อง
• ใช้ Property CSS border เพื่อกำหนดค่ากรอบ
• ใช้ Property CSS border-collapse กำหนดกรอบชั้นเดียว
• ใช้ Property CSS padding กำหนดระยะห่างภายในเซลล์ระหว่างกรอบและข้อมูล
• ใช้ Property CSS text-align จัดตำแหน่งข้อความในตาราง
• ใช้ Property CSS border-space กำหนดระยะห่างระหว่างเซลล์
• ใช้ Attribute colspan รวมคอลัมน์เข้าด้วยกัน
• ใช้ Attribute rowspan รวมแถวเข้าด้วยกัน
• ใช้ Attribute id กำหนด id ให้กับตาราง เพื่อใช้ร่วมกับ CSS
• ใช้ Attribute class กำหนดกลุ่มให้กับตาราง เพื่อใช้ร่วมกับ CSS

Tag ที่ใช้กับตาราง