HTML에서 테이블 가운데 정렬

1. margin 속성을 auto로 설정하여 HTML에서 테이블을 중앙에 배치
2. 여백 속성을 백분율 값으로 설정하여 HTML에서 테이블 중앙에 배치

이 기사에서는 HTML에서 표를 중앙에 배치하는 방법을 소개합니다.

margin 속성을 auto로 설정하여 HTML에서 테이블을 중앙에 배치

HTML 테이블을 중앙에 배치하는 가장 간단한 방법은 margin 속성을 사용하고 auto로 설정하는 것입니다. 이 방법은 모든 블록 요소를 중앙에 맞추는 데 사용됩니다.

여백에 자동 값을 사용하면 사용 가능한 가로 공간을 동일하게 차지합니다. 결과적으로 테이블은 일정한 너비를 가지며 왼쪽 및 오른쪽 여백이 동일하게 조정됩니다.

margin 속성을 0px auto로 설정할 수도 있습니다. 여기에서 0px 값은 위쪽 및 아래쪽 여백에 대한 것이고 auto 값은 왼쪽 및 오른쪽 여백에 대한 것입니다.

여백 속성은 인접한 요소 사이의 공간을 설정합니다. 이 속성은 margin-top, margin-right, margin-bottom 및 margin-left 속성 4개를 결합합니다.

margin 속성의 단일 값은 이러한 네 가지 속성의 값과 유사합니다.

예를 들어 일부 행과 열이 있는 HTML 테이블을 만듭니다. table 태그에 대해 style 속성을 margin:auto로 설정합니다.

CSS를 보다 구체적으로 작성하기 위해 margin-left 및 margin-right 속성을 auto에 작성할 수도 있습니다.

여기서 우리는 인라인 CSS를 사용하여 HTML에서 표를 중앙에 배치했습니다.

예제 코드:

<table border=1 style="margin:auto">
  <tr>
    <th>Country</th>
    <th>Continent</th>
    <th>Capital</th>
  </tr>
  <tr>
    <td>Nepal</td>
    <td>Asia</td>
    <td>Kathmandu</td>
  </tr>
  <tr>
    <td>Spain</td>
    <td>Europe</td>
    <td>Madrid</td>
  </tr>
</table>

여백 속성을 백분율 값으로 설정하여 HTML에서 테이블 중앙에 배치

여백 속성의 백분율 값을 사용하여 HTML에서 테이블을 중앙에 배치할 수도 있습니다. 이 접근 방식의 기본 개념은 화면의 수평 뷰포트를 세 부분으로 나누는 것입니다.

왼쪽 여백, 오른쪽 여백 및 표의 너비입니다. 테이블의 특정 너비를 백분율로 설정할 수 있습니다.

다음으로 뷰포트의 남은 길이를 균등하게 나누어 왼쪽과 오른쪽 여백을 각각 설정할 수 있습니다.

예를 들어 table 태그의 style 속성에서 다음 속성을 설정합니다. width 속성을 50%로 설정하고 margin-left 및 margin-right 속성을 25%로 설정합니다.

결과적으로 테이블은 화면의 수평 뷰포트 너비의 절반을 차지합니다. 나머지 공간은 왼쪽과 오른쪽 여백에 동일하게 조정됩니다.

따라서 HTML에서 테이블을 중앙에 배치할 수 있습니다.

예제 코드:

<table border=1 style="width:50%;
margin-left: 25%; margin-right: 25 %;">
  <tr>
    <th>Country</th>
    <th>Continent</th>
    <th>Capital</th>
  </tr>
  <tr>
    <td>Nepal</td>
    <td>Asia</td>
    <td>Kathmandu</td>
  </tr>
  <tr>
    <td>Spain</td>
    <td>Europe</td>
    <td>Madrid</td>
  </tr>
</table>