พื้นฐาน CSS

จัดรูปแบบของตารางด้วยคำสั่ง CSS

เราสามารถจัดรูปแบบของคำสั่งตาราง Table ด้วย CSS ได้ แถมยังสามารถทำได้มากกว่าที่มีใน HTML ซะอีก

จากหัวข้อ HTML มีการสอนเรื่องการสร้างตารางกันมาแล้ว ในบทนี้จะใช้ CSS ควบคุมการแสดงผลของตารางที่สร้างขึ้นมา

1. ควบคุมการแสดงผลของตาราง
ตัวอย่างจะเป็นการแสดงคำสั่ง layout ซึ่งใช้ในการกำหนดขนาดของตารางให้เปลี่ยนแปลงตามเนื้อหา หรือไม่เปลี่ยนแปลงตามเนื้อหา

คลิกเพื่อทดลองเขียนด้วยตัวเอง



2. คำสั่งแสดงผลช่องว่างของตาราง
การเขียนตารางโดยใช้คำสั่ง table จะไม่แสดงผลช่องว่างที่ไม่มีค่า ซึ่งถ้าเราต้องการให้แสดงผลก็ต้องใส่ค่าว่าง ( ) แต่ในหัวข้อนี้จะกำหนดให้แสดงช่องว่างทุกช่อง โดยไม่ต้องใส่ค่าว่างอีกต่อไป

คลิกเพื่อทดลองเขียนด้วยตัวเอง



3. ควบคุมการแสดงเส้นของตาราง
ตัวอย่างจะเป็นคำสั่งที่ใช้ควบคุมการแสดงผลของเส้นตาราง คำสั่ง border-collapse: separate

คลิกเพื่อทดลองเขียนด้วยตัวเอง



4. ควบคุม spacing ของตาราง
เป็นคำสั่งที่ใช้ควบคุม cell - spacing ของตาราง

คลิกเพื่อทดลองเขียนด้วยตัวเอง



5. คำสั่งใส่หัวข้อให้กับตาราง
คำสั่งใส่หัวข้อให้กับตาราง

คลิกเพื่อทดลองเขียนด้วยตัวเอง


เลื่อนขึ้นด้านบน