แบบที่จะทำให้ตารางตั้งตรงกลาง

เรียนรู้วิธีการใช้ CSS ที่จะทำให้ตารางตั้งตรงกลาง

ตารางตั้งตรงกลาง

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 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:

เพื่อที่จะให้ตารางตั้งตรงกลาง โปรดกำหนดขอบเขตด้านซ้ายและขวาเป็นอัตโนมัติ:

.center {
  margin-left: auto;
  margin-right: auto;
}

ทดลองด้วยตัวเอง

โปรดสังเกตว่าถ้าความกว้างถูกค่าตั้งเป็น 100%（เต็มกว้าง），ตารางจะไม่สามารถศูนย์กลางได้

相关页面

教程：CSS 表格