워드프레스에서 페이지나 글에 표를 삽입하려면 생각보다 어렵지요?
어떻게 설정해야 하는건지, 셀 크기부터 횡과 열 설정도 맘대로 안되고 여간 까다로운게 아닙니다.
이는 한글이나 워드 프로그램에서 표 작성이 습관화되어 더 어렵게 느껴지는 탓도 있을 겁니다.
이번 글에서는 간단한 표를 만들고 스타일을 적용해 보겠습니다.
에디터의 표 삽입 기능은 워드프레스 에디터 TinyMCE Advanced 플러그인에서 지원하는 표 기능입니다.
1. 표 삽입하기
’글 작성화면’의 에디터에서 [표] 버튼을 클릭하여 일단 표를 삽입하겠습니다.
5X5 의 표를 삽입하였으나 아래 그림과 같이 표가 삽입되었습니다.
테두리 오른쪽 상자를 드레그하여 오른쪽으로 700px까지 늘립니다.
표 전체를 블록한 상태에서 에디터의 [표] > [표 속성]을 선택합니다.
반응형 테마에서 출력되므로 각 해상도에서 잘 보이도록 가로폭을 %로 설정하기위해 표의 가로를 100%, 세로를 au>to로 입력합니다.
표의 첫 번째 줄에 Header 1 ~ 5까지 적어주고 이 부분을 block으로 감싼 후, 다시 에디터의 [표] > [열 속성]을 클릭합니다.
속성 설정에서 [고급]탭을 클릭하여 배경색을 다음과 같이 정합니다.
표 header 부분의 글자색을 흰색으로 지정하고 저장 합니다. 홈페이지에서 보면 아래 그림처럼 보입니다.
나머지 항목도 채우고 홈페이지에서 보면 아래 그림과 같이 출력됩니다.
각각에 작성된 글자 수 만큼 표의 각 셀의 가로폭이 적당히 자동으로 조절되어 보여집니다.
