HTML과 CSS 1도 모르겠지만 테이블만들어보기 (Table Generator)

 

html과 css를 하나도 모르겠지만 테이블을 만들 수 있는 사이트가 있습니다.

이 사이트 외에도 많은 사이트들이 있지만, 제가 원하던 병합기능이 있는 사이트가 별로 없었고 그나마 있는것도 사용성이 좋지 않아서 이 사이트가 최종적으로 소개 대상이 되었습니다.

 

http://www.tablesgenerator.com/html_tables

HTML Table generator - TablesGenerator.com

 

테이블 만드는 법 간략히 설명합니다.

 

1. 새 테이블 만들기

File > New table

 

2. 테이블의 열(Columns), 행(Rows) 숫자를 적어 새 테이블을 생성

행과 열 참고이미지

 

3. 머릿글(테이블 제목, th) 색상넣기

마우스로 해당영역 드래그 후에 색상 클릭

 

텍스트

 

배경

 

4. 셀 합치기 및 셀 나누기

마우스로 해당영역 드래그 후에 아이콘 클릭

 

합치기

나누기

 

5. 텍스트 입력

해당 영역에 더블 클릭 후 텍스트 입력

- 텍스트 가운데 정렬

해당 영역 드래그 후 마우스 우 클릭 > Text align > Center (수평 가운데 정렬), Middle (수직 가운데 정렬)

 

6. 코드 복사하기

(1) Do not generate CSS 체크 해제

(2) Compact mode 체크

(3) Generate 버튼 클릭

(4) Copy to Clipboard 클릭 (복사)

7. 원하는 영역에 붙여넣기 (티스토리 예시)

(1) 에디터 > HTML 모드로 전환 

 

(2) 코드 붙여넣기

(3) 다시 기본모드로 전환

삽입된 테이블 확인 가능

자 이렇게 해서 완성한 테이블을 확인할 수 있습니다.

 

 

그리고 별개로 임시 자동저장옵션입니다.

Edit > Autosave table locally 체크(기본은 체크되어있음)

이 기능을 사용하면 나중에 들어와도 이전에 작업한 테이블을 확인할 수 있습니다.