www.css-learning.com

ลักษณะ table

สามารถปรับแต่งคุณลักษณะของตาราง (table) ให้ดีขึ้นได้โดยใช้ css

เส้นขอบตาราง: table border

กำหนดเส้นขอบให้กับตารางใน css โดยใช้คุณสมบัติของ border

กำหนดเส้นขอบตารางเป็นสีแดง
table, th, td{border: 1px solid #FF0000;}

ยุบขอบตาราง: collapse borders

ยุบขอบตารางโดยใช้คุณสมบัติ border-collapse และกำหนดขอบตารางให้เหลือเพียงเส้นเดียว

ยกเลิกเส้นขอบตาราง
table{border-collapse:collapse;}
table,th, td{border: 1px solid #FF0000;}

ความกว้าง และความสูง ของตาราง

ความกว้าง และความสูง ของตารางกำหนดคุณสมบัติโดย width และ height

กำหนดความกว้าง และความสูง ของตาราง
table{width:500px;}
tr{height:30px;}

จัดตำแหน่งข้อความในตาราง

ตำแหน่งข้อความในตารางสามารถจัดตำแหน่งโดยใชุ้คุณสมบัติ text-align จัดข้อความในแนวนอน และ vertical-align จัดข้อความในแนวตั้ง

กำหนดตำแหน่งข้อความในตาราง
จัดข้อความในแนวนอน
td{text-align:right;}
จัดข้อความในแนวตั้ง
td{vertical-align:top;}

ใช้ padding ในตาราง

เพื่อควบคุมช่ิองว่างระหว่างเส้นขอบ และข้อมูลในตาราง สามารถใช้คุณสมบัติ padding ได้ทั้งใน td และ th

กำหนดช่องว่างระหว่างเส้นขอบ และข้อมูล
td{padding:10px;}

สีพื้นหลังของตาราง

ใช้คุณสมบัติของ background-color ในการกำหนดสีพื้นหลังของตาราง

กำหนดสีพื้นหลังให้ตาราง
td{background-color:#00CCFF;}
www.worldyweb.com สนใจลงโฆษณาที่นี่