[Web] HTML 테이블 자동으로 생성해주는 사이트

Front 개발작업을 하다보면 테이블을 생성해야 할 경우가 많은데요. 하지만 일일이 소스코드를 써가면서 테이블을 그리기란 매우 귀찮은 작업입니다. 이렇게 귀찮은 작업을 자동으로 해주는 사이트가 있습니다. Tables Generator라는 사이트입니다. 해당 사이트는 HTML 뿐만 아니라 LaTeX, Text, Markdown 등 매우 다양한 포맷의 테이블 소스코드를 자동으로 만들어주는 사이트입니다. 버튼 몇개만 간단히 눌러주면 알아서 스타일까지 입혀주기에 Front개발 작업시간을 비약적으로 줄일 수 있답니다.

 

테이블 자동으로 생성해주는 사이트 Tables Generator

사이트 주소는 아래와 같습니다.

http://www.tablesgenerator.com/html_tables

 

최상단에는 메뉴를 선택할 수 있는 메뉴바가 있고, 해당 메뉴를 누르면 그 메뉴의 기능에 맞는 화면이 Display됩니다. 아마 다른 메뉴보다 HTML Tables메뉴를 가장 많이 사용하실것 같네요.

 

메뉴의 난이도 자체는 크게 어렵지 않습니다. 이것저것 만지시다보면 1시간 이내로 익힐정도의 난이도인데요. 간략하게 설명하자면 상단의 툴바를 이용하여 테이블을 생성하고, 셀 병합, 셀 분할, 셀 추가, 셀 삭제, 텍스트와 셀 테두리, 배경의 스타일을 변경할 수 있습니다. HTML Table Generator는 위지윅에디터이기 때문에 일반적으로 엑셀에서 표를 편집할 때와 같은 방법으로 표를 수정하면 됩니다. 탭(Tab) 키를 사용하여 다음 칸으로 이동할 수 있고 CTRL과 SHIFT를 활용한 셀선택도 가능합니다. 

 

표를 다 만들게 되면 페이지 하단에 있는 Generate 버튼을 눌러서 HTML 소스코드를 업데이트합니다. 소스를 업데이트 하게되면 화면 아랫쪽에 완성된 HTML과 CSS 소스코드가 나타납니다. 이 소스코드를 복사하여 사용하시면 됩니다.