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

CSS

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

ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์

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

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

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

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

    5.คำสั่งใส่หัวข้อให้กับตาราง
    คำสั่งใส่หัวข้อให้กับตาราง แสดงผลใน Firefox เท่านั้น