HTML에서 테이블을 중앙에 맞추는 방법

HTML에서 테이블은 특히 데이터 표시 및 레이아웃 시나리오에서 가장 일반적인 요소 중 하나입니다. 스타일이 추가되지 않으면 기본적으로 테이블은 왼쪽 정렬 방식으로 조판됩니다. 이 경우 스타일을 사용하여 테이블을 중앙에 배치해야 합니다.

다음은 페이지에서 표를 수평 및 수직 중앙에 배치하는 데 도움이 되는 세 가지 방법입니다.

방법 1: CSS를 사용하여 표를 중앙에 배치합니다.

이것은 CSS text-align 속성 Center를 사용하는 가장 일반적이고 권장되는 방법입니다. 테이블 내용.

코드는 다음과 같습니다.

<style>
  table {
    margin: 0 auto;
    text-align: center;
  }
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>17</td>
    <td>上海</td>
  </tr>
</table>

CSS text-align 속성을 통해 테이블 ​​텍스트 내용이 중앙에 오도록 설정합니다. 그중 margin: 0 auto는 테이블을 가로 중앙에 놓도록 설정합니다.

방법 2: HTML 속성 사용

CSS를 사용하지 않으려면 HTML의 속성을 사용하여 테이블의 수평 중앙 정렬을 구현할 수도 있습니다.

코드는 다음과 같습니다.

<table align="center">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>17</td>
    <td>上海</td>
  </tr>
</table>

정렬을 추가하여 ="center" 속성을 테이블 태그에 추가하면 테이블을 중앙에 배치합니다.

방법 3: Flexbox 사용

CSS의 Flexbox는 수평 및 수직 중앙 정렬을 쉽게 구현할 수 있는 매우 유용한 레이아웃 방법입니다.

코드는 다음과 같습니다.

<style>
  .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .wrapper table{
    width: 200px;
  }
</style>

<div class="wrapper">
  <table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
    <tr>
      <td>小明</td>
      <td>18</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>17</td>
      <td>上海</td>
    </tr>
  </table>
</div>

div 요소에서 display: flex;, justify-content: center; 및 align-items: center를 설정하여 테이블을 중앙에 배치합니다. 여기서 height: 100vh는 컨테이너 요소를 차지합니다. 전체 뷰포트가 높습니다.

위는 테이블의 수평 중심을 맞추는 세 가지 방법입니다. 그러나 HTML에서 스타일을 설정하기 위해 속성을 사용하는 것은 CSS를 사용하는 것만큼 유지하고 관리하기가 쉽지 않다는 점에 유의하는 것이 중요합니다. 실제 개발에서는 더 나은 가독성과 유지 관리성을 위해 가능할 때마다 CSS를 사용하여 테이블 스타일을 제어하는 ​​것이 좋습니다.

위 내용은 HTML에서 테이블을 중앙에 맞추는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!