워드프레스 표 만들기 및 모바일 표 잘림 해결｜반응형 HTML·CSS 설정

워드프레스에서 블로그 글이나 홈페이지를 만들다 보면 제품 사양, 가격 비교, 설정값 등을 정리하기 위해 표(Table)를 자주 사용하게 됩니다.

문제는 PC에서는 멀쩡하게 보이던 표가 스마트폰으로 접속하면 오른쪽이 잘리거나 본문 전체가 가로로 늘어나는 경우가 있다는 것입니다.

저도 워드프레스와 티스토리를 운영하면서 이런 문제를 여러 번 겪었는데요. 특히 예전에 클래식 편집기로 만들었던 표는 너비가 800px, 1000px처럼 고정되어 있어 모바일에서 정상적으로 표시되지 않는 경우가 있었습니다.

당시에는 TinyMCE Advanced에서 표 속성을 열어 너비를 100%로 바꾸는 방법으로 해결한 적도 있지만, 지금은 워드프레스 기본 편집기와 테마 구조가 달라졌기 때문에 상황에 따라 다른 방법이 필요합니다.

이번에는 워드프레스 표 만들기부터 모바일 테이블 잘림, 셀 너비 조정, 반응형 HTML·CSS, 가로 스크롤 설정까지 실제 적용할 수 있는 방법을 정리해 보겠습니다.

워드프레스 모바일 표 잘림 빠른 해결

표가 화면 밖으로 나간다면 먼저 HTML의 width="800" 또는 width:800px처럼 고정된 너비가 있는지 확인하세요.

열이 적은 표는 width:100%와 자동 줄바꿈으로 해결할 수 있습니다.

열이 많거나 긴 내용이 들어가는 표는 overflow-x:auto를 이용해 표 영역 안에서만 좌우 스크롤하도록 만드는 것이 안정적입니다.

플러그인 없이도 적용할 수 있으며, 구텐베르크·클래식 편집기·티스토리 HTML 모드에도 응용할 수 있습니다.

워드프레스 표가 모바일에서 잘리는 이유

워드프레스가 반응형 테마라고 해서 모든 표까지 자동으로 모바일 화면에 맞춰지는 것은 아닙니다.

예를 들어 PC에서 본문 너비가 900px이고 그 안에 800px짜리 표를 넣었다면 별문제 없이 표시됩니다.

하지만 화면 너비가 390px인 스마트폰에서는 그 표를 그대로 표시할 공간이 부족합니다.

이때 테마와 테이블 CSS에 따라 표의 오른쪽이 잘리거나, 화면 전체에 가로 스크롤이 생기거나, 글씨가 비정상적으로 작아질 수 있습니다.

가장 흔한 원인은 다음과 같습니다.

원인	증상	해결 방법
고정된 px 너비	모바일에서 표 오른쪽이 잘림	width:100% 또는 스크롤
열이 너무 많음	글씨가 작아지고 셀이 좁아짐	가로 스크롤 적용
셀에 긴 URL·문자열	특정 열만 지나치게 넓어짐	overflow-wrap 설정
white-space:nowrap	긴 문장이 줄바꿈되지 않음	normal 또는 스크롤
테마 CSS 충돌	특정 글이나 표에서만 오류	선택자·우선순위 확인
셀별 고정 너비	표 너비를 100%로 해도 잘림	td·th 너비 함께 확인

예전에는 표 너비만 100%로 수정하면 대부분 해결된다고 생각했지만, 실제로는 셀마다 지정된 최소 너비나 줄바꿈 설정 때문에 문제가 남는 경우도 있습니다.

따라서 표의 열 개수와 내용을 확인한 뒤 전체 너비를 줄일 것인지, 표에만 가로 스크롤을 적용할 것인지 결정하는 것이 좋습니다.

워드프레스 표 만들기 - 플러그인 없이 테이블 블록 사용

먼저 현재 워드프레스에서 가장 간편하게 표를 만드는 방법부터 알아보겠습니다.

예전에는 표를 만들기 위해 TinyMCE Advanced 같은 편집기 플러그인을 설치하는 경우가 많았지만, 지금은 구텐베르크(Gutenberg) 기본 블록 편집기에서도 표를 만들 수 있습니다.

1. 워드프레스 글쓰기에서 테이블 블록 추가

1. 워드프레스 관리자 화면에 로그인합니다.
2. 글 → 새 글 추가를 선택합니다.
3. 본문에서 + 버튼을 누릅니다.
4. 검색창에 테이블 또는 Table을 입력합니다.
5. 테이블 블록을 선택합니다.
6. 원하는 행과 열 개수를 입력한 다음 표를 생성합니다.

예를 들어 제품 3개를 비교한다면 항목을 포함해 4열로 만들 수 있습니다. 표를 만든 뒤에도 행과 열은 추가하거나 삭제할 수 있습니다.

2. 표 헤더와 고정 폭 셀 설정

테이블 블록을 선택한 뒤 오른쪽 블록 설정을 열면 표의 표시 방식을 조정할 수 있습니다.

• 헤더 섹션 : 표의 첫 번째 행을 제목 영역으로 사용합니다.
• 푸터 섹션 : 합계나 요약처럼 마지막 행을 별도 영역으로 만듭니다.
• 고정 폭 테이블 셀 : 열의 너비를 균등하게 배분하도록 설정합니다.
• 스타일 : 기본 테두리 또는 줄무늬 형태를 선택할 수 있습니다.
• 색상·테두리·여백 : 테마와 지원 기능에 따라 디자인을 조정합니다.

짧은 단어로 구성된 표는 고정 폭 셀을 사용하면 보기 좋습니다. 반면 긴 설명이나 URL이 많은 표는 고정 폭을 해제하거나 별도로 반응형 스크롤을 적용하는 것이 유리할 수 있습니다.

구텐베르크 기본 테이블은 간단한 표를 만들기에는 충분하지만, 복잡한 셀 병합과 세부 편집이 필요할 때는 HTML이나 플러그인을 함께 사용하는 편이 편리합니다.

▶ 워드프레스 공식 문서 - 테이블 블록 추가 및 설정 방법

TinyMCE Advanced로 워드프레스 표 만들기

이번에는 제가 예전에 사용했던 TinyMCE Advanced 방식입니다.

워드프레스를 오래 사용한 분들에게 익숙한 플러그인인데, 현재 공식 명칭은 Advanced Editor Tools로 변경됐습니다.

예전 TinyMCE Advanced와 다른 별개의 프로그램이 아니라 이름이 변경된 같은 플러그인입니다.

구텐베르크 편집기에서 클래식 블록을 활용하거나 기존 클래식 편집기의 표 기능을 확장하려는 경우에 사용할 수 있습니다.

▶ Advanced Editor Tools 공식 플러그인 다운로드

참고로 아래 화면은 예전에 사용하던 TinyMCE Advanced 구버전 편집 화면입니다. 현재 설치한 플러그인의 버전이나 편집 방식에 따라 버튼 위치와 화면 구성은 달라질 수 있습니다.

1. Advanced Editor Tools 설치와 설정

1. 워드프레스 관리자에서 플러그인 → 플러그인 추가를 선택합니다.
2. 검색창에 Advanced Editor Tools를 입력합니다.
3. Andrew Ozz가 개발한 플러그인을 확인합니다.
4. 설치 후 활성화합니다.
5. 설정 → Advanced Editor Tools에서 편집기 도구와 표 관련 기능을 확인합니다.

이미 TinyMCE Advanced를 사용하고 있었다면 무조건 삭제 후 재설치하기보다 플러그인의 현재 상태와 업데이트 여부를 먼저 확인하세요.

기존 TinyMCE Advanced 편집기 설정 화면

Advanced Editor Tools의 장점은 표 기능뿐 아니라 글꼴, 크기, 텍스트 서식 등 클래식 편집기의 도구를 확장해 사용할 수 있다는 것입니다.

특히 기존 워드프레스 글에 클래식 블록이 많다면 익숙한 편집 화면을 유지하는 데 도움이 됩니다.

2. 클래식 편집기의 표 도구 사용하기

플러그인 설정에서 필요한 도구를 활성화하면 클래식 편집기의 도구 모음에서 표 생성 및 편집 기능을 사용할 수 있습니다.

표를 추가할 때에는 원하는 행과 열을 선택하면 됩니다. 표를 선택한 뒤에는 사용하는 편집기 버전에 따라 셀이나 행의 속성을 조정할 수 있습니다.

기본적인 표뿐 아니라 셀 병합과 테두리, 배경색 등을 수정해야 한다면 클래식 편집기 기능이 편리할 수 있습니다.

클래식 편집기에서 테이블을 추가하는 화면

다만 새로운 글을 작성할 때 단순한 표 하나 때문에 이 플러그인을 꼭 설치할 필요는 없습니다.

표가 간단하다면 기본 테이블 블록을 사용하고, 복잡한 표나 예전 클래식 편집기의 작업 방식을 유지해야 할 때 Advanced Editor Tools를 활용하는 것이 합리적입니다.

워드프레스 모바일 표 짤림 해결방법 3가지

이제 가장 중요한 표 잘림 문제를 해결해 보겠습니다.

먼저 표가 어떤 방식으로 만들어졌는지 확인하세요. HTML에서 고정 너비로 만들었는지, 기본 테이블 블록인지, TablePress로 만든 표인지에 따라 수정할 위치가 달라집니다.

방법 1. 표 너비를 px에서 100%로 변경

가장 먼저 확인할 방법은 고정된 표 너비를 변경하는 것입니다.

예전에 클래식 편집기에서 만들었던 표는 다음과 같은 형태로 HTML이 작성되어 있을 수 있습니다.

<table style="width: 850px;">
  ...
</table>

이 경우 본문 화면이 850px보다 좁아지면 표가 잘릴 가능성이 있습니다.

표의 HTML에서 고정 너비를 다음처럼 변경합니다.

<table style="width: 100%;">
  ...
</table>

클래식 편집기에서 수정한다면 표를 선택한 뒤 표 속성(Table Properties) 메뉴를 열어 너비를 변경할 수도 있습니다.

표 속성에서 너비가 800px, 1000px처럼 표시되어 있다면 우선 100%로 변경해 보세요.

다만 표 자체를 100%로 바꿨다고 모든 문제가 해결되는 것은 아닙니다. 각 셀의 너비가 고정되어 있거나 내용이 줄바꿈되지 않으면 여전히 화면 밖으로 나갈 수 있습니다.

표 전체 너비와 셀 속성을 함께 확인합니다.

이 방법은 2~3열 정도의 간단한 표에서 효과적입니다. 반면 열이 5개 이상이거나 내용이 길다면 다음 가로 스크롤 방법을 권장합니다.

방법 2. CSS로 모바일 테이블 가로 스크롤 적용

개인적으로 열이 많은 비교표에는 이 방법을 가장 추천합니다.

표 너비를 억지로 줄이면 글자가 한 글자씩 줄바꿈되거나 숫자와 제품명이 읽기 어려울 정도로 작아질 수 있습니다.

이럴 때는 표를 감싸는 영역만 화면 크기에 맞추고, 표 내용은 그대로 유지하면서 좌우로 밀어 볼 수 있도록 만드는 것이 좋습니다.

먼저 overflow-x:auto라는 CSS 속성을 사용합니다.

다음은 워드프레스, 티스토리, HTML 게시판 등에 적용할 수 있는 기본 예제입니다.

<div style="max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;">

  <table style="width:100%;
    min-width:620px;
    border-collapse:collapse;">

    <thead>
      <tr>
        <th scope="col">제품명</th>
        <th scope="col">CPU</th>
        <th scope="col">메모리</th>
        <th scope="col">가격</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>노트북 A</td>
        <td>Core Ultra 5</td>
        <td>16GB</td>
        <td>110만원</td>
      </tr>
    </tbody>

  </table>
</div>

여기서 중요한 CSS 속성은 세 가지입니다.

• max-width:100% : 바깥쪽 영역을 부모 요소의 너비 이내로 제한합니다.
• overflow-x:auto : 내용이 넓으면 해당 영역 안에서 가로 스크롤을 제공합니다.
• min-width:620px : 테이블의 최소 너비를 유지해 너무 좁아지는 현상을 방지합니다.

다음은 실제로 가로 스크롤이 적용되도록 만든 예시입니다. 스마트폰에서는 표 안쪽을 좌우로 밀어 확인할 수 있습니다.

※ 모바일에서는 표를 좌우로 스크롤해 보세요.

제품명	프로세서	메모리	SSD	가격
노트북 A	Core Ultra 5	16GB	512GB	110만원
노트북 B	Ryzen 7	32GB	1TB	135만원
노트북 C	Core Ultra 7	32GB	1TB	165만원

이 방식의 장점은 표 전체를 무조건 축소하지 않는다는 점입니다. 스마트폰 화면보다 내용이 넓더라도 본문 전체가 아니라 표 내부에서만 스크롤할 수 있습니다.

방법 3. CSS 클래스로 모든 테이블에 재사용하기

표가 많은 블로그를 운영한다면 HTML마다 스타일을 입력하는 것은 상당히 번거롭습니다.

저처럼 여러 워드프레스 사이트에서 제품 비교표와 설정값을 자주 작성한다면 CSS 클래스를 하나 만들어 반복 사용하는 편이 관리하기 좋습니다.

예를 들어 테이블 전용 클래스를 jg-table-scroll로 만들겠습니다.

/* 반응형 테이블 바깥 영역 */
.jg-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 테이블 기본 설정 */
.jg-table-scroll table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  margin: 0;
}

/* 셀 디자인 및 긴 문자열 처리 */
.jg-table-scroll th,
.jg-table-scroll td {
  padding: 10px 12px;
  border: 1px solid #dce3eb;
  overflow-wrap: anywhere;
  white-space: normal;
  vertical-align: middle;
}

/* 제목 셀 */
.jg-table-scroll th {
  background: #eef4fa;
  font-weight: 700;
}

CSS를 저장했다면 실제 HTML에서는 다음과 같이 사용하면 됩니다.

<div class="jg-table-scroll"
     role="region"
     aria-label="제품 비교표"
     tabindex="0">

  <table>
    <thead>
      <tr>
        <th scope="col">항목</th>
        <th scope="col">제품 A</th>
        <th scope="col">제품 B</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>메모리</td>
        <td>16GB</td>
        <td>32GB</td>
      </tr>
    </tbody>
  </table>

</div>

이렇게 하면 매번 표에 긴 CSS를 넣지 않아도 됩니다.

단, 위 설정은 가로 스크롤을 목적으로 최소 너비를 유지하는 예제이므로 열이 적은 표까지 무조건 적용할 필요는 없습니다. 긴 표와 복잡한 비교표에만 선택적으로 적용하는 것이 좋습니다.

워드프레스 CSS 코드는 어디에 입력할까?

앞에서 만든 CSS를 적용할 위치도 확인해야 합니다.

워드프레스는 사용 중인 테마가 클래식 테마인지 블록 테마인지에 따라 CSS를 추가하는 메뉴가 다를 수 있습니다.

클래식 테마에서 CSS 추가

Astra 등 사용자 정의하기 기능을 지원하는 테마라면 일반적으로 다음 경로에서 CSS를 추가할 수 있습니다.

워드프레스 관리자 → 외모 → 사용자 정의하기 → 추가 CSS

앞서 만든 CSS를 붙여넣고 게시하면 됩니다.

블록 테마에서 CSS 추가

사이트 편집기를 사용하는 블록 테마라면 다음 경로를 확인합니다.

외모 → 편집기 → 스타일 → 더 보기 메뉴(⋮) → 추가 CSS

메뉴 위치는 워드프레스 버전에 따라 조금 다를 수 있습니다.

사이트 전체에 CSS를 추가할 때는 관련 없는 테이블까지 영향을 받지 않도록 클래스 이름을 지정해 사용하는 것이 좋습니다.

▶ 워드프레스 공식 문서 - 스타일 및 추가 CSS 설정

구텐베르크 기본 테이블 블록에 바로 적용하려면?

기본 테이블 블록에서 만든 표라면 워드프레스가 일반적으로 wp-block-table 클래스를 포함한 구조를 생성합니다.

이 구조에 맞춰 CSS를 작성하면 됩니다.

/* 구텐베르크 기본 테이블 반응형 */
.wp-block-table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 표 내용 너비 확보 */
.wp-block-table table {
  width: max-content;
  min-width: 100%;
  max-width: none;
  border-collapse: collapse;
}

/* 셀 최소 가독성 유지 */
.wp-block-table th,
.wp-block-table td {
  padding: 10px;
  overflow-wrap: anywhere;
}

이 코드는 기본 테이블 블록 전체에 적용될 수 있으므로 먼저 테스트 글에서 확인하는 것이 좋습니다.

특정 표에만 적용하려면 테이블 블록의 고급 → 추가 CSS 클래스에 별도 클래스명을 넣고 해당 클래스에 맞춰 스타일을 지정할 수 있습니다.

워드프레스 테마나 플러그인에서 이미 스크롤 기능을 제공하는 경우에는 CSS가 중복될 수 있으니 주의하세요.

워드프레스 표 테두리 색상·셀 간격 설정방법

모바일 표 잘림을 해결했다면 이번에는 가독성을 개선할 차례입니다.

워드프레스 표 디자인에서 가장 많이 수정하는 항목은 테두리 색상, 두께, 셀 안쪽 여백, 제목 행의 배경색입니다.

예전 TinyMCE Advanced에서는 표 속성 창에서 직접 설정하기도 했습니다.

테두리·셀 간격·배경색 등 테이블 디자인 설정

CSS에서는 다음 속성을 사용합니다.

CSS 속성	기능	예시
width	표 너비	100%
border	테두리	1px solid #ddd
border-collapse	테두리 합치기	collapse
padding	셀 내부 여백	10px
background	배경색	#eef4fa
overflow-x	가로 스크롤	auto
overflow-wrap	긴 문자열 줄바꿈	anywhere

저는 블로그에 비교표를 넣을 때 제목 행에만 연한 배경색을 주고 나머지 셀은 흰색으로 유지하는 편입니다.

모든 셀을 진한 색상으로 강조하면 오히려 표를 읽기 어려워집니다. 중요한 숫자나 조건만 굵게 표시하는 것이 더 깔끔합니다.

CSS 색상코드를 자세히 알아보고 싶다면 아래 글도 참고해 보세요.

▶ CSS 배경색·글자색 색상코드 정리 HEX/RGB/RGBA와 테마 컬러 관리 팁

HTML 테이블 직접 수정해 표 잘림 해결하기

워드프레스뿐 아니라 티스토리, 라이믹스, XE 게시판 등에서 직접 HTML로 만든 표도 동일한 문제가 발생할 수 있습니다.

예전 글을 수정할 때는 이미 작성된 HTML을 확인하는 것이 가장 빠를 때가 많습니다.

HTML 모드를 열어 <table> 태그를 검색해 보세요.

다음처럼 작성된 경우가 있습니다.

<table width="900">

<table style="width:900px;">

<td style="width:350px;">

이때 표 자체의 너비뿐 아니라 셀 너비도 확인해야 합니다.

간단한 표라면 다음처럼 변경할 수 있습니다.

<table style="width:100%;
  max-width:100%;
  table-layout:fixed;
  border-collapse:collapse;">

  <tr>
    <th style="overflow-wrap:anywhere;">
      항목
    </th>
    <th style="overflow-wrap:anywhere;">
      설명
    </th>
  </tr>

  <tr>
    <td style="overflow-wrap:anywhere;">
      모바일
    </td>
    <td style="overflow-wrap:anywhere;">
      화면 너비에 맞춰 자동 줄바꿈
    </td>
  </tr>

</table>

여기서 table-layout:fixed는 표 너비를 기준으로 열 크기를 배분하는 데 사용할 수 있습니다.

하지만 열이 많으면 셀이 지나치게 좁아지므로 모든 표에 적용하기보다는 2~3열 정도의 간단한 표에 사용하는 것이 좋습니다.

셀 합치기와 병합도 HTML에서 가능

표를 작성하다 보면 가로로 두 칸을 합치거나 세로로 여러 행을 병합해야 할 때가 있습니다.

HTML에서는 colspan과 rowspan을 사용합니다.

<!-- 가로 2칸 병합 -->
<td colspan="2">합쳐진 셀</td>

<!-- 세로 2칸 병합 -->
<td rowspan="2">합쳐진 셀</td>

다만 병합된 표는 모바일에서 자동으로 줄바꿈되거나 세로형 카드로 전환하는 작업이 복잡해질 수 있으므로, 단순한 비교표라면 병합 구조를 최소화하는 편이 관리하기 좋습니다.

셀 병합과 분할을 더 자세히 알아보고 싶다면 기존에 작성한 관련 글을 참고하세요.

▶ 워드프레스 테이블 표 만들기와 셀 병합 · TinyMCE Advanced 활용법

TablePress 플러그인으로 엑셀처럼 표 만들기

표가 몇 개 없는 블로그라면 기본 편집기로 충분하지만, 비교표가 수십 개 이상이라면 TablePress 같은 테이블 전용 플러그인을 고려할 수 있습니다.

특히 제품 사양, 가격 비교, 통계 자료 등 여러 행과 열을 가진 표를 자주 수정해야 한다면 편리합니다.

TablePress는 표 데이터를 별도로 관리할 수 있으며 엑셀이나 CSV 데이터를 가져오는 기능도 제공합니다.

사용 방법은 다음과 같습니다.

1. 워드프레스 관리자에서 플러그인 추가를 실행합니다.
2. TablePress를 검색해 설치하고 활성화합니다.
3. 관리 메뉴에서 TablePress를 실행합니다.
4. 새 표를 만들거나 엑셀·CSV 파일을 가져옵니다.
5. 표 제목과 행·열 데이터를 입력합니다.
6. 테이블 블록 또는 제공되는 숏코드로 본문에 삽입합니다.

TablePress에는 정렬, 검색, 페이지 구분, 가로 스크롤 등의 기능이 제공되며 세부 기능과 사용 가능 범위는 플러그인 요금제에 따라 다릅니다.

기본적인 수평 스크롤 기능은 무료 버전에서도 사용할 수 있지만, 모바일에서 표를 카드처럼 쌓거나 구조를 전환하는 일부 고급 반응형 기능은 유료 모듈에 포함됩니다.

따라서 단순히 표가 잘리는 문제를 해결하려고 유료 기능부터 구매할 필요는 없습니다.

▶ TablePress 공식 홈페이지 - 워드프레스 테이블 플러그인

▶ 엑셀 시트 표 복사 붙여넣기 - 블로그 게시판 안될때

반응형 테이블이 적용되지 않을 때 확인할 것

CSS를 추가했는데도 화면이 그대로라면 단순히 코드가 잘못됐다고 생각하기 전에 다음 항목을 확인해 보세요.

1. 캐시 때문에 예전 CSS가 표시되는 경우

워드프레스 캐시 플러그인이나 CDN을 사용 중이라면 CSS를 수정해도 예전 스타일이 표시될 수 있습니다.

먼저 브라우저를 새로고침하고 워드프레스 캐시 및 CDN 캐시를 확인하세요.

Chrome에서는 Windows 기준 Ctrl + Shift + R로 새로고침해 확인할 수 있습니다.

2. 테마 CSS에서 고정 너비를 강제로 지정한 경우

Astra, GeneratePress, Kadence 등 다양한 워드프레스 테마는 기본적으로 반응형 레이아웃을 지원하지만, 추가 CSS나 플러그인 설정에 따라 표가 깨질 수 있습니다.

이 경우 Chrome에서 F12 → 요소 검사(Elements)를 열어 해당 테이블과 부모 요소에 적용된 CSS를 확인합니다.

특히 width, min-width, max-width, white-space, overflow 속성을 살펴보세요.

3. 테이블이 아니라 부모 컨테이너가 넘치는 경우

표를 스크롤 영역 안에 넣었는데도 페이지 전체가 가로로 움직인다면 표를 감싸는 부모 요소의 너비가 문제일 수 있습니다.

특히 Flexbox나 Grid 안에서 테이블을 사용할 경우 자식 요소의 기본 최소 너비 때문에 화면 밖으로 밀리는 사례가 있습니다.

이때 해당 Flex/Grid 자식 요소에 min-width:0을 적용하면 해결되는 경우가 있습니다.

/* 해당 레이아웃의 자식 요소에만 적용 */
.table-container-parent {
  min-width: 0;
  max-width: 100%;
}

위 클래스는 예시이므로 실제 사이트에서는 표를 감싸는 부모 요소의 클래스에 맞춰 변경해야 합니다.

4. 긴 URL이나 영문 문자열이 줄바꿈되지 않는 경우

테이블 셀에 긴 인터넷 주소나 파일명, 제품 코드가 들어 있으면 줄바꿈할 위치가 부족해 표 너비가 늘어날 수 있습니다.

이때는 다음 속성을 적용해 볼 수 있습니다.

.jg-table-scroll td,
.jg-table-scroll th {
  overflow-wrap: anywhere;
  white-space: normal;
}

단, 긴 문자열의 가독성이 더 중요하거나 열의 크기를 유지해야 한다면 자동 줄바꿈보다 가로 스크롤이 나을 수도 있습니다.

5. 실제 스마트폰 화면에서 확인하기

PC에서 표가 잘 보인다고 작업을 끝내지 말고 모바일 화면에서 직접 확인하는 것이 좋습니다.

1. Chrome에서 수정한 글을 엽니다.
2. F12를 눌러 개발자 도구를 실행합니다.
3. Ctrl + Shift + M으로 기기 화면 모드를 전환합니다.
4. 화면 너비를 320px, 375px, 390px, 768px 등으로 변경합니다.
5. 표 안쪽에서만 가로 스크롤이 생기는지 확인합니다.
6. 실제 스마트폰에서도 동일하게 보이는지 마지막으로 확인합니다.

화면 너비는 사용 중인 기기나 브라우저 설정에 따라 달라질 수 있으므로 여러 크기에서 테스트하는 것이 좋습니다.

워드프레스 표 잘림이 SEO와 구글 검색노출에 미치는 영향

표가 모바일에서 잘리면 검색엔진에서도 불이익을 받는지 궁금할 수 있습니다.

여기서는 잘못 알려진 부분을 구분할 필요가 있습니다.

예전에는 Google Search Console에서 모바일 사용 편의성 보고서를 제공해 화면보다 넓은 콘텐츠나 터치 요소 문제를 확인할 수 있었습니다.

하지만 구글은 2023년 12월 1일부터 모바일 사용 편의성 보고서와 Mobile-Friendly Test 도구를 종료했습니다.

따라서 현재 서치콘솔에서 예전과 동일한 모바일 사용 편의성 점수를 찾거나 표가 잘린다고 반드시 특정 오류가 발생한다고 설명하는 것은 정확하지 않습니다.

그렇다고 모바일 가독성이 중요하지 않다는 뜻은 아닙니다.

구글은 모바일 콘텐츠를 중심으로 색인하는 모바일 우선 색인 방식을 사용하며, 모바일에서도 독자가 본문을 제대로 읽을 수 있도록 만드는 것을 권장합니다.

따라서 표가 조금 잘린다는 이유만으로 검색 순위가 자동으로 떨어지는 것은 아니지만, 사용자 경험과 콘텐츠 접근성 측면에서는 개선하는 편이 좋습니다.

검색노출까지 고려한다면 표를 이미지로 캡처해서 대체하는 것보다 실제 HTML 표를 사용하는 것도 장점이 있습니다.

• 표 안의 내용을 텍스트로 선택하고 복사할 수 있습니다.
• 검색엔진이 HTML 텍스트와 표 구조를 해석할 수 있습니다.
• 모바일에서 스크롤과 줄바꿈 방식을 제어할 수 있습니다.
• 표의 내용만 수정할 때 이미지를 다시 제작하지 않아도 됩니다.
• 접근성을 고려한 헤더와 표 제목을 제공할 수 있습니다.

특히 비교표에는 <th> 헤더와 필요한 경우 <caption>을 사용하는 것이 구조를 명확하게 만드는 데 도움이 됩니다.

▶ 구글 공식 문서 - 모바일 우선 색인 권장사항

워드프레스 표 만들기 자주 묻는 질문

Q. 워드프레스에서 표를 만들려면 플러그인이 반드시 필요한가요?

아닙니다. 구텐베르크 기본 편집기에 테이블 블록이 포함되어 있어 플러그인 없이 표를 만들 수 있습니다. 셀 병합이나 대규모 데이터 관리가 필요할 때 Advanced Editor Tools 또는 TablePress 같은 플러그인을 고려하면 됩니다.

Q. TinyMCE Advanced 플러그인이 검색되지 않는 이유는 무엇인가요?

현재 공식 명칭이 Advanced Editor Tools로 변경됐기 때문입니다. 워드프레스 플러그인 추가 화면에서 Advanced Editor Tools를 검색하면 됩니다. 기존 TinyMCE Advanced와 같은 플러그인입니다.

Q. 테이블 너비를 100%로 바꿔도 모바일에서 잘립니다.

셀에 고정 너비나 최소 너비가 설정되어 있거나 긴 문자열이 줄바꿈되지 않을 수 있습니다. CSS의 width, min-width, white-space 속성을 확인하세요. 열이 많은 경우 overflow-x:auto로 표 내부 가로 스크롤을 적용하는 것이 안정적입니다.

Q. 모바일에서 표가 너무 작게 보이는 문제는 어떻게 해결하나요?

모든 열을 한 화면에 표시하려고 표를 강제로 축소하면 글씨가 지나치게 작아질 수 있습니다. 이런 경우에는 표의 최소 너비를 유지하고 가로 스크롤을 적용해 읽을 수 있는 글자 크기를 확보하는 것이 좋습니다.

Q. 워드프레스 테이블 셀 병합은 어떻게 하나요?

기본 테이블 블록만으로는 엑셀처럼 자유롭게 셀을 병합하기 어렵습니다. HTML에서 colspan과 rowspan을 사용하거나 관련 편집 기능을 제공하는 플러그인을 사용하면 됩니다.

Q. TablePress 무료 버전에서도 모바일 가로 스크롤이 가능한가요?

네. TablePress는 기본적인 수평 스크롤 기능을 지원합니다. 다만 표를 카드형으로 변환하거나 특정 열을 고정하는 등의 고급 기능은 별도 요금제가 필요할 수 있으므로 현재 제공 기능을 확인하는 것이 좋습니다.

Q. 티스토리나 라이믹스 게시판에도 같은 CSS를 적용할 수 있나요?

가능합니다. HTML과 CSS의 기본 원리는 동일합니다. 다만 플랫폼별 본문 구조와 기존 CSS가 다르므로 실제 테이블의 클래스와 상위 컨테이너 구조에 맞춰 적용해야 합니다. 티스토리라면 HTML 모드와 스킨 편집의 CSS 영역을 활용할 수 있습니다.

Q. 모바일 표 짤림이 구글 검색 순위에 직접적인 영향을 주나요?

표가 잘렸다는 이유만으로 반드시 검색 순위가 하락하는 것은 아닙니다. 다만 모바일 가독성과 페이지 이용 경험은 중요하며, 본문 내용을 정상적으로 읽을 수 있도록 반응형으로 개선하는 것이 바람직합니다.

결론 - 표가 짤린다면 너비보다 표시 방식을 먼저 확인하세요

워드프레스에서 표가 모바일 화면 밖으로 나간다면 가장 먼저 고정 너비와 셀 설정을 확인하는 것이 좋습니다.

예전 클래식 편집기로 만든 간단한 표라면 px 값을 100%로 변경하는 것만으로도 해결할 수 있습니다.

하지만 제품 사양이나 가격 비교처럼 열이 많은 표는 가로 스크롤을 적용하는 편이 가독성을 유지하기에 유리합니다.

제가 추천하는 표 관리 방법

• 2~3열 간단한 표 : 기본 테이블 블록 + width:100%
• 4~5열 이상 비교표 : 가로 스크롤 CSS 적용
• 셀 병합이 필요한 표 : HTML 또는 Advanced Editor Tools
• 엑셀·CSV 데이터가 많은 표 : TablePress 활용
• 표가 많은 기존 홈페이지 : 재사용 가능한 CSS 클래스 설정

저라면 무조건 플러그인을 추가하기보다는 먼저 기본 테이블 블록과 CSS로 해결해 볼 것 같습니다.

불필요한 플러그인을 줄이면서도 모바일 가독성을 개선할 수 있고, 이후 테마를 수정하거나 표 디자인을 변경할 때도 관리하기 편하기 때문입니다.

특히 기존에 작성한 글이 많은 워드프레스 사이트라면 모든 표를 한꺼번에 수정하기보다 모바일에서 실제로 문제가 발생하는 글부터 확인하고, 공통 CSS로 해결할 수 있는지 테스트하는 것이 안전합니다.

워드프레스·티스토리 HTML CSS 관련 글

• 워드프레스 테이블 표 만들기와 셀 병합 · TinyMCE Advanced 활용법
• 엑셀 시트 표 복사 붙여넣기 - 블로그 게시판 안될때
• CSS 배경색·글자색 색상코드 정리 HEX/RGB/RGBA와 테마 컬러 관리 팁
• HTML CSS - 텍스트 폰트 정렬 및 크기, 배경색상, 투명도 속성
• 워드프레스 표 만들기 셀 병합 방법｜테이블 블록·TablePress·HTML 반응형 설정 - 노랗IT월드
• 워드프레스 표 잘림 해결과 반응형 테이블 설정 방법 - 노랗IT월드
• 티스토리 워드프레스 엑셀시트 표 복사 붙여넣기 안될때 - 노랗IT월드

공식 참고자료

• WordPress - Table Block Documentation
• WordPress - Styles & Custom CSS
• WordPress - Advanced Editor Tools
• TablePress - 공식 사용설명서
• Google Search Central - 검색과 페이지 경험

※ 본문 일부 이미지는 이전 TinyMCE Advanced 버전에서 촬영한 화면으로 최신 워드프레스와 인터페이스가 다를 수 있습니다. CSS는 테마와 플러그인 환경에 따라 영향을 받으므로 적용 전에 백업하고 모바일 화면에서 확인하는 것을 권장합니다.