HTML 태그 테이블(표) 만드는 방법!! 코딩할 줄 몰라도 가능합니다.
 |
| HTML 태그 테이블(표) 만들기 |
블로그 카페나 홈페이지등을 운영할 때 포스팅한 글을 깔끔하게 전달하기 좋은 방법으로 표(테이블)을 삽입하는 경우가 있습니다. 이런 경우 HTML 태그를 활용한 코딩이 가능하다면 쉽게 만들 수 있겠지만, 그렇지 않으면 난감할 수 있습니다.
코딩을 할 줄 몰라도 HTML 태그를 활용한 테이블(표)를 쉽게 만들 수 있는 방법을 알려드립니다.
먼저 Tables Generator (https://www.tablesgenerator.com/html_tables )로 이동합니다.Tables Generator은 HTML 형식으로 표를 만들 수 있는 빠르고 간단한 도구로 셀 병합과 텍스트 정렬 및 텍스트의 색상 교체 등 간단한 디자인 기능을 지원합니다. 오픈 소스로 무료 소프트웨어입니다. 서버에 데이터를 저장하지 않으며 원하는 테이블 코드를 생 성하는 것 이외의 목적으로는 사용하지 않으므로 자유롭게 사용하실 수 있고 HTML과 CSS에 익숙하지 않은 사람들에게 유용 할 것입니다.
예제는 2019년 1월 달력을 간단하게 만들 예정입니다. 테이블을 처음 생성하고 글자 입력, 색상 변경, 크기 변경 등 다양한 사용하여 설명합니다.
▼ 예제 미리 보기
| 2019 / 1 JANUARY | ||||||
|---|---|---|---|---|---|---|
| S | M | T | W | T | F | S |
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 | ||
Tables Generator 기능 설명
 |
| - Tables Generator 기능 설명 - |
1. 화면의 상단에는 file, Edit, Table, Column, Row, Cell, Help 등 전체 메뉴가 있습니다.
1-1 File(파일)은 새로운 테이블을 만들고 저장하고 기존 파일을 불러오거나 CSV 파일을 가져올 수 있으며 Microsoft Excel의 스프레드시트, 텍스트 문서 또는 웹 사이트에서 복사 (Ctrl + C) 한 테이블 데이터를 복사하여 붙여 넣기(Ctrl + V) 할 수 있습니다. 제작한 테이블을 저장하면 확장자는. tgn으로 만들어집니다.
 |
| - 파일 메뉴 - |
1-2 Edit(편집)에는 실행 취소(Ctrl+Z)와 반복(Ctrl+Y) 버튼과 테이블이 자동 저장되는 것을 선택할 수 있습니다.
 |
| - 편집 메뉴 - |
 |
| - Table 메뉴 - |
 |
| - Column 메뉴 - |
 |
| - Row 메뉴 - |
2 표를 꾸밀 수 있는 버튼 모음입니다.
2-1 좌측부터 선택한 셀의 텍스트를 왼쪽, 가운데, 오른쪽으로 정렬하고 글꼴을 굵게, 기울임, 밑줄 텍스트로 변경할 수 있습니다. 다양한 글꼴이 변경할 수 있으며 크기도 조절 가능합니다.
 |
| - 아이콘 모음 - |
2-2 링크를 삽입하여 웹페이지로 이동할 수 있습니다.
2-3 셀 관련한 아이콘으로 선택한 셀의 병합과 분할 그리고 텍스트, 배경, 테두리의 색상을 변경하거나 색상을 지울 수 있습니다.
2-4 Theme(테마)에서 색상, 테두리 및 줄무늬 테마에서 마음에 드는 것을 골라 작성할 수 있습니다.
 |
| - 디자인 테마 미리 보기 - |
3. 표를 새로 만들고 디자인을 실제 적용하고 수정할 수 있습니다.
4. 작성한 테이블 태그를 복사하여 적용하고자 하는 곳에 붙여 넣기 합니다.
5. 완성된 표를 미리 보기 합니다.
예제를 따라서 만들어보기
① 파일 메뉴에서 새 파일을 선택하여 표 크기(행과 열의 개수)를 입력합니다. 행은 숫자로 열은 영문 알파벳으로 표시됩니다.
④ 셀을 모두 선택하고 텍스트를 가운데 정렬로 바꾼 후 연도는 22px, 요일과 날짜는 15px 크기를 변경합니다.
작성한 HTML 태그 테이블(표)를 WiX 홈페이지, 네이버 블로그, 구글 블로그,에 삽입하는 방법을 참고하세요.
WiX 홈페이지
WiX로 만든 홈페이지에 HTM 태그 소스를 삽입할 수 있습니다. 사이트 편집(윅스 에디터) 화면에서 <+추가>를 눌러 기타에서 HTML 코드 아이콘을 선택하여 Tables Generator에서 만든 테이블(표) 소스를 그대로 삽입하면 완성됩니다.
 |
| WiX 홈페이지 HTML 태그 삽입하는 방법 |
참고로 윅스에는 <Table Master 앱>을 활용하여 표를 만들 수 있고 Wix Code를 이용하여 생성할 수 있습니다.
구글 블로그
구글 블로그에서 로그인 후 <글쓰기> 버튼을 클릭합니다. 글쓰기 화면에서 <HTML>아이콘을 선택하고 미리 만들어 둔 테이블(표) 소스를 붙여 넣기 합니다. <미리 보기> 아이콘을 클릭하여 확인하고 저장하면 완료됩니다.
 |
| 구글 블로그 HTML 태그 삽입하는 방법 |
네이버 블로그
네이버의 글쓰기 버전 스마트에디터 3.0의 표 만들기 기능은 잘 만들어져있습니다. 그 기능을 그대로 사용해도 되며 새로 만드는 것이 불편하고 이미 만들어진 테이블 소스가 있다면 2.0 버전에서 그대로 삽입하여 활용하면 됩니다.
 |
| 네이버 블로그 HTML 태그 삽입하는 방법 |
댓글
댓글 쓰기