웹 프론트엔드 HTML 튜토리얼 HTML에서 테이블을 중앙에 맞추는 방법

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

Apr 27, 2024 pm 09:03 PM
수직으로 중앙에 위치

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

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

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

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

1 margin: auto;

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

示例:

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

2. 使用 text-align: center;

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

示例:

<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>
로그인 후 복사

3. 使用 align 属性

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

示例:

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

注意:

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

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

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

HTML 웹 페이지에서 이미지를 중앙에 배치하는 방법 HTML 웹 페이지에서 이미지를 중앙에 배치하는 방법 Apr 05, 2024 pm 12:18 PM

HTML에는 이미지를 중앙 정렬하는 두 가지 방법이 있습니다. CSS: margin: 0 auto;를 사용하여 이미지를 수평으로 중앙에 배치하고, display: block을 사용하여 전체 너비를 차지하게 합니다. 이미지를 가로 중앙에 배치하려면 HTML: <center> 요소를 사용하세요. 하지만 유연성이 떨어지고 최신 웹 표준을 준수하지 않습니다.

드림위버에서 텍스트 위치를 조정하는 방법 드림위버에서 텍스트 위치를 조정하는 방법 Apr 09, 2024 am 02:24 AM

Dreamweaver에서 텍스트 위치 조정은 다음 단계에 따라 완료할 수 있습니다. 텍스트를 선택하고 텍스트 위치 조정기를 사용하여 가로 조정을 수행합니다. 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬 2. 세로 조정 수행: 위쪽 정렬, 아래쪽 정렬, 세로; 3. Shift 키를 누르고 화살표 키를 사용하여 위치를 미세 조정합니다. 4. 바로 가기 키를 사용하여 빠르게 정렬합니다. 왼쪽 정렬(Ctrl/Cmd + L), 오른쪽 정렬(Ctrl/Cmd + R), 가운데 정렬 (Ctrl/Cmd + C).

HTML에서 텍스트 상자를 중앙에 맞추는 방법 HTML에서 텍스트 상자를 중앙에 맞추는 방법 Apr 22, 2024 am 10:33 AM

HTML 텍스트 상자를 중앙에 배치하는 방법은 여러 가지가 있습니다. 텍스트 입력 상자: CSS 코드 사용 input[type="text"] { text-align: center } 텍스트 영역: CSS 코드 사용 textarea { text-align: center; } 수평 센터링: 텍스트 상자 상위 요소에 text-align: center 스타일을 사용하여 수직으로 센터링합니다. Vertical-align 속성을 사용합니다. input[type="text"] { Vertical-align: middle;

HTML에서 프레임을 중앙에 맞추는 방법 HTML에서 프레임을 중앙에 맞추는 방법 Apr 22, 2024 am 10:45 AM

HTML 프레임을 중앙에 배치하는 방법에는 4가지가 있습니다: margin: 0 auto;: 프레임을 수평으로 중앙에 배치합니다. text-align: center;: 프레임 내용을 가로 중앙에 배치합니다. display: flex; align-items: center;: 프레임을 수직으로 중앙에 배치합니다. position: 절대; 위쪽: 50%; 왼쪽: 50%; 변환: 변환(-50%, -50%);: CSS 변환을 사용하여 고정 크기 프레임 컨테이너의 중앙에 프레임을 배치합니다.

WordPress의 잘못된 타이포그래피 원인 분석 및 해결 방법 WordPress의 잘못된 타이포그래피 원인 분석 및 해결 방법 Mar 05, 2024 am 11:45 AM

WordPress에서 잘못 정렬된 타이포그래피의 원인에 대한 분석 및 솔루션 WordPress를 사용하여 웹 사이트를 구축할 때 웹 사이트의 전반적인 아름다움과 사용자 경험에 영향을 미치는 잘못 정렬된 타이포그래피를 접할 수 있습니다. 타이포그래피 정렬이 잘못된 이유는 여러 가지가 있습니다. 이는 테마 호환성 문제, 플러그인 충돌, CSS 스타일 충돌 등으로 인해 발생할 수 있습니다. 이 문서에서는 WordPress에서 잘못 정렬된 타이포그래피의 일반적인 원인을 분석하고 특정 코드 예제를 포함한 몇 가지 솔루션을 제공합니다. 1. 이유 분석 테마 호환성 문제: 일부 WordPress

숭고한 글꼴을 중앙에 배치하는 방법 숭고한 글꼴을 중앙에 배치하는 방법 Apr 03, 2024 am 10:21 AM

Sublime Text에서 텍스트를 정렬하는 방법에는 바로 가기 키 사용(문단: Ctrl + Alt + C, 한 줄: Ctrl + Alt + E), 메뉴 모음의 "정렬" 옵션 사용, 정렬 플러그인 설치(예: AlignTab, Alignment Plugin ) 또는 수동 정렬(가운데: 공백 채우기, 양쪽 맞춤: 테두리 만들기).

CSS에서 ul 콘텐츠를 중앙에 배치하는 방법 CSS에서 ul 콘텐츠를 중앙에 배치하는 방법 Apr 26, 2024 pm 12:24 PM

CSS의 중앙 UL 콘텐츠: text-align 속성 사용: 목록 항목의 콘텐츠를 포함하여 텍스트 정렬을 설정합니다. margin 속성을 사용하세요: 요소의 왼쪽과 오른쪽 여백을 설정하고, margin:auto 를 사용해 수평 중심을 맞추세요. 표시 속성을 사용하십시오. 요소를 inline-block으로 설정한 다음 text-align: center를 사용하여 수직으로 가운데에 배치하십시오. 가변상자 속성을 사용하세요: justify-content: center 및 align-items: center를 통해 가로 및 세로 가운데 맞춤.

WordPress 웹 페이지 정렬 문제 해결 가이드 WordPress 웹 페이지 정렬 문제 해결 가이드 Mar 05, 2024 pm 01:12 PM

잘못 정렬된 WordPress 웹 페이지 해결 가이드 WordPress 웹 사이트 개발 시 때로는 웹 페이지 요소가 잘못 정렬되는 경우가 있습니다. 이는 다양한 장치의 화면 크기, 브라우저 호환성 또는 부적절한 CSS 스타일 설정 때문일 수 있습니다. 이러한 잘못된 정렬을 해결하려면 문제를 주의 깊게 분석하고, 가능한 원인을 찾아 단계별로 디버그하고 복구해야 합니다. 이 문서에서는 몇 가지 일반적인 WordPress 웹 페이지 정렬 문제와 해당 솔루션을 공유하고 개발에 도움이 되는 특정 코드 예제를 제공합니다.

See all articles