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

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

Tables Generator

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

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

위에서도 언급했듯이 Tables Generator는 HTML 포맷만 지원하는 것은 아닙니다. 논문이나 책 등에 주로 사용되는 라텍(LaTex)이나 위키에 주로 사용되는 마크다운(Markdown) 포맷도 지원하고 있기 때문에 이 사이트는 넓은 범위에서 유용하게 사용될 수 있습니다.

HTML Table Generator

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

주로 HTML 테이블은 데이터를 정리해서 나타낼 때 사용되는데, 특히 순위나 목록을 나타내야 할 때 테이블을 사용하면 좋습니다.

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

상단에는 테이블 소스코드 포맷을 선택할 수 있는 탭이 있고, 아래쪽에 위지윅 형태로된 표 편집 도구가 있습니다. 이 표 편집 도구를 이용하면 블로그에 넣을 표를 직접 만들 수 있습니다. 만들어진 표의 HTML 소스코드는 페이지 하단에서 확인할 수 있습니다.

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

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

위와 같이 표를 만들고 나면 페이지 하단에 있는 Generate 버튼을 눌러서 HTML 소스코드를 업데이트합니다. 버튼을 누르면 하단의 글상자에 완성된 HTML과 CSS 소스코드가 나타납니다. 이 소스코드를 복사하여 블로그나 사이트에서 사용하면 됩니다.

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

그러나 HTML Table Generator에서는 텍스트 스타일을 자세하게 설정할 수는 없기 때문에 세부적인 텍스트 스타일은 위 스크린샷과 같이 네이버 스마트에디터를 활용해야 합니다. 만들어진 테이블 HTML 소스코드를 스마트에디터에 붙여넣기 한 후, 스마트에디터의 다양한 옵션들을 사용하여 텍스트 스타일을 수정하면 됩니다.

다른 블로그 시스템을 사용하고 있는 경우에도 마찬가지로 글 에디터에 만들어진 테이블 HTML 소스코드를 붙여넣기 한 후, 위지윅 환경에서 텍스트 스타일을 수정하면 됩니다.

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

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

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

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

테마 이용

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

사용상의 주의사항

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

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

마무리

이 글에서 설명했던 테이블 HTML 소스코드 자동생성 사이트는 모든 블로거에게 유용하게 사용될 수 있을 것 같아 블로그 카테고리에 이 글을 넣었습니다. 필자는 포스팅을 할 때 테이블을 자주 사용하는 편인데, 지금까지는 직접 HTML 소스코드를 작성했었습니다. 그런데 HTML Table Generator를 이용하면 좀 더 편하게 테이블을 만들 수 있을 것 같아 다음부터는 이 사이트를 이용하려고 합니다.

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

타이틀 이미지: slavik_V, DSC_0010, Flickr. CC BY 2.0.