코드로 된 테이블을 쉽게 만드는 방법 : TablesGenerator 활용법
이 글에서는 테이블을 쉽게 코드로 변환하는 방법을 다룹니다. 간혹 블로그 같이 웹사이트에 표(테이블)을 삽입하고 싶은데 방법을 찾는 경우 해결방법을 다룹니다. 원하는 형태의 테이블을 만든 후 쉽게 코드로 전환할 수 있습니다. 그 코드를 웹페이지에 삽입하면 작업완료입니다.
생각하게 된 배경
글이라는 것이 때로는 생각을 정리하기에 적합하지 않을 수 있어요. 예를 들어, 복잡한 정보나 데이터는 글로만 표현하려 하면 오히려 이해하기 어려워질 수 있죠. 이럴 때 표를 사용하면 정보를 한눈에 파악하기 쉬워지고, 어떤 패턴이나 구조가 있다면 더욱 명확하게 드러나곤 해요. 마치 수학 문제를 해결할 때 수식만으로 풀기보다는 함수의 그래프나 기하학적 도형을 활용하면 문제의 해결책을 더 쉽게 찾을 수 있는 것처럼요.
보통은 간단한 데이터를 정리하거나 처리할 때 표를 사용하는데, Apple의 Numbers나 Google의 Sheets 같은 툴을 활용해왔어요.
그런데 블로그에 글을 쓰면서 테이블을 삽입하려고 하니, 사용하는 CMS에서 테이블을 어떻게 지원하는지 알아보는 것이 중요해졌어요. 예를 들어 Google Blogger의 경우, 일반 편집기 모드와 HTML 모드 둘 다에서 테이블을 삽입할 수 있어요. 일반 편집기 모드에서는 테이블이 그림으로 삽입되거나, 자체 CSS를 가진 테이블로 들어가는데, 이 경우 웹페이지가 반응형으로 변할 때 레이아웃을 깨트리는 문제가 발생하기도 해요. 테이블이 자체 스타일을 가지지 않고 블로그 테마의 테이블 서식을 따르도록 하려면, <table>, <th>, <td> 같은 코드를 사용해 간단히 표현하는 방법이 있죠. 하지만, 병합된 셀 같은 특정 형태를 간단한 코드로 표현하는 것은 쉽지 않더라고요. 1차원적인 코드를 일일이 수정하는 것보다는 2차원적으로 표를 보며 바로 표를 수정해서 사용할 수 있기를 바랬죠.
이런 문제를 해결하기 위해 HTML 코드 방식으로 블로그에 테이블을 삽입하는 방법을 찾아봤어요. 가장 간편하다고 생각한 방법은 Excel 같은 프로그램에서 표를 만든 후, 스타일 없이 HTML 코드로 복사해서 블로그에 붙여넣는 것이었죠. 이렇게 하면 표의 서식이 블로그 테마의 서식을 따라갈 거라고 생각했어요.
Microsoft Excel은 표를 처리하는 데 필요한 거의 모든 기능을 지원한다고 하지만, 자주 사용하지 않는다면 구독할 필요성을 느끼지못해서 아예 사용하질 않아요. 다른 프로그램을 쓰죠.
더 살펴보니, 어떤 프로그램들은 표를 서식 없는 HTML 코드로 복사하는 기능을 제공하기는 하지만, 셀 병합 같은 기능은 지원하지 않았어요. 그래서 계속 찾아보다가 하나의 웹페이지를 발견했어요.
바로 이곳, TablesGenerator란 사이트를 찾았습니다. 이 사이트는 다양한 형태의 표를 HTML 코드, 마크다운 등으로 쉽게 만들어주고, LaTex, HTML, Text, Markdown, MediaWiki 등 다양한 형식으로 수정하거나 코드를 복사할 수 있게 해주네요!!.
TablesGenerator에서 테이블을 쉽게 사용합니다.
TablesGenerator의 사용법
TablesGenerator은 여러분이 손쉽게 다양한 형태의 테이블을 만들고, HTML, LaTeX, Markdown, MediaWiki 등 여러 포맷으로 내보낼 수 있게 돕는 웹 기반 도구입니다. HTML 테이블을 만드는 과정을 간단히 알아볼까요?
1. TablesGenerator 접속
먼저, 웹 브라우저를 열고 TablesGenerator에 방문합니다. 위에 링크가 있죠?
2. 테이블 유형 선택
사이트 상단에서 HTML Tables, LaTeX Tables, Text Tables, Markdown Tables 중에서 원하는 테이블 유형을 선택합니다. HTML 테이블을 만들고 싶다면, HTML Tables를 클릭하세요.
3. 테이블 생성 및 데이터 입력
새 테이블을 시작하고 싶다면, File > New Table을 클릭하여 만들어보세요.
이미 csv 파일로 준비된 데이터가 있다면, 이 파일을 바로 가져올 수 있습니다.
다른 프로그램(ex. Sheets, Numbers, Excel 등)이나 텍스트 문서에서 복사한 테이블, 마크다운 코드, HTML 코드로 된 테이블, 혹은 웹사이트에서 복사한 테이블도 File > Paste table data..를 선택하여 붙여넣을 수 있습니다. 그 후 'Load'를 클릭하면, 테이블이 사이트에 나타납니다.
4. 테이블 수정
테이블에 데이터를 입력하려면, 원하는 셀을 더블클릭하고 텍스트를 입력하세요. 테이블의 행이나 열을 추가하거나 기본적인 툴은 마우스 우클릭 또는 메뉴바에서 찾아보세요. 그리고 row나 column의 이동은 마우스로 1줄을 선택한 후 드래그하면 됩니다.
셀을 병합하고 싶다면, 병합하고자 하는 셀을 드래그하여 선택한 다음, 메뉴바의 'Cell' > 'Merge cells'에서 Merge cells를 클릭하세요.
서식 수정이 필요하다면, 엑셀, 워드, 시트, 넘버스 등의 프로그램에서 하거나, 이 사이트에서도 기본적인 서식 변경이 가능합니다. 여러 가지 테마를 적용해볼 수 있어요.
셀의 배경색, 텍스트 정렬 등을 조정하고 싶다면,
Cell properties를 선택하세요.Table properties에서는 테이블의 전체적인 스타일을 조정할 수 있습니다.
5. HTML 코드 생성
모든 수정이 끝났다면, 목적에 맞게 단순한 형태의 테이블 코드를 얻기 위해 설정을 조정합니다.
Do not generate CSS를 선택하고, 필요에 따라 Compact mode를 조정합니다. 전 혹시모를 데이터 수정을 위해서 테이블내용을 보기편한 형태가 좋아서 항상 compact mode는 해제해둬요.
First row is a table header만 체크하고, 나머지 옵션은 해제한 뒤, 페이지 하단의 Generate 버튼을 클릭합니다. 오른쪽 패널에 HTML 코드가 생성됩니다.
6. HTML 코드 복사 및 사용
생성된 HTML 코드 아래의 Copy to clipboard 버튼을 클릭하여 HTML 코드를 복사합니다.
복사한 HTML 코드를 원하는 웹 페이지나 블로그의 HTML 편집기에 붙여넣어 사용하세요.
TablesGenerator를 통해 복잡한 HTML 테이블도 간단하게 생성하고 관리할 수 있습니다. 이 도구는 웹 개발자, 블로거, 학술 연구자들에게 특히 좋으며, 특히 복잡한 형식의 표를 간단하게 code형식으로 바꿔서 사용할 수 있기에 굉장히 유용한 사이트라고 생각해요.
댓글
댓글 쓰기