การ จัดตำแหน่งตาราง CSS
การจัดแนวแนวนอน
คุณสมบัติtext-align
กำหนดการจัดแนวแนวนอน (เช่น ซ้าย ขวา หรือกึ่งกลาง) ของเนื้อหาใน <th> หรือ <td>
โดยค่าเริ่มต้น เนื้อหาขององค์ประกอบ <th> จะจัดกึ่งกลางและเนื้อหาขององค์ประกอบ <td> จะจัดชิดซ้าย
หากต้องการจัดแนวเนื้อหาขององค์ประกอบ <td> ให้อยู่กึ่งกลางด้วย ให้ใช้text-align: center
:
ตัวอย่าง
td
{
text-align: center;
}
หากต้องการจัดแนวเนื้อหาทางซ้าย ให้บังคับการจัดตำแหน่งองค์ประกอบ <th> ให้ชิดซ้าย โดยมีtext-align: left
คุณสมบัติดังนี้
ตัวอย่าง
th
{
text-align: left;
}
การจัดแนวแนวตั้ง
คุณสมบัติvertical-align
กำหนดการจัดแนวแนวตั้ง (เช่น บน ล่าง หรือกลาง) ของเนื้อหาใน <th> หรือ <td>
โดยค่าเริ่มต้น การจัดแนวแนวตั้งของเนื้อหาในตารางจะอยู่ตรงกลาง (สำหรับทั้งองค์ประกอบ <th> และ <td>)
ตัวอย่างต่อไปนี้ตั้งค่าการจัดตำแหน่งข้อความแนวตั้งเป็นด้านล่างสำหรับองค์ประกอบ <td>:
ตัวอย่าง
td
{
height: 50px;
vertical-align: bottom;
}