워드프레스 표 만들기 플러그인 TablePress 마음대로 주무르기

TablePress는 워드프레스에서 표를 삽입하는 대표적인 플러그인 중 하나입니다. 이 프 만들기 플러그인은 현재 80만 개 이상 사이트에서 사용될 정도로 인기를 끌고 있습니다. 이 글에서는 TablePress로 만든 표를 구미에 맞게 수정하는 방법을 살펴보겠습니다.

2021년 업데이트: 워드프레스 기본 편집기인 구텐베르크에서 테이블 블럭을 제공합니다. 간단한 표를 삽입하려는 경우 기본 편집기에서 제공하는 테이블(표) 요소를 사용해보시기 바랍니다.

워드프레스 표 만들기 플러그인 TablePress 표 커스터마이징하기

워드프레스 표 만들기 플러그인: TablePress

워드프레스 사이트에서 TablePress 플러그인을 사용하면 편리하게 표(테이블)를 만들어 삽입할 수 있습니다. 하지만 자동으로 만들어지는 표를 그대로 사용하기에는 다소 불만일 수 있습니다. (보다 편리하게 테이블과 차트를 만들고 관리하고 싶은 경우 이 글에 소개된 wpDataTables 플러그인을 고려해볼 수 있습니다.)

워드프레스 표 만들기 플러그인 TablePress로 만든 표 (기본)

이 글에서는 TablePress 표를 사용자 구미에 맞게 조정하는 방법을 살펴보겠습니다. 우선 샘플 테이블을 하나 만들겠습니다.

표 외곽 테두리선과 음영(그림자) 효과

tablepress wrapper 요소를 사용하여 표 전체의 외곽 테두리선과 drop shadow 효과를 적용해보겠습니다. 다음과 비슷한 코드를 CSS 스타일시트에 추가하시면 됩니다. CSS 코드를 스타일시트에 추가하는 방법은 여기를 참조하시기 바랍니다.

/* tablepress border */
#tablepress-1_wrapper /* tablepress wrapper 요소. 요소 검사를 통해 확인. 예: #tablepress-2_wrapper */
{
border: 1px solid grey; /* grey 대신 적절한 색상으로 대체 */
box-shadow: 10px 10px 5px #888888; /* 박스 그림자 효과 */
}
TablePress 표 커스터마이징

그럼 어떻게 바뀌었는지 볼까요? 그림자 효과만 줘도 단조로움이 많이 사라지네요.

텍스트 정렬

다음으로 첫 번째 행의 텍스트를 가운데 정렬로 조정해보겠습니다. 다음과 비슷한 코드를 사용합니다.

/* Align the text in the first line in TablePress */
tr.row-1.odd > th {
  text-align: center;
}
TablePress 테이블 텍스트 정렬하기

다음 그림과 같이 첫 번째 라인의 텍스트가 가운데 정렬되었습니다.

TablePress 표의 너비 조정

이제 표의 너비를 조정하는 방법을 살펴보겠습니다. 위의 그림을 보면 표의 너비가 그리 마음에 들지 않습니다. 몇 가지 시나리오를 생각해볼 수 있습니다.

첫 번째는 일부 열만을 고정 너비로 조정하고 나머지는 자동으로 조정되도록 하는 방법이고, 두 번째는 모든 열의 너비를 각각의 비율(%)로 조정하는 것입니다. 둘 모두 장단점이 있겠죠. 모든 열의 너비를 각각의 비율로 조정하려면 width: 50%;와 비슷한 코드를 각각의 열에 해당하는 요소에 적용하면 됩니다.

여기서는 첫 번째 열과 맨 끝의 열(현재 4번째 열은 약 25% 크기로 맞추어져 있습니다. 이것을 20% 수준으로 낮추어 보겠습니다)만 고정하고 나머지는 그대로 두도록 하겠습니다. 조정을 받는 열의 요소를 알아야 합니다. 아마 쉽게 파악이 안 될 수도 있을 것입니다. 아래와 비슷한 코드를 삽입하시면 됩니다.

/* Adjust the width of the columns of a TablePress table */
#tablepress-1 th.column-1 {
width: 50px; /* 첫 번째 열의 너비를 50px로 고정 */
}
#tablepress-1 th.column-4 {
width: 20%; /* 네 번째 열의 너비를 20%로 고정 */
}
TablePress 표 너비 조정

위의 코드를 적용한 후의 모양입니다.

세로 선 삽입하기

이제 세로 선을 삽입해보겠습니다. 첫 번째 열과 두 번째 열 사이에 점선을 추가해볼까요? 이 경우 두 가지 요소를 함께 고려해야 합니다. 첫 번째 행은 테이블 헤더(table header)로 설정했기 때문에 첫 번째 행과 나머지 행들을 분리하여 생각해야 합니다. 그리고 첫 번째 열의 정렬도 마음에 들지 않으므로 중앙 정렬하도록 합니다. 다음의 코드를 추가하시면 됩니다.

/* Inserting a dotted line between the first and the second columns in TablePress */
#tablepress-1 th.column-1,
#tablepress-1 td.column-1
{
border-right: 1px dotted grey;
}
/* text align for the 1st column */
#tablepress-1 td.column-1
{
text-align: center;
}
워드프레스 TablePress 표 세로선 삽입하기

이제 최종 완성된 모양을 볼까요?

어떤가요? 처음보다 정돈된 느낌이죠? 마찬가지 방법으로 텍스트의 색깔과 크기 등을 마음대로 조정할 수 있습니다. 웹에서 표의 너비 등을 조정하는 작업이 어려울 수 있는데, 이렇게 간단한 CSS를 통해 쉽게 표를 사용자 구미에 맞게 수정이 가능합니다.

이 글은 구 버전을 기준으로 작성되었기 때문에 최신 버전에서 적용되지 않을 수도 있습니다. 하지만 원리를 이해하여 응용해보시기 바랍니다.

참고:


19개 댓글

  1. 랭크매스를 사용하고 있는데 플러그인으로 만든 표 안의 텍스트는 글자수를 체크를 안하는 것 같습니다. 표 위주로 글을 작성하니 실제로는 분량이 충분함에도 콘텐츠 길이가 600단어가 안된다고 seo 점수가 올라가지 않는데, 혹시 구글 엔진 입장에서도 표를 외부 소스로 인식해서 콘텐츠 분량 부족으로 seo에 영향을 줄지 궁금합니다.

    1. Rank Math 등에서 제시하는 점수는 참조용으로만 활용하시기 바랍니다. 참고로 구글에서는 콘텐츠 길이가 순위 결정 요소가 아니라고 밝히고 있습니다. 또한, Rank Math 등은 영문 콘텐츠를 기준으로 한 것인데요. 영문을 한국어로 번역하면 분량이 줄어듭니다. 즉, 영문 600단어와 한글 600단어는 분량이 사실 다릅니다.

  2. 또 저같은 경우는 글간격의 높이를 지정하면 모바일에서 깨지던데 선생님 글은 높이가 설정된 것 같아요 넣어봤는데 안되거든요 이건 따로 방법이 있는 것인지 궁금합니다 너무 많은 질문드려서 죄송해요ㅜ 워린이 열정에 한수 가르쳐주시면 더 열심히 하겠습니다ㅎ

  3. 선생님 블로그 그림들이 모두 drop shadow 효과 적용한 CSS군요 CSS 손과 눈에 익숙하지가 않네요ㅠ 포스팅이 너무 깔끔해서 눈에 잘들어오는데 보통 포스팅하실 때 HTML CSS 코드로 다 짜면서 글을 쓰시는지 궁금하네요 틀이 있으면 도장 찍듯이 찍고 간단하게 수정하면 좋겠는데요ㅎ 에디터는 블록 사용하시나요? 포스팅에 너무 많은 시간을 허비할 것 같은데 선생님은 어떠세요?

    1. CSS는 모든 포스트에 공통적으로 적용되도록 되어 있습니다. 특정 블록에는 CSS 클래스를 지정하기도 하지만, 대부분은 일반 글을 작성하듯이 작성된 것입니다. 블록 에디터(구텐베르크)의 문단(paragraph) 블록과 제목(타이틀) 블록, 그리고 인용구(Quote) 블록, 목록(리스트) 블록을 주로 사용합니다. Youtube 영상을 추가할 때에는 YouTube 블록 대신 "사용자 정의 HTML"을 사용하여 추가하고 있습니다.

      정리하면 그냥 일반 글 작성하듯 글을 작성하고, 전체적인 레이아웃은 CSS로 조정해주었습니다. 또, 일부 문단 블럭에는 CSS 클래스가 지정되기도 합니다.

      1. 직전에 선생님 CSS 코드 남겨주셨는데 따로 저장을 안해놨습니다. 선생님 활용하시는 틀 공유좀 해주실 수 있나요? 저도 좀 변형해서 활용하고 공부해보겠습니다. 공유해주시면 이걸 구덴베르크 에디터에 로 넣으면 되는 것인지 궁금합니다

  4. 안녕하세요 워드님.
    오늘도 워드님의 유익한 블로그로 도움이 되었습니다.^^
    한가지 해결하지 못한것이 테이블 헤더쪽의 배경색을 바꾸려면 어떻게 해야되는지 모르겠네요.
    tr.row-1.odd > th {
    text-align: center;
    background-color: black;
    }
    위와 같이 하면 바뀔줄 알았는데 안되더라구요...
    모든 표의 헤더 부분의 배경색이 하늘색 기본지정 되어 있는데 이 부분을 바꾸고 싶은데 css를 어떻게 적용하면 가능할지 알려주시면 좋겠습니다.

    1. 안녕하세요?

      제가 직접 확인할 수가 없어서 정확한 답변을 드릴 수 없는 점 양해바랍니다.

      CSS가 정확하지만 적용이 안 되는 경우 !important;를 추가해보시기 바랍니다.

      background-color: black !important;

      무더위에 건강 주의하시기 바랍니다.

      1. 알려주신대로 하니까 적용이 되네요^^ 그런데 다른 컬러로 다시 바꾸니 바뀐 컬러로 보여지지가 않네요. 캐쉬지우고 강력새로고침해도 변경사항이 웹브라우저에서 반영이 안되고 한번도 접속하지 않은 기기로 하면 올바르게 보여지네요...이럴때는 어떻게 하시나요?

      2. 캐시 플러그인을 설치한 경우 간혹 이런 현상이 발생할 수 있습니다.
        저는 작년에 테마를 바꾼 후에 캐시 문제가 발생하여 몇 달 동안 고생했습니다.

        저는 캐시 플러그인을 바꾸고 브라우징 캐시 기능을 비활성화하여 문제를 해결했습니다.

        https://www.thewordcracker.com/basic/published-posts-not-showing-issue-in-wordpress/

        사이트에 따라, 환경에 따라 해결 방법이 다를 수도 있을 것 같습니다.

    1. 우선은 CSS에 대해 공부해보시길 권장해드립니다. 온라인으로는 https://opentutorials.org/ 사이트에서 적당한 강좌를 선택하여 들어보시기 바랍니다. 책을 구입하셔도 좋을 듯합니다. 저는 책을 구입하여 봤거든요.

    1. 안녕하세요? CSS가 쉬운 것 같으면서도 어떨 때는 어려운 것 같습니다. 끝에 !important를 한 번 추가해보시기 바랍니다.

      예:
      width: 100px!important;

댓글 남기기

* 이메일 주소는 공개되지 않습니다.