ลักษณะ 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 จัดข้อความในแนวตั้ง
- text-align: มีคุณสมบัติในการจัดข้อความในแนวนอน ได้แก่ left, right, center
- vertical-align: มีคุณสมบัติในการจัดข้อความในแนวตั้ง ได้แก่ top, bottom, middle
กำหนดตำแหน่งข้อความในตาราง
จัดข้อความในแนวนอน
td{text-align:right;}
จัดข้อความในแนวตั้ง
td{vertical-align:top;}
ใช้ padding ในตาราง
เพื่อควบคุมช่ิองว่างระหว่างเส้นขอบ และข้อมูลในตาราง สามารถใช้คุณสมบัติ padding ได้ทั้งใน td และ th
กำหนดช่องว่างระหว่างเส้นขอบ และข้อมูล
td{padding:10px;}
สีพื้นหลังของตาราง
ใช้คุณสมบัติของ background-color ในการกำหนดสีพื้นหลังของตาราง
กำหนดสีพื้นหลังให้ตาราง
td{background-color:#00CCFF;}