CSS로 테이블을 중앙에 배치하는 방법은 무엇입니까?

margin-left 및 margin-right 속성을 사용하세요

이것은 HTML 및 CSS에서 테이블 요소를 가운데 정렬하는 데 널리 사용되는 방법입니다. CSS margin-left 및 margin-right 속성은 각각 요소의 왼쪽 및 오른쪽 여백을 설정하는 데 사용됩니다. 여백은 요소 테두리 외부에 공간을 만들어 해당 요소를 페이지의 다른 요소로부터 효과적으로 밀어냅니다.

속성 값은 길이 값(예: px, em, cm), 백분율 또는 사전 정의된 값인 auto, 상속 또는 초기를 사용하여 설정할 수 있습니다.

Example

Example

지침

• 코드는 이름, ID, 급여라는 세 개의 열이 있는 테이블을 생성하는 HTML 파일입니다. 테이블의 "테이블 컨테이너" 클래스 너비는 뷰포트 너비의 70%이며 페이지 중앙에 위치합니다. 헤더 셀(이름, ID 및 급여)과 테이블 셀에는 RGB(96, 100, 218) 색상의 2픽셀 실선 테두리가 있습니다.

• 테이블에는 "Suranjan"이라는 이름, ID는 12475142, 급여는 32000을 포함하는 데이터 행이 하나 있습니다.

그리드 속성 사용

또 다른 일반적인 방법은 그리드 속성을 사용하여 테이블을 중앙 정렬하는 것입니다. 그리드는 행과 열을 만드는 데 사용할 수 있는 HTML 및 CSS의 2차원 요소입니다. 먼저 테이블을 그리드 요소로 선언하면 그리드의 place-items 속성을 사용하여 테이블을 중앙 정렬할 수 있습니다. place-items 속성은 실제로 그리드를 수평 및 수직으로 중앙에 정렬합니다.

Example

Example

지침

• 이름, 국가, 직업 세 개의 열로 구성된 테이블을 생성하는 기본 HTML 코드입니다. 테이블에는 이름(Tom Holland), 국가(미국) 및 직업(소프트웨어 개발자)에 대한 값이 포함된 데이터 행이 있습니다.

• HTML의 헤드 섹션에 정의된 CSS 스타일은 테이블의 테두리, 테이블 셀(th, td) 및 테이블 자체(class="table-container")를 2px 단색 RGB 색상(96, 100, 218)으로 설정합니다. . 테이블의 너비는 70vw(뷰포트 너비의 70%)로 설정됩니다. 본문 섹션은 그리드로 표시되고 항목이 페이지 중앙에 배치되도록 설정됩니다.

Flexbox 속성 사용

또 다른 매우 인기 있는 방법은 CSS의 flexbox 속성을 사용하여 테이블을 중앙 정렬하는 것입니다. Flexbox는 HTML과 CSS를 위한 반응형 요소입니다. Flexbox에는 테이블 중앙에 배치하는 데 사용할 수 있는 Alien-item, justify-content 등과 같은 특정 속성이 있습니다. 프로그래머는 종종 이 방법이 테이블을 중앙에 배치하는 가장 편리한 방법이라고 생각합니다.

Example

Example

지침

• 이 코드는 이름, ID, 급여라는 세 개의 열이 있는 테이블을 생성하는 HTML 파일입니다. 테이블에는 뷰포트 너비의 70% 너비를 갖는 "table-container"라는 클래스가 있습니다. 헤더 셀(이름, ID 및 급여)과 테이블 셀에는 모두 RGB(96, 100, 218) 색상의 2px 실선 테두리가 있습니다. 테이블에는 이름 "Suranjan", 숫자 12475142, 급여 32,000을 포함하는 한 행의 데이터가 있습니다.

• HTML 문서의 본문에는 CSS 스타일 표시인 flex가 있어 본문을 유연한 컨테이너로 만듭니다. CSS 스타일 flex-direction: row는 플렉스 컨테이너의 항목 방향을 행으로 설정합니다. CSS 스타일은 align-items 및 justify-content 항목을 각각 수직 및 수평으로 정렬합니다.

결론

이 기사에서는 CSS를 사용하여 테이블을 중앙에 배치하는 방법을 배웠습니다. 이 튜토리얼에서는 여백 속성, 그리드, Flexbox 등의 사용을 살펴보았습니다. 논의된 모든 방법 중에서 Flexbox를 사용해야 합니다. 이는 Flexbox가 더 편리하고 UI 요소에 반응하기 때문입니다.

위 내용은 CSS로 테이블을 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!