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

Last Updated: 2023년 07월 17일 6개 댓글
무료 전자책 애드센스 웨비나

개요

테이블을 만들려면 보통 드림위버 등에서 쉽게 표를 삽입하여 만들 수 있습니다. 하지만 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-layout을 fixed로 지정하면 셀의 텍스트가 길어질 경우 셀 크기에 맞게 텍스트를 줄일 수 있습니다. 하지만 table-layout을 사용해보니 일부 표에서 표의 레이아웃이 원하지 않는 형태로 바뀌는 현상이 발생하네요. 이런 경우 셀의 max-width를 0또는 100%로 지정하니 문제가 해결되네요. table-layout: fixed를 사용하지 않고 text-overflow를 처리할 경우 참고하면 좋을 듯합니다(참고).

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

참고로 워드프레스 플러그인, 자스/jQuery 템플릿, PHP 스크립트 등의 코드를 판매하는 Codecanyon에서 메뉴 스타일, 테이블(table) 등의 CSS 코드나 자바스크립트/jQuery 템플릿을 구입할 수 있습니다. CSS 코드 스니펫의 경우 3달러부터 10달러 사이트로 저렴한 편입니다.

Codecanyon에서 판매되는 CSS 코드
Codecanyon에서 판매되는 베스트셀링 CSS 코드

참고:

6 개 댓글

Leave a Comment

  2. 몇년전 컨텐츠가 data 이면 테이블로 짜는게 semantic 한거다 라는 주장을 하며 테이블 사용이 잘못된게 아니다 라고 하는 그누보드에서 일하시는 분과 논쟁을 벌인적이 있습니다.

    이 주장도 틀린 주장이 아니지만, 현실적인 부분을 고려하지 않은 주장이었던거죠. 제가 테이블도 div 로 짜야한다고 주장했던 이유는, 반응형 대응 때문이었구요.

    rendering 속도는 예전 브라우저에서나 테이블 rendering 이 느렸던거고, 요즘은 큰 차이가 없습니다. 오히려 반응형 코딩을 해야해서 테이블도 div 로 짜는거죠.

    그리고 테이블 짤때, 워드님 이 소개하시는 방법 처럼 손코딩 (hand coding) 하는 경우는 없구요, 그냥 table generator 로 그리면 됩니다.

    http://divtable.com/generator/
    http://www.cssbuttoncode.com/table.php

    응답