EPUB 표 만들기, 깨지지 않는 Table 구조 & 스타일

전자책 EPUB을 만들다 보면 꼭 등장하는 게 표(table) 입니다.

책에서는 단순한 일정표부터, 데이터 정리용 표까지 다양하게 사용됩니다. 문제는 표가 epub 뷰어에서 잘 깨진다는 점입니다.

 

이번 글에서는 EPUB에서 안정적으로 표를 넣는 방법을 HTML 구조 → CSS 스타일링 → 뷰어 호환 팁 순서로 정리합니다.

 

1. 기본 표 구조(HTML)

표를 만들 땐 가장 기본적인 <table>태그만 쓰는 게 안전합니다.

html

<table>
   <thead>
       <tr>
          <th>챕터</th>
          <th>주제</th>
          <th>페이지</th>
       </tr>
     </thead>
   <tbody>
       <tr>
          <td>1</td>
          <td>epub 소개</td>
          <td>5</td>
       </tr>
         <tr>
          <td>2</td> 
          <td>시길(sigil) 기초</td>
          <td>12</td>
       </tr>
     </tbody>
</table>

👉TIP

<thead> / <tbody>를 나눠주면 뷰어 호환성이 좋아집니다.

<caption> 태그를 쓰면 표 제목을 추가할 수 있습니다.

 

 

2. CSS로 표 스타일 다듬기

기본 표는 투박하기 때문에 CSS로 가독성을 높여야 합니다.

css

table {
  width: 100%
  border-collapse: collapse; /* 테두리 겹침 방지 */
  margin: 1em 0;
  font-size: 0.95rem;
}

th, td {
  border: 1px solid #ccc;
  padding: .5em;
  text-align: left;
}

th {
  background: #f5f5f5;
  font-weight: bold;
}

👉 TIP

border-collape: collapse; 를 쓰면 표 테두리가 두 줄로 겹치지 않습니다.

width: 100% 를 넣으면 기기 화면 크기에 맞춰 늘어나서 안정적입니다.

 

 

3. 뷰어별 호환성 문제

전자책 뷰어는 웹 브라우저만큼 CSS를 완벽히 지원하지 않습니다.

✅ 안전한 속성 : border, padding, text-align, background

🛑 위험한 속성 : rth-child, flex, grid → 일부 뷰어에서 깨짐

✅ 해결책 : 표는 최대한 단순하게, 기본 속성 위주로만 스타일링

 

 

4. 긴 표를 다룰 때

EPUB에서 표가 화면을 넘어가면 스크롤이 생기지 않습니다.

→ 따라서 긴 표는 여러 개로 나누어 배치하거나, 이미지 표로 대체하는 것이 안전합니다.

 

👉 권장 방법:

- 텍스트 표 = 짧고 단순할 때

- 이미지 표 = 디자인이 복잡하거나 컬러 강조가 많을 때

 

 

5. 실제 EPUB 제작 팁

- Sigil : 표 삽입은 직접 HTML 코드 붙여넣기가 가장 확실합니다.

- 뷰어 테스트 필수 : 리디북스 / Kindle Previewer / Google Play Books에서 반드시 확인.

- 모바일 최적화 : 작은 화면에서 글자가 겹치지 않는지 체크하세요.

 

✨ 정리 

- 표는 <table> + <thead> + <tbody> 기본 구조만 사용

- CSS는 단순하게 : border, padding, text-align 위주

- 긴 표는 잘라 쓰거나 이미지로 대체

- 모든 뷰어에서 깨지지 않으려면 "단순함"이 정답

 

---

👉 지난 글 : HTML 기본 태그 & 문단 구조

EPUB에서 꼭 알아야 할 HTML 기본 태그 & 문단 구조