블로그스팟 글을 쓰다가 정보를 깔끔하게 정리하고 싶은데, '표(Table) 만들기' 아이콘이 없어서 당황하신 적 있으신가요?
"티스토리나 네이버처럼 표 만드는 버튼이 어디로 갔지?"
아쉽게도 블로그스팟(Blogger) 기본 에디터에는 클릭 한 번으로 표를 삽입하는 메뉴가 빠져있습니다.
하지만 표준 HTML 코드 한 줄만 제대로 세팅해 두면, 모바일 화면에서도 깨지지 않고 좌우 스크롤이 자동으로 생기는 깔끔한 반응형 표를 손쉽게 만들 수 있습니다.
오늘 글에서는 복사해서 바로 쓰는 반응형 표 기본 HTML 템플릿과 함께 표 작성이 구글 상위 노출(SEO)에 미치는 핵심 이유를 정리해 드리겠습니다.
1. 모바일 반응형 표 기본 HTML 템플릿 코드
스마트폰의 작은 화면에서 표가 우측으로 잘려 보이지 않게 하려면, 좌우 스크롤을 지원하는 overflow-x: auto; 속성이 포함된 반응형 표 코드를 사용하는 것이 필수적입니다.
🚨 반응형 표 코드 사용법 3단계
- 모드 전환: 블로그스팟 글쓰기 화면 좌측 상단의 연필 모양을 눌러 [HTML 보기] 모드로 전환합니다.
- 코드 붙여넣기: 아래 블루 박스 안에 있는 템플릿 코드를 복사해서 표가 들어갈 위치에 붙여넣습니다.
- 내용 수정: 다시 [작성 보기] 모드로 돌아오거나 HTML 모드상에서
구분,내용 1,세부설명 A등의 글자 부분만 원하는 데이터로 수정합니다.
💡 바로 복사해서 쓰는 가속사 반응형 표 기본 코드
<div style="margin: 20px 0px; overflow-x: auto;">
<table style="border-collapse: collapse; font-size: 0.95em; min-width: 500px; text-align: left; width: 100%;">
<thead>
<tr style="background-color: #f7fafc; border-bottom: 2px solid #cbd5e0;">
<th style="border: 1px solid #cbd5e0; padding: 10px; text-align: center;">구분</th>
<th style="border: 1px solid #cbd5e0; padding: 10px; text-align: center;">항목 A</th>
<th style="border: 1px solid #cbd5e0; padding: 10px; text-align: center;">항목 B</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 1px solid #e2e8f0; padding: 10px; text-align: center;">내용 1</td>
<td style="border: 1px solid #e2e8f0; padding: 10px;">세부설명 A</td>
<td style="border: 1px solid #e2e8f0; padding: 10px;">세부설명 B</td>
</tr>
<tr>
<td style="border: 1px solid #e2e8f0; padding: 10px; text-align: center;">내용 2</td>
<td style="border: 1px solid #e2e8f0; padding: 10px;">세부설명 C</td>
<td style="border: 1px solid #e2e8f0; padding: 10px;">세부설명 D</td>
</tr>
</tbody>
</table>
</div>
위 코드를 활용하면 스마트폰 크기가 아무리 작아져도 표가 잘리지 않고 손가락으로 가로 스크롤을 해서 자연스럽게 끝까지 볼 수 있게 됩니다.
.png){kind=link}
 | |
|
.png "블로그스팟 표 만드는 방법") |
※3X4에서 4X4로 변경 할때는 빨간 네모 칸에 내용을 위에서 복사해서 붙여넣고, 세부내용을 수정한 후 추가해줍니다. |
.png "블로그스팟 표 만드는 방법") |
| ※위에서 복사한 코드가 이렇게 밑에 칸들이 추가로 만들어집니다. |
2. 표 작성이 구글 SEO(상위 노출)에 좋은 3가지 이유
텍스트로만 긴 글을 적는 것보다 중간중간 요약표나 비교표를 배치하는 것이 구글 상위 노출에 훨씬 유리합니다.
| 요소 | SEO 영향 | 주요 효과 |
|---|---|---|
| 스니펫 노출 | 구글 최상단 0위 영역에 발췌 노출 | 구글이 표 데이터를 분석해 최상단 '추천 스니펫'으로 뽑아줄 확률 상승 |
| 체류 시간 증가 | 이탈률 방지 및 읽기 편의성 증가 | 복잡한 데이터나 비교 정보를 한눈에 보여주어 독자 만족도 상승 |
| 구글 크롤러 식별 | 데이터 문서로서의 전문성 입증 | <table> 태그를 통해 구조화된 정보를 제공하는 좋은 포스팅으로 인식 |
비교 정보나 가격표, 핵심 내용을 전달할 때는 적극적으로 표를 활용하시는 것을 권장합니다.
❓ 블로그스팟 표 만들기 FAQ
Q1. 모바일에서 표가 화면 밖으로 삐져나오고 잘려 보여요.
표를 감싸는 <div> 태그에 overflow-x: auto; 속성이 빠져있기 때문입니다. 1번 섹션에서 공유해 드린 가속사 반응형 코드를 활용하시면 스마트폰 화면에서도 손으로 좌우 밀어서 보는 깔끔한 표가 완성됩니다.
Q2. 엑셀이나 구글 스프레드시트 표를 바로 복사해서 붙여넣어도 되나요?
엑셀 표를 그대로 복사해서 붙여넣으면 무거운 외부 서식 코드가 함께 들어와 블로그 레이아웃이 지저분해지거나 모바일 반응형이 깨질 수 있습니다. 가급적 본문의 표준 코드를 활용하시는 것을 추천합니다.
🎯 오늘 글의 핵심 요약
- 블로그스팟에서는 반응형 표 HTML 템플릿 코드를 미리 챙겨두면 편리하다.
- 모바일 화면 깨짐을 방지하기 위해
overflow-x: auto;속성을 반드시 사용한다. - 표 구조를 잘 활용하면 구글 최상단 추천 스니펫 노출 및 체류시간 증가에 큰 도움이 된다.
"가독성 높은 표 하나가 독자의 체류 시간을 늘려줍니다. 가속사 여러분 화이팅!"