관리 메뉴

어제 오늘 내일

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

IT/HTML&CSS

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

hi.anna 2021. 1. 24. 00:09

 

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

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

 

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

HTML과 CSS를 이용하여 테이블 안의 글자를 정렬하는 방법을 정리하였습니다. 1. 글자 왼쪽, 오른쪽, 가운데 정렬하기 (가로 정렬) 2. 글자 위, 아래, 중간 정렬하기 (세로 정렬) 3. 정리 (가로 세로 모

hianna.tistory.com

이번에는, 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의 값을 계산해서 지정해 줄 수도 있습니다.

 

 

반응형
0 Comments
댓글쓰기 폼