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 표가 모바일에서 제어하기가 더 쉬운 것 같습니다.

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

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

이 경우 table-layout을 fixed로 지정하면 셀의 텍스트가 길어질 경우 셀 크기에 맞게 텍스트를 줄일 수 있습니다.

하지만 table-layout을 사용해보니 일부 표에서 표의 레이아웃이 원하지 않는 형태로 바뀌는 현상이 발생하네요.

이런 경우 셀의 max-width를 0또는 100%로 지정하니 문제가 해결되네요.

table-layout: fixed를 사용하지 않고 text-overflow를 처리할 경우 참고하면 좋을 듯합니다(참고).

​

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

DIV TABLE

css div table generator