[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(표 생성기)를 사용하면 보다 편리하게 표를 만들 수 있습니다.

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

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

참고:


6개 댓글

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

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

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

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

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

    1. 감사합니다.
      좋은 table generator 사이트를 알려주셔서 감사합니다.
      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EC%89%BD%EA%B2%8C-woocommerce%EB%A5%BC-%EB%8B%A4%EA%B5%AD%EC%96%B4-%EB%B2%84%EC%A0%84%EC%9C%BC%EB%A1%9C-%EB%A7%8C%EB%93%9C%EB%8A%94-%EB%B0%A9%EB%B2%95/ 글에 html 표가 사용되었는데요(저는 Html 테이블이 필요하면 보통 Dreamweaver를 이용해왔습니다), 특히 복잡한 표의 경우 html 테이블로 처리하면 간단하지만 Matthew님 말씀처럼 반응형에서 제대로 작동하지 않는 것이 문제더군요.

      1. Dreamweaver 가 최신 윈도우에서도 작동하나요? Estoque 님이 저번에 드림위버 없어졌다고 하셨던 것 같던데...

        나모웹, 드림위버.. ㅎㅎㅎ

        추억돋는 이름들이네요. 한 10년전.. 10년전이 아니죠, 한 15년전 정도 사용하던 도구들이라서 이제는 쓰시는 분들이 없는 줄 알았는데...

        아직도 사용하시는 분들이 계신가봅니다.

        요즘 젊은분들은 예네들이 뭐하던 물건인지도 잘 모를듯 합니다. ^^;;

      2. 드림위버는 몇년전까지만 해도, 웹을 처음 배우는 학생들이라던지, 코딩을 할 줄 모르는 사람들이 사용했던 것 같습니다.

        https://www.reddit.com/r/webdev/comments/2duznv/does_anyone_actually_use_adobe_dreamweaver/

        (선생이 html 도 제대로 작성할 줄 모르는 사람이었는데 드림위버를 썼다고 합니다. ㅎㅎㅎ)

        웹개발 현업 중에는 저처럼 드림위버가 Macromedia (아도비로 넘어가기전) 였을때 써본 사람들이 대부분이네요. 대략 10년 - 15년 전쯤이죠.

        https://www.quora.com/Is-Adobe-Dreamweaver-dead

        한국 개발자 분들 중 (웹퍼블리셔) 에는 드림위버 쓰시는 분들이 거의 없을거고, 아마 디자인 하는 분들이 코딩을 할줄 모르니 조금 쓰신다는 얘기를 들은적이 있습니다.

        암튼, 드림위버는 반가운 이름 입니다. ㅎㅎㅎ

댓글 남기기

* 이메일 주소는 공개되지 않습니다.