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

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

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

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



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

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



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

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



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

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



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

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

author
นันทวัฒน์ ไชยรัตน์

สวัสดีครับผมเป็นโปรแกรมเมอร์ที่ทำงานมาหลายที่ เปลี่ยนมาหลายสายงานครับเลยพอจะมีประสพการณ์มาเขียนบทความหลายๆเรื่องครับ ผมชอบลองทำอะไรใหม่ๆครับบางครั้งลองไปก็ลืมเลยต้องหาที่จดครับ เลยมาขอจดไว้ที่เว็บนี้ครับ