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

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

CSS

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

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

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

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

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