[CSS] HTML 테이블(표)을 사용하지 않고 테이블 만들기

개요

테이블을 만들려면 보통 드림위버 등에서 쉽게 표를 삽입하여 만들 수 있습니다. 하지만 HTML 테이블을 많이 사용하면 속도면에서 좋지 않은 영향을 미친다고 하네요. 그래서 CSS 테이블을 사용하는 것이 좋습니다(참고).

쉽게 응용할 수 있도록 CSS로 표를 하나 만들어보았습니다.

CSS 테이블 샘플

HTML 코드:

<div id="table">
<div class="row">
<span class="cell col1">열 1-1</span>
<span class="cell col2">열 1-2</span>
<span class="cell col3">열 1-3</span>
<span class="cell col4">열 1-4</span>
</div>
<div class="row">
<span class="cell col1">열 2-1</span>
<span class="cell col2">열 2-2</span>
<span class="cell col3">열 2-3</span>
<span class="cell col4">열 2-4</span>
</div>
</div>

CSS 코드:

#table {display: table; width: 100%;}
.row {display: table-row;}
.cell {display: table-cell; padding: 3px; border-bottom: 1px solid #DDD;}
.col1 { width: 20%;}
.col2 {width: 20%;}
.col3 {width: 40%;}
.col4 {width: 20%;}

결과:

CSS Table- CSS로 표 만들기

이 코드를 응용하여 워드프레스 카테고리 글을 게시판 형식의 리스트로 구현할 수 있습니다. 이외에도 다양하게 응용이 가능하겠죠. 개인적으로는 CSS 표가 모바일에서 제어하기가 더 쉬운 것 같습니다.

참고로 표에서는 텍스트 길이가 길어질 경우 ellipsis가 제대로 작동하지 않습니다.

td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

이 경우 table-layoutfixed로 지정하면 셀의 텍스트가 길어질 경우 셀 크기에 맞게 텍스트를 줄일 수 있습니다. 하지만 table-layout을 사용해보니 일부 표에서 표의 레이아웃이 원하지 않는 형태로 바뀌는 현상이 발생하네요. 이런 경우 셀의 max-width0또는 100%로 지정하니 문제가 해결되네요. table-layout: fixed를 사용하지 않고 text-overflow를 처리할 경우 참고하면 좋을 듯합니다(참고).

추가: Matthew님이 말씀하신 대로 다음과 같은 Table Generator(표 생성기)를 사용하면 보다 편리하게 표를 만들 수 있습니다.

참고:

떠나시기 전에 아무 댓글(Comments)이라도 남겨두세요.
기부를 통해 이 블로그의 운영을 후원하실 수 있습니다.