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

下次还敢
풀어 주다: 2024-04-27 21:03:33
원래의
1048명이 탐색했습니다.

HTML에서는 세 가지 방법을 사용하여 표를 중앙에 배치할 수 있습니다. margin: auto 속성을 사용하여 표를 수평으로 중앙에 배치합니다. text-align: center 속성을 사용하여 상위 요소 내에서 테이블을 수직으로 가운데에 배치합니다. align 속성을 사용하여 상위 요소를 기준으로 테이블의 위치를 ​​지정합니다(더 이상 사용되지 않음).

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

HTML 표를 가운데에 맞추는 방법

HTML에는 표를 가운데에 맞추는 방법이 여러 가지 있습니다.

1 margin: auto;

  • 을 사용하여 여백을 설정하세요. table: auto; 속성을 ​​사용하면 테이블을 가로 중앙에 배치할 수 있습니다. margin: auto; 属性,可以让表格在水平方向上居中。

示例:

<code class="html"><table style="margin: auto;">
  <tr>
    <th>列 1</th>
    <th>列 2</th>
  </tr>
  <tr>
    <td>数据 1</td>
    <td>数据 2</td>
  </tr>
</table></code>
로그인 후 복사

2. 使用 text-align: center;

  • 给表格的父元素设置 text-align: center; 属性,可以让表格在父元素内垂直居中。

示例:

<code class="html"><div style="text-align: center;">
  <table border="1">
    <tr>
      <th>列 1</th>
      <th>列 2</th>
    </tr>
    <tr>
      <td>数据 1</td>
      <td>数据 2</td>
    </tr>
  </table>
</div></code>
로그인 후 복사

3. 使用 align 属性

  • 给表格设置 align 属性,可以指定表格相对于其父元素的位置。

示例:

<code class="html"><table align="center">
  <tr>
    <th>列 1</th>
    <th>列 2</th>
  </tr>
  <tr>
    <td>数据 1</td>
    <td>数据 2</td>
  </tr>
</table></code>
로그인 후 복사

注意:

  • align 属性在 HTML5 中已弃用,应优先使用 margintext-align
  • 예:
  • rrreee
🎜2. text-align: center;🎜🎜🎜🎜를 사용하여 text-align: center; 속성을 ​​테이블의 상위 요소로 설정합니다. 요소 내에서 수직으로 상위 Center의 테이블. 🎜🎜🎜🎜예: 🎜🎜rrreee🎜🎜3. 테이블의 align 속성을 ​​설정하여 상위 요소를 기준으로 테이블의 위치를 ​​지정하려면 정렬 속성🎜🎜🎜🎜을 사용하세요. 🎜🎜🎜🎜예: 🎜🎜rrreee🎜🎜참고: 🎜🎜🎜🎜align 속성은 HTML5에서 더 이상 사용되지 않습니다. margin 또는 text-align을 사용하세요. > 속성. 🎜🎜테이블 너비를 설정하면 센터링 효과에 영향을 미칠 수 있습니다. 🎜🎜위 방법을 사용하여 테이블을 가로 또는 세로 중앙에 배치할 수 있습니다. 🎜🎜

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿