Erzsamatory Weblog


블로그에 글을 작성하다보면 표테이블를 넣어야 하는 경우가 종종 발생합니다. 하지만 HTML을 이용하여 표를 그리는 것은 그 과정이 매우 복잡합니다. 이러한 이유 때문에 대부분의 블로거는 드림위버나 나모웹에디터와 같은 HTML 위지윅 프로그램을 이용하여 테이블 소스코드를 생성합니다. 다른 프로그램에서 만들어진 테이블 소스코드를 포스팅 양식에 붙여넣기 하는 방법을 사용하는 것이지요. 하지만 이 글에서 소개하는 사이트를 이용한다면 더이상 다른 프로그램을 사용하지 않고도 매우 빠르고 편리하게 테이블 HTML 소스코드를 만들 수 있습니다.

HTML Tables Generator 바로가기
http://www.tablesgenerator.com/html_tables


Web Tables Generator


이 글에서 소개할 사이트는 Tables Generator(클릭)라는 사이트입니다. 이 사이트는 HTML 뿐만 아니라 LaTeX, Text, Markdown 등 매우 다양한 포맷의 테이블 소스코드를 자동으로 만들어주는 사이트입니다. 특히 블로거에게는 HTML 포맷의 테이블 소스코드를 자동으로 만들어주는 기능이 매우 유용합니다. 블로그에 표를 넣는다는 것은 매우 번거로운데, 이 사이트를 이용한다면 매우 쉽게 블로그에 표를 넣을 수 있습니다.

티스토리나 텍스트큐브에서는, 심지어 네이버블로그에서도 위지윅 환경에서 표를 만드는 기능을 지원하고 있습니다. 그런데 티스토리 블로그에서는 테이블을 개성있게 디자인할 수 있을 정도의 기능을 제공하는 위지윅에디터를 사용하고 있기 때문에, 이 사이트의 필요성이 그렇게 크지 않을 수도 있겠습니다. 하지만 네이버블로그나 텍스트큐브 블로그는 아직도 완전하지 않은 테이블 생성 기능을 가진 위지윅에디터를 사용하고 있기 때문에, 티스토리 블로거를 제외한 블로거에게 이 사이트는 매우 유용하게 사용될 수 있을 것입니다.

위에서도 언급했듯이 Tables Generator(클릭)에서 HTML 포맷만 지원하는 것은 아닙니다. 논문이나 책 등에 주로 사용되는 라텍LaTex이나 위키에 주로 사용되는 마크다운Markdown 포맷도 지원하고 있기 때문에, 이 사이트가 언젠가는 분명히 매우 유용하게 사용되는 때가 있을 것입니다. 대학생이라면 논문을 쓰긴 해야 하니까요.

HTML Tables Generator


HTML Tables Generator 바로가기
http://www.tablesgenerator.com/html_tables

이 사이트에서 다양한 포맷을 지원하고는 있지만, 가장 많이 사용되고 있는 포맷은 바로 HTML 포맷입니다. 왜냐하면 다른 포맷의 경우에는 사용법이 쉽거나 위지윅 에디터가 잘 나와 있지만, HTML은 그렇지 않기 때문입니다. 테이블은 주로 데이터을 정리해서 나타낼 때 사용되는데, 특히 순위나 목록을 나타내야 할 때 테이블을 사용하면 매우 좋습니다.

테이블을 사용할 수 없을 때에는 종종 목록 스타일을 사용하기도 하는데, 목록 스타일보다는 테이블이 좀 더 직관성이 있어서 보기가 좋습니다. 테이블보다 직관성이 좋은 문단 요소는 거의 없다고 보면 되겠습니다. 지금까지 자신의 블로그에서 데이터를 나열할 때 목록 스타일을 사용해왔었다면, 다음부터는 이 사이트를 통하여 테이블을 사용해보시기 바랍니다. 그렇다면 지금부터 HTML Tables Generator 사이트의 사용 방법에 대해서 좀 더 자세히 알아보도록 하겠습니다.

위의 링크를 통하여 테이블 HTML 소스코드 생성 사이트에 접속하면 아래와 같은 화면이 나타납니다. 상단에는 테이블 소스코드 포맷을 선택할 수 있는 탭이 있고, 아래쪽에 위지윅 형태로된 표 편집 도구가 있습니다. 이 표 편집 도구를 이용하면 블로그에 넣을 표를 직접 만들 수 있습니다. 만들어진 표의 HTML 소스코드는 아래쪽에서 확인할 수 있습니다.

HTML Tables Generator을 이용하면 누구나 매우 편리하게 테이블 HTML 소스코드를 만들 수 있습니다.

HTML Tables Generator을 이용하면 누구나 매우 편리하게 테이블 HTML 소스코드를 만들 수 있습니다.



HTML Tables Generator(클릭)는 위지윅에디터이기 때문에 워드프로세서 프로그램으로 표를 편집할 때와 같은 방법으로 표를 수정하면 됩니다. 각각의 셀을 더블클릭하면 내용을 수정할 수 있고, 탭Tab 키를 통해서 다음 칸으로 커서를 옮길 수도 있습니다. 또한 상단의 툴바를 이용하여 텍스트와 셀 테두리, 배경의 스타일을 변경할 수도 있습니다. 더 나아가 컨트롤Ctrl 키를 이용하면 서로 떨어져 있는 여러 개의 셀을 동시에 선택할 수도 있습니다.

이 사이트의 기능을 이용하여 아래와 같은 표를 만들어보았습니다. 맨 위쪽에 있는 세 개의 셀은 하나로 병합하였고, 텍스트 정렬과 셀 배경 속성을 변경하여 좀 더 멋있는 표를 만들어보았습니다.

셀 병합, 셀 배경, 텍스트 정렬 등을 마우스 클릭 한 번만으로 모두 설정할 수 있습니다.

셀 병합, 셀 배경, 텍스트 정렬 등을 마우스 클릭 한 번만으로 모두 설정할 수 있습니다.



위와 같이 표를 만들고 나면, 만들어진 표의 하단에 있는 Generate 버튼을 눌러서 HTML 소스코드를 업데이트합니다. 그러면 아래쪽의 텍스트박스에 완성된 HTML과 CSS 소스코드가 나타납니다. 이 소스코드를 복사하여 다른 곳블로그나 사이트에서 사용하면 됩니다.

다만, 네이버블로그는 에디터에서 <style> 태그를 지원하지 않기 때문에 일반적인 방법으로는 이 사이트에서 적용했던 테이블 스타일 속성을 유지할 수가 없습니다. 이 사이트에서 적용했던 테이블의 스타일을 네이버블로그에서 적용시키기 위해서는 Compact 모드를 사용해야 합니다. Generate 버튼 아래쪽에 있는 Compact mode 옵션에 체크를 하면 Compact 모드가 소스코드에 적용이 됩니다. 일반 모드와 Compact 모드와의 차이점은 스타일 적용 방법에 있습니다. Compact 모드에서는 <style> 태그가 아닌 inline style 속성을 이용해서 테이블에 스타일을 적용시키기 때문에 네이버블로그에서도 테이블 스타일을 사용할 수 있습니다.

HTML Tables Generator에서 만들어진 표는 네이버블로그에서 사용할 수 있습니다.

HTML Tables Generator에서 만들어진 표는 네이버블로그에서 사용할 수 있습니다.



네이버블로그를 이용하는 대부분의 블로거는 테이블 HTML 태그를 능숙하게 다루는데 어려움이 있기 때문에, 이 사이트를 이용한다면 블로그를 운영하는데 매우 큰 도움이 될 수 있을 것입니다. 그런데 HTML Tables Generator에서는 텍스트의 스타일을 자세하게 설정할 수는 없기 때문에, 세부적인 스타일을 변경하기 위해서는 위의 스크린샷에서 보는 것과 같이 네이버 스마트에디터를 함께 사용해야만 합니다. 우선, 만들어진 테이블 HTML 소스코드를 HTML 수정 양식에 붙여넣기 한 후에 네이버 에디터의 다양한 옵션들을 통하여 스타일을 수정하면 됩니다.

다른 블로그 시스템을 사용하고 있는 경우에도 마찬가지로 에디터의 HTML 수정 양식에 해당 테이블 HTML 소스코드를 붙여넣기 한 후에 위지윅 환경에서 텍스트 등의 스타일 속성을 변경하는 방법을 사용하면 됩니다.


HTML Tables Generator의 자세한 사용 방법과 기타 옵션들


이 사이트에서 설명하고 있는 테이블 편집 툴의 사용 방법과 주의사항, 테마에 대한 내용을 한국어로 번역하면 다음과 같습니다.

  1. Table 메뉴를 사용하여 원하는 사이즈의 테이블을 생성합니다.
  2. 생성된 테이블에 데이터를 입력합니다.
    • Ctrl + V 키를 동시에 눌러 구글 독스Google Docs나 리브레오피스LibreOffice, 기타 웹페이지에서 복사한 테이블을 그대로 붙여넣기 할 수도 있습니다.
    • 또는 셀을 더블클릭하여 데이터를 직접 수정할 수도 있습니다. 키보드의 화살표 키나 탭Tab 키를 이용하여 커서를 이동시킬 수 있습니다.
  3. 상단의 툴바 버튼을 이용하여 셀 내부의 텍스트 정렬 방법이나 셀 테두리 스타일을 변경할 수 있습니다.
  4. Generate 버튼을 누르면 하단에 완성된 HTML 소스코드가 나타납니다. 이 소스코드를 복사 & 붙여넣기하여 다른 곳에서 표를 자유롭게 수정, 사용할 수 있습니다.

테이블 자동 생성 툴은 HTML과 CSS에 익숙하지 않은 사람들이 사용하기에 매우 편리합니다. 만약 워드프레스나 텍스트큐브, 티스토리 등과 같이 HTML을 직접 수정할 수 있는 블로그를 운영하고 있다면 이 툴은 매우 유용하게 사용될 수 있을 것입니다. 이 툴은 테이블 HTML 소스코드를 빠르게 만들고 싶어하는 웹 개발자에게도 매우 효율적인 시스템이 될 수 있을 것입니다.


테마 이용


HTML Tables Generator에서는 미리 만들어진 테마를 이용하여 테이블을 꾸밀 수도 있습니다. 하지만 주의해야 하는 점은 테마를 적용시키면 사용자가 적용했었던 모든 스타일이 초기화 된다는 점입니다. 테마는 모든 셀에 대해서 적용이 되는 것이기 때문에, 테마를 적용시키기 전에 다시 한 번 검토를 해보시기 바랍니다.


사용상의 주의사항


HTML Tables Generator에서 만들어진 테이블을 다른 곳에 삽입하기 위해서는 HTML 소스코드를 복사 & 붙여넣기 하면 됩니다. 이렇게 삽입된 테이블은 대부분의 PC와 모바일의 최신 웹 브라우저에서 잘 보입니다. 하지만 만들어진 소스코드는 웹 표준에 대해서는 완벽하지 않습니다. 웹 표준에 맞게 페이지를 꾸미기 위해서는 아래의 방법을 꼭 읽어보십시오. Compact 모드가 아닌 일반 모드에서만 해당되는 내용입니다.

테이블 도구를 이용하여 만들어진 소스코드는 <style><table> 두 개의 부분으로 나누어집니다. 첫 번째 부분인 <style> 태그는 반드시 </head> 앞에 위치시켜야 합니다. <table> 태그는 테이블이 출력되어야 하는 부분이 넣으면 됩니다. 하지만 테이블의 스타일은 매번 달라질 수 밖에 없기 때문에 이 방법은 조금 실용성이 떨어지는 것 같습니다. 물론 테이블의 일관된 스타일을 사용하고 싶다면 이 방법을 사용해야 합니다.


마무리


오랜만에 작성하는 포스팅입니다. 그동안 학교 생활에 너무 바빴기 때문에 글을 작성할 수 있는 시간이 없어 블로그 업데이트를 못 했습니다. 이 글에서 설명했던 테이블 HTML 소스코드 자동생성 사이트는 모든 블로거에게 유용하게 사용될 수 있을 것 같아 블로그 활용법 카테고리에 이 글을 넣었습니다. 저는 포스팅을 할 때 테이블을 자주 사용하는 편인데, 지금까지는 직접 HTML 소스코드를 작성했었습니다. 그런데 HTML Tables Generator를 이용하면 좀 더 편하게 테이블을 만들 수 있을 것 같아 다음부터는 이 사이트를 이용하려고 합니다.

티스토리에서 제공하고 있는 테이블 수정 기능은 이 사이트의 기능과 크게 다르지 않기 때문에 티스토리 블로거는 이 사이트를 굳이 이용하지 않아도 될 것 같습니다. 이 사이트를 정말 유용하게 사용할 수 있는 블로거는 네이버블로그나 텍스트큐브 블로그를 사용하고 있는 블로거라고 할 수 있겠습니다.
http://www.erzsamatory.net/trackback/151

건전한 댓글 문화를 만들어주시기 바랍니다 ^^
불건전한 댓글이 등록되는 경우 관리자의 임의적 판단으로 삭제될 수 있음을 미리 공지드립니다.

비밀글로 작성하기
  1. 2014/10/26 22:55
    이 테이블 자동으로 만드는 곳 알아두면 유용하겠는데요. 말씀대로 HTML,CSS를 자유롭게 사용할 수 있는 블로그에서 유용하겠어요. 얼마 전부터 구글 블로그를 시험하고 있는데 해봐야겠어요. 구글 DOCS도요.
    • Walter E.
      Walter E.
      2014/10/27 18:50
      네이버블로그에서도 Compact 모드를 이용하면 표 삽입이 자유롭더라구요 ^^ 티스토리블로그에는 표 기능이 좋아서 필요가 없겠지만, 네이버블로그나 텍스트큐브 블로그에 유용할 것 같습니다.
  2. 2016/08/02 18:09
    덕분에 이쁜 표를 만들게되었습니다.

    XE 제로보드를 사용중인데요. 모바일 레이아웃의 영향인지
    위 사이트에서 보여지는 화면과 스마트폰에서 보여지는 표가 좀 다릅니다.
    다른것은 바로 글자크기라고 해야되나요..

    예를 들면

    대한민국만세

    라고 표에는 되어있고 미리보기로 보아도 셀안에 "대한민국만세"로 보이지만

    XE 제로보드에 넣었을 경우에는 스마트폰에서

    대한민국
    만세

    이렇게 줄바꿈되어보입니다.
    뭔가 칼럼사이즈를 고정으로 잡고있어서 그런건지모르겠습니다.
    어떻게 해결할 수있을까요
    • Walter Erzsa
      Walter Erzsa
      2016/08/03 21:54
      모바일에서는 화면의 넓이가 좁아지기 때문에 줄바꿈되는 것으로 보입니다.
      이 경우에는 표 크기를 고정키셔보심이 어떠신지요?
      width 값을 입력하시면 됩니다.