Word Cracker의 잡다한 정보 모음

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

6 1,084

개요

테이블을 만들려면 보통 드림위버 등에서 쉽게 표를 삽입하여 만들 수 있습니다. 하지만 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(표 생성기)를 사용하면 보다 편리하게 표를 만들 수 있습니다.

참고:

Related Posts

Comments

6 Comments
  1. Matthew says

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

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

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

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

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

  2. WordCracker says

    감사합니다.
    좋은 table generator 사이트를 알려주셔서 감사합니다.
    http://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님 말씀처럼 반응형에서 제대로 작동하지 않는 것이 문제더군요.

  3. Matthew says

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

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

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

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

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

  4. WordCracker says

    저는 Photoshop CS5를 사용하고 있는데, Dremweaver가 Photoshop 등과 함께 패키지로 포함되어 있습니다. 최신 버전은 아닙니다. 한국 어도비 사이트를 방문해보니 CS6를 판매하고 있네요(http://shop.adobe.com/store/adbehkr/ko_KR/pd/ThemeID.25225700/productID.247452100 ).

  5. Matthew says

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

    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

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

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

  6. Hyeonil Choi says

    테이블 그리고 있는데, 정보 감사합니다~.

Leave A Reply

Your email address will not be published.