워드프레스 기본 테마에는 테이블을 병합하는 방법이 없어 내가 원하는 테이블을 만드는데 한계가 있습니다. 워드프레스 플러그인 없이 테이블을 생성하고 셀을 병합하는 방법을 2가지 알아보도록 하겠습니다. 각 방법에서 구체적인 과정과 마주할 수 있는 단점도 다루겠습니다.
플러그인 없이 테이블 표 만들고 셀 병합하기
안그래도 느린 서버 쓴다고 최대한 플러그인 설치 안하려는데 내가 원하는 블로그 글을 구현하려면 플러그인 설치 없이 점차 하나 둘 제약이 걸립니다. 워드프레스를 처음 시작하고 MS오피스나 다른 프로그램에서 너무 일상적으로 쓰던 기능들이 없어서 적잖이 당황했습니다. 게다가 저는 CSS나 HTML을 배우지도 않아서 잘 모르기도 하고 뭐 잘못 건드릴까봐 걱정스럽기도 합니다.
그럼에도 불구하고! 플러그인 없이 테이블을 만드는 방법은 분명히 있을 거라 생각했습니다. 웹을 구동하는 방식을 조금만 이용하면 되지 않을까 했습니다. 그리하여 제가 현재 쓰고 있는 GeneratePress 테마에서 플러그인 없이 테이블을 병합하는 방법을 2가지 찾았습니다. 테이블 블록을 HTML로 편집하거나 Tables Generator로 표를 만들어 복사하고 워드프레스에 붙여넣기 하는 방법입니다. 조금 복잡해 보이거나 번거로울 수 있으나 한두 번만 해보면 금방 익힐 수 있습니다.
1. 테이블 블록 HTML로 편집
플러그인 없이 테이블을 병합하는 첫 번째 방법은 테이블 블록을 만들고나서 “HTML로 편집”하기 입니다.
HTML을 잘 모르셔도 충분히 따라해 볼 수 있으니 걱정하지 마세요. 저도 모르는데 몇 개 따라해보니 단순한 것들은 충분히 할 수 있었습니다.
기본적으로 테이블, 표는 행과 열이 있습니다. 우리 어렸을 때 배운 그 행렬입니다. 행은 가로로 붙어있는 셀을 말하고, 열은 세로로 붙어있는 셀을 말하죠. html에서 표를 그리기 위해서는 <table> </table> 태그 사이에 행과 열을 표현하는 태그를 넣습니다. 행은 table row의 약자인 <tr>, 열은 각 행에 들어가는 데이터를 넣는다는 의미에서 table data의 약자인 <td> 태그를 사용합니다. 마지막으로 테이블 제일 윗 줄인 타이틀, 헤더를 table header의 약자인 <th> 태그로 씁니다.
하지만 처음부터 <table>, <tr>, <td>, <th> 이런 태그를 모두 직접 쓸 필요는 없습니다. 테이블 블록으로 행과 열의 개수를 넣어 기본적인 표 구성을 만들어주고 내용을 넣습니다. 병합이 필요한 곳에는 빈칸으로 두어야겠죠! 그 다음에 병합이 필요한 부분만 수정해주면 됩니다. 위에 이미지처럼 테이블 블록에서 열, 행 수를 입력하고 테이블을 생성해서 정보를 넣어준 다음 html로 편집하기를 누르면 위처럼 외계 언어로 쓰여진 테이블을 볼 수 있습니다.
① HTML 코드 예쁘게 정렬해주고 보기
이거 아직 디자인이 들어가지 않아서 이정도지, 나중에는 엄청나게 길어지고 복잡하게 보입니다. 눈이 돌아가…역시 플러그인 없이 테이블은 무리인가.. 생각이 듭니다. 그럴때에는 HTML 코드를 예쁘게 정리해 주는 사이트를 이용하면 좋습니다. 무료이며, 코드를 붙여넣고 “변환” 버튼만 누르면 코드가 예쁘게 정렬되어 하단에 나타납니다. 그럼 오른쪽에 있는 “복사” 버튼을 누른 후, 워드프레스 단락 블록이나, 메모장 등 편한 곳에서 작업을 하면 좋습니다. (참고로 워드프레스 단락 블록에서 붙여넣기를 하면 수많은 블록이 생겨버리니, 엔터로 줄바꿈이 가능한 “운문” 블록을 이용하면 편리합니다.)
② 가로 셀 병합 : colspan
코드가 보기 좋게 정리까지 되어 있다면, 먼저 가로 셀 병합은 <td colspan=”(병합할 셀의 수)”> 태그로 넣어주고, 병합되는 빈칸 셀인 오른쪽 열에 해당하는 태그를 지워줍니다.
③ 세로 셀 병합 : rowspan
세로 셀을 병합하는 방법은 <td> 태그를 <td rowspan=”(병합할 행의 수)”>로 수정하고, 병합되는 빈칸 셀에 해당하는 태그를 지워줍니다. 예를 들어 정보가 들어간 셀과 아래 두 행까지 세로로 3개의 셀을 병합한다면 위와 같이 태그를 수정해주고, 아래 두 행에 대한 태그는 지워줍니다.
④ 정렬 : has-text-align-.. / data-align
| 구분 | A | B | C | |
| 정보 | 이것 | 저것 | 넣어 | 보고 |
| 확인 | 할수 | 있습 | 니다. | |
| 이렇 | 게 | 해보 | 세요 | |
정보를 직관적으로 보여주는 표에서는 정렬 또한 주요한 요소라고 생각하는데요. 여기서 문제는 워드프레스 기본 테마에서 정렬 기능이 각 셀마다가 아닌 열을 기준이라는 점 입니다. 그래서 셀마다 다르게 정렬을 하기 위해서는 정렬 태그를 알면 좋습니다. 예를 들어, 첫째 열을 가운데 정렬 시켜주니 두번째 열도 함께 가운데 정렬되는 문제는 셀의 태그에서 그 설정을 지워주면 됩니다. 가운데 정렬이 필요한 셀에만 해당 태그를 넣어줍니다.
정렬 태그는 class=”has-text-align-방향” data-align=”방향” 를 넣어주면 됩니다. 방향에는 왼쪽 정렬 left, 가운데 정렬 center, 오른쪽 정렬 right를 넣습니다. 위에 표가 최종적으로 나오는 모습입니다.
만약 표의 헤더 부분인 맨 윗줄만 가운데 정렬을 해줄 거라면 테이블 블록 설정에서 “헤더 영역”을 눌러주면 간편하게 가운데 정렬 헤더를 넣을 수 있습니다.
테이블 블록 HTML 편집의 단점
플러그인 없이 테이블 병합한다는 것은 인내를 필요로 하는 것 같습니다.
(빡침주의) 기본적으로 쓰는 html 코드 편집기처럼 줄바꿈으로 보기 쉽게 해놓지 않았기 때문에 스스로 줄바꿈으로 태그 구분을 해야 합니다. 또한 다른 블록을 클릭해서 테이블 블록이 비활성화 되거나 잘못 쓴 걸 수정하기 위해서 습관처럼 되돌리기 (cmd+z 혹은 컨트롤+z)를 누르면 기껏 구분 해놓은 태그들이 도로 붙어버립니다. 위에서 코드 예쁘게 정렬해주기 과정을 거친 이유가 바로 이 때문입니다.
정렬 태그 내용에서 말씀드린 것처럼 가운데, 왼쪽, 오른쪽 정렬을 이용할 때, “열” 전체를 적용하게 되어 있어서 연동되어 있는 셀 마다 정렬을 바꿔주어야 합니다. 셀 마다의 html을 바꿔주면 정렬을 다르게 적용할 수 있지만, 수정할 때 블록 컨트롤로 바꾸면 다시 깨져버립니다.. 정렬은 꼭 마지막에 수정하시길..
2. Tables Generator에서 표 만들고 복붙
플러그인 없이 테이블 병합하는 두 번째 방법은 Tables Generator를 이용하는 방법입니다. html을 편집하는 건 도통 모르겠고 너무 어렵다, 그리고 표가 복잡해서 html 편집에 눈이 빠질 것 같다, 한다면 Tables Generator라는 홈페이지를 이용하는 두 번째 방법을 추천드립니다.
Tables Generator 홈페이지를 접속해서 상단 메뉴 두 번째 탭을 선택하면 표를 그리는 편집창과 html 코드 생성 결과창이 함께 뜹니다. 편집창에서 원하는 행과 열의 수를 추가해주고, 내용을 편집합니다. 글꼴, 크기, 색상 등 디자인을 꾸며주는 CSS를 포함하여(Do not generater CSS 체크박스를 비워두고) 하단에 있는 Generate 버튼을 눌러주면 페이지 하단에 html 결과가 나옵니다. 마지막으로 오른편에 있는 초록색 Copy to clipboard 버튼을 눌러 복사해 줍니다.
| 구분 | A | B | C | |
|---|---|---|---|---|
| 정보 | 이것 | 저것 | 넣어 | 보고 |
| 확인 | 할수 | 있습 | 니다. | |
| 이렇 | 게 | 해보 | 세요 | |
이제 워드프레스 글쓰기로 돌아와서 + 버튼이나 /를 이용해 사용자 정의 HTML 블록을 넣습니다. 그리고 빈칸에 클립보드에 복사되어 있는 html 코드를 붙여넣기 해줍니다. 그러면 위의 화면처럼 html 코드가 죽 들어갑니다. 여기에서 미리보기를 누르면 만든 표를 워드프레스에서 볼 수 있습니다. 바로 위에 표가 HTML 블록을 이용한 표 결과 입니다.
Tables Generator 홈페이지를 즐겨찾기 해놓고 표가 필요한 경우에만 들어가서 내 입맛대로 멋진 표를 만들고 복붙만 해주면 되니 간편하고 쉽습니다.
Tables Generator의 단점
디자인 요소인 글자 크기, 중앙 정렬 등 내용을 수정하기 위해서는 Tables Generator 홈페이지로 다시 돌아가 표를 수정하고 다시 복사 붙여넣기 해줘야 합니다. 일정 시간 경과 후 수정을 하기 위해서는 홈페이지에서 표를 다시 그려야 하는 상황도 발생합니다. 그렇지 않다면 결국 html 구성 요소를 이해하고 HTML 블록에서 코드를 직접 수정해줘야 합니다.
그 외 방법
어떤 분들은 테이블 병합을 다른 블로그를 이용하기도 합니다. 네이버 블로그나 티스토리 블로그 등 타 블로그에서 표를 만들고 비공개로 발행한 후 그걸 복사/붙여넣기 하는 방법도 사용하고 있습니다. Tables Generator 방법과 거의 동일한 방법이면서, 비공개로 발행했으니 언제든지 수정해서 복사/붙여넣기가 가능하기 때문에 위의 단점을 보완해줄 수 있는 방법이라고 생각됩니다.
마지막으로 위에 말씀드린 2가지 방법을 응용하는 방법도 있겠습니다. 복잡하게도 많은 행과 열이 필요한 표를 만들거나 디자인 편집이 많이 필요하다면 Tables Generator에서 표를 만들고 복사 붙여넣기 하고, 그 후에 간단한 수정은 스스로할 수 있도록 위의 첫 번째 방법인 HTML로 편집하기 방법을 응용하는 방식으로 활용하실 수 있을 것입니다.
이렇게 워드프레스 플러그인 없이 테이블을 만드는 방법을 알아 보았습니다. 워드프레스 테이블 플러그인이 분명히 무척 편리한 도구인 것은 확실합니다. 하지만 플러그인 없이 테이블을 만드는 방법이나 플러그인 없이 다른 작업을 조금씩 시도해 보는 과정 속에서 이 인터넷 세상을 이해하는데 조금이나마 도움을 줄 수 있지 않을까 생각합니다.
워드프레스 정보를 공유하게 되어 기쁩니다! 저의 글이 도움이 되셨기를 바랍니다.
MK Monde 드림