[CSS] display : table 속성을 활용한 테이블 레이아웃

일반적으로 웹에서 테이블을 만드려면 <table> 태그를 사용하지만 display : table 속성을 사용해서 HTML 요소를 테이블 형태로 표시할 수도 있습니다. 이번 포스팅에서는 display: table을 사용하여 테이블 형태의 레이아웃을 만드는 방법에 대해 알아보겠습니다.

 

 display : table 사용법 

See the Pen css display:table by wjdxo513 (@wjdxo513) on CodePen.

• display: table = 해당 요소를 테이블 컨테이너로 만듭니다.
• display: table-row = 해당 요소를 테이블 행으로 만듭니다.
• display: table-cell = 해당 요소를 테이블 열로 만듭니다.

 

위와 같이 display:table을 사용하여 <div>요소를 테이블 컨테이너로 만들고 table-row, table-cell을 활용하여 html 요소를 테이블 형태로 만들 수 있습니다. 

 

 

See the Pen CSS3 pricing table by Arkev (@arkev) on CodePen.

 

테이블을 표에만 국한시키지 말고 확장시킬 수 있습니다. 테이블이란 말 그대로 가로 / 세로정렬을 한다는 것입니다. 즉 아이템을 일정하게 정렬할 때 응용이 가능합니다. 위와 같이 꼭 테이블 형태의 레이아웃이 아니더라도 묶음 단위의 html 요소들을 테이블 레이아웃처럼 만들어줘 상호간의 연결성등을 강조하고 싶을 때도 사용할 수 있으며 특히 CSS display:table를 사용하였을때는 CSS를 좀 더 적극적으로 사용이 가능하기 때문에 유연하게 사용이 가능합니다.

 

 

HTML의 <table> 태그과 CSS의 display : table 속성의 차이점

html의 <table>요소와 CSS의 display: table 속성은 모두 테이블 형태의 레이아웃을 만들기 위해 사용될 수 있지만, 몇 가지 차이점이 있습니다.

 

1. 마크업 방식 : <table>태그는 HTML에서 직접 사용되는 테이블 요소입니다. <tr>, <td> 등의 테이블 관련 요소를 중첩하여 테이블을 생성합니다. 반면에 display: table은 일반적인 HTML 요소를 테이블 형태로 스타일링하기 위해 CSS에서 사용되는 속성입니다.
2. 시맨틱 마크업 : html의 <table>태그는 테이블을 생성하는 데에 시맨틱 마크업을 제공합니다. <thead>, <tbody>, <tfoot>와 같은 요소를 사용하여 테이블의 헤더, 본문, 바닥글 등을 명확하게 구분할 수 있습니다. 이는 스크린 리더 등의 보조 기술이 테이블의 구조를 이해하고 해석하는 데 도움을 줄 수 있습니다. display: table은 시맨틱 마크업을 제공하지 않으므로, 테이블의 구조를 명시적으로 표현하는 데는 제한이 있습니다.
3. 스타일링 유연성 : display: table 속성을 사용하면 일반적인 HTML 요소를 테이블 형태로 스타일링할 수 있습니다. 이를 통해 테이블 컨테이너, 행, 셀 등의 요소를 자유롭게 구성하고 스타일링할 수 있습니다. 요소는 테이블 요소 자체에 대한 일부 스타일링 옵션을 제공하지만, 일반적인 HTML 요소와는 다소 제약이 있을 수 있습니다.
4. 블록 레벨 vs. 인라인 레벨 : 요소는 기본적으로 블록 레벨 요소로 간주되며, 새로운 줄에서 시작하고 가로 폭 전체를 차지합니다. 반면에 display: table 속성을 사용한 요소는 기본적으로 인라인 레벨 요소로 간주되어 다른 요소와 동일한 줄에 배치됩니다. 따라서 display: table 속성을 사용하여 테이블 형태의 레이아웃을 만들 경우, 요소들을 레이아웃에 맞게 조정하기 위해 추가적인 CSS 스타일링이 필요할 수 있습니다. 요약하면, 요소는 HTML에서 테이블을 생성하는 데 사용되며, 시맨틱 마크업과 테이블에 특화된 속성 및 기능을 제공합니다. display: table 속성은 일반적인 HTML 요소를 테이블 형태로 스타일링하기 위해 사용되며, 스타일링의 유연성과 다양한 레이아웃 옵션을 제공합니다.