[HTML/CSS] 테이블 가운데 정렬하기

 

지난번에는 테이블 안의 글자를 정렬하는 방법을 알아보았습니다.

[HTML/CSS] 테이블 글자 왼쪽, 오른쪽, 가운데, 위, 아래, 중앙 정렬하기 (가로, 세로 정렬)

[HTML/CSS] 테이블 글자 왼쪽, 오른쪽, 가운데, 위, 아래, 중앙 정렬하기 (가로, 세로 정렬)

이번에는, CSS를 사용해서 HTML 테이블을 가운데 정렬하는 방법입니다.

 

 

테이블 가운데 정렬하기

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>2000</td>
  </tr>
</table>

table {
    margin-left:auto; 
    margin-right:auto;
}

table, td, th {
    border-collapse : collapse;
    border : 1px solid black;
};

margin-left:auto;

margin-right:auto;

테이블을 정렬하기 위해서는 CSS의 margin-left, margin-right 속성을 사용합니다.

margin-right, margin-left 속성의 개체(테이블)의 오른쪽과 왼쪽의 바깥 영역 여백을 설정합니다.

margin-right, margin-left 속성의 값이 'auto'이면

해당 객체의 양쪽 바깥 여백은 동일하게 설정됩니다.

테이블의 양쪽 바깥 여백이 같으면, 테이블은 가운데 위치하게 됩니다.

 

 

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>2000</td>
  </tr>
</table>

table {
    margin:auto; 
}

table, td, th {
    border-collapse : collapse;
    border : 1px solid black;
};

margin:auto;

margin-right, margin-left 대신 margin 값을 지정해 줄 수도 있습니다.

 

 

  <table>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
    <tr>
      <td>Apple</td>
      <td>3000</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>2000</td>
    </tr>
  </table>

table {
    width:500px; 
    margin: auto;
}

table, td, th {
    border-collapse : collapse;
    border : 1px solid black;
};

width: 500px;

margin: auto;

테이블의 크기를 지정해 줄 수도 있습니다.

 

 

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3000</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>2000</td>
  </tr>
</table>

table {
    width:70%; 
    margin-left:15%; 
    margin-right:15%;
}

table, td, th {
    border-collapse : collapse;
    border : 1px solid black;
};

width: 70%;

margin-left:15%;

margin-right:15%;

테이블의 크기를 %(비율) 단위로 지정하고,

margin-left, margin-right의 값을 계산해서 지정해 줄 수도 있습니다.