테이블을 중앙에 배치하는 방법

CSS를 사용하여 테이블을 중앙에 배치하는 방법을 배우세요。

중앙에 배치된 테이블：

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80

테이블을 중앙에 배치하는 방법

第一步 - 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>

第二步 - CSS 추가：

테이블을 중앙에 배치하려면, 좌우 마argins을 자동으로 설정하세요：

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

직접 시험해 보세요

주의하세요, 너비가 100%（전체 폭）로 설정되면 테이블을 중앙에 정렬할 수 없습니다.

관련 페이지

教程：CSS 테이블