다양한 형식의 예쁜 표(테이블)를 자동으로 만들어주는 사이트

CSS에 익숙해지면 페이지를 코딩하거나 블로그 게시물을 쓸 때 별로 막히지 않는데, 유독 테이블만 작성하려고 하면 굉장히 골치 아프다. 틀을 좀 정해 놓고 싶어도 하드 코딩만으로는 적당하고 예쁜 테이블 속성을 완성하는 데 시간이 많이 걸리고 디자인 감각도 여간 필요한 게 아니다. 그래서 찾은 곳이 바로 Table Genetrator.

간단하게 예쁜 html(CSS) 테이블(table) 만들기

 

먼저 아래 사이트에 접속한다.

http://www.tablesgenerator.com/

 

가면 이렇게 쭉 종류별 테이블들이 구분돼 있다. LaTeX, HTML, Text, Markdown 등등... 원하는 형식을 찾아가자. 대부분은 HTML이 필요할 것 같고, Text Table도 경우에 따라 아주 쓸모가 많을 것 같다.

 

HTML을 선택하면 해당 속성들이 쭉 나온다. 각 속성을 컨트롤해 원하는 모양을 만들면 된다.

 

너무 막막하다면 오른쪽 'Example' 버튼을 클릭해서 예시 테이블을 먼저 적용하고 수정할 수도 있다.

 

글자 크기 바꾸기, 셀 배경색상 바꾸기, 셀 내부 padding 조절하기 등 테이블에 필요한 기능은 거의 다 구현되어 있다/

 

다 되면 'Preview'를 눌러 최종 모양을 확인한 다음,

 

복사 버튼을 클릭해 소스를 복사해서 원하는 곳에 붙여넣고 텍스트를 수정해 나가면 된다. 하드코딩에 익숙하지 않은 사람이라면 필요한 셀 개수까지 정확하게 맞춰서 만들어 쓰는 게 좋겠다.