CSS를 사용하여 표를 중앙에 배치하는 간단한 방법

한 줄의 코드만으로 테이블을 가운데에 배치 할 수 있습니다.

CSS (Cascading Style Sheets)는 HTML 및 XHTML로 작성된 웹 페이지의 비주얼 스타일을 설정하는 데 가장 자주 사용되는 스타일 시트 언어입니다. 웹 디자인이나 CSS에 익숙하지 않고 웹 페이지에 테이블을 배치하는 방법에 대한 질문이있을 수 있습니다. 또한 CENTER 태그와 align = "center"속성이 TABLE 태그에서 더 이상 사용되지 않으므로이 기술을 수행하는 방법에 대해 혼란스러워하는 숙련 된 디자이너 일 수도 있습니다. CSS를 사용하면 웹 페이지에 테이블을 센터링하는 것이 전혀 어렵지 않습니다.

CSS를 사용하여 표를 가운데 맞추기

CSS 스타일 시트에 한 줄을 추가하여 모든 표를 수평 가운데에 배치 할 수 있습니다.

표 {여백 : 자동; }

또는 동일한 행을 테이블에 직접 추가 할 수 있습니다.

웹 페이지에 테이블을 배치하면 BODY, P, BLOCKQUOTE 또는 DIV와 같은 블록 레벨 요소 내에 배치됩니다. margin : auto를 사용하여 해당 요소 내에 테이블의 중심을 맞출 수 있습니다 . 스타일. 이렇게하면 테이블의 모든면에서 여백을 동일하게 설정하여 웹 페이지의 가운데에 표를 배치합니다.

일부 오래된 웹 브라우저는이 방법을 지원하지 않습니다.

사이트에서 Internet Explorer 6과 같은 이전 웹 브라우저를 지원해야하는 경우 계속해서 align = "center" 또는 CENTER 태그를 사용하여 테이블을 가운데 맞춤 해야합니다. 그것은 웹 페이지에 테이블을 센터링 할 때 실행할 유일한 문제입니다. 이 기술을 사용하는 것은 쉽고 단 몇 분만에 실행될 수 있습니다.