วิธีการ - โต๊ะกลาง
เรียนรู้วิธีจัดตารางให้อยู่กึ่งกลางด้วย CSS
โต๊ะกลาง:
ชื่อจริง | นามสกุล | อายุ |
---|---|---|
จิล | สมิธ | 50 |
อีฟ | แจ็คสัน | 94 |
จอห์น | โด่ | 80 |
วิธีจัดโต๊ะให้อยู่ตรงกลาง
ขั้นตอนที่ 1) เพิ่ม HTML:
ตัวอย่าง
<table class="center">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
ขั้นตอนที่ 2) เพิ่ม CSS:
หากต้องการจัดตารางให้อยู่ตรงกลาง ให้ตั้งค่าระยะขอบซ้ายและขวาเป็นauto
:
ตัวอย่าง
.center {
margin-left: auto;
margin-right: auto;
}
โปรดทราบว่าตารางไม่สามารถจัดกึ่งกลางได้หากกำหนดความกว้างเป็น 100% (เต็มความกว้าง)
เคล็ดลับ:ไปที่ บทช่วย สอนตาราง CSSเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการจัดรูปแบบตาราง