반응형
블로그 글에 표를 넣으면 정보를 한눈에 쉽게 전달할 수 있어 방문자 이해도를 높이고 체류 시간을 늘리는 데 효과적입니다. 하지만 HTML 코드를 직접 작성하는 게 어렵게 느껴지는 분들을 위해 쉽고 간편하게 쓸 수 있는 표 HTML 코드 모음을 준비했습니다. 이번 글에서는 다양한 상황에 맞는 표 작성법과 활용 팁을 소개합니다.
1. 기본 표 코드
<table border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th>항목</th>
<th>내용</th>
<th>비고</th>
</tr>
</thead>
<tbody>
<tr>
<td>예시 1</td>
<td>설명 내용</td>
<td>참고사항</td>
</tr>
<tr>
<td>예시 2</td>
<td>설명 내용</td>
<td>참고사항</td>
</tr>
</tbody>
</table>
<thead>
<tr>
<th>항목</th>
<th>내용</th>
<th>비고</th>
</tr>
</thead>
<tbody>
<tr>
<td>예시 1</td>
<td>설명 내용</td>
<td>참고사항</td>
</tr>
<tr>
<td>예시 2</td>
<td>설명 내용</td>
<td>참고사항</td>
</tr>
</tbody>
</table>
- 기본적인 3열 표로, 모든 브라우저와 모바일에서 호환성이 좋습니다.
2. 색상 입힌 표
<table border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse; width: 100%;">
<thead style="background-color: #4CAF50; color: white;">
<tr>
<th>항목</th>
<th>내용</th>
<th>비고</th>
</tr>
</thead>
<tbody>
<tr>
<td>예시 1</td>
<td>설명 내용</td>
<td>참고사항</td>
</tr>
<tr style="background-color: #f2f2f2;">
<td>예시 2</td>
<td>설명 내용</td>
<td>참고사항</td>
</tr>
</tbody>
</table>
<thead style="background-color: #4CAF50; color: white;">
<tr>
<th>항목</th>
<th>내용</th>
<th>비고</th>
</tr>
</thead>
<tbody>
<tr>
<td>예시 1</td>
<td>설명 내용</td>
<td>참고사항</td>
</tr>
<tr style="background-color: #f2f2f2;">
<td>예시 2</td>
<td>설명 내용</td>
<td>참고사항</td>
</tr>
</tbody>
</table>
- 헤더에 색상을 넣어 가독성을 높이고, 줄마다 배경색을 다르게 해 눈에 띄게 합니다.
3. 반응형 표 (모바일 최적화)
<div style="overflow-x:auto;">
<table border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse; width: 100%; min-width: 300px;">
<thead style="background-color: #2196F3; color: white;">
<tr>
<th>항목</th>
<th>내용</th>
<th>비고</th>
</tr>
</thead>
<tbody>
<tr>
<td>예시 1</td>
<td>설명 내용</td>
<td>참고사항</td>
</tr>
<tr>
<td>예시 2</td>
<td>설명 내용</td>
<td>참고사항</td>
</tr>
</tbody>
</table>
</div>
<table border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse; width: 100%; min-width: 300px;">
<thead style="background-color: #2196F3; color: white;">
<tr>
<th>항목</th>
<th>내용</th>
<th>비고</th>
</tr>
</thead>
<tbody>
<tr>
<td>예시 1</td>
<td>설명 내용</td>
<td>참고사항</td>
</tr>
<tr>
<td>예시 2</td>
<td>설명 내용</td>
<td>참고사항</td>
</tr>
</tbody>
</table>
</div>
- 모바일에서 가로 스크롤이 가능해져 좁은 화면에서도 표가 깨지지 않습니다.
4. 요약 및 활용 팁
- 표는 복잡한 내용을 간결하게 정리할 때 매우 유용합니다.
- HTML 표 코드를 복사해 블로그 에디터에 바로 붙여 넣고 내용만 수정하면 쉽게 적용 가능합니다.
- SEO를 위해 표 내부에 중요한 키워드가 포함되도록 작성하고, 표 아래에 간단한 설명을 추가하면 검색 노출에 도움이 됩니다.
본문 요약
블로그 글 속 표는 정보를 명확하게 전달하는 강력한 도구입니다.
위에 소개한 HTML 코드 모음을 활용하면 코딩에 익숙하지 않아도 쉽고 빠르게 표를 삽입할 수 있습니다.
반응형 표로 모바일 최적화도 놓치지 말고, 키워드 포함과 설명 덧붙이기로 SEO 효과도 극대화하세요.
반응형
마치며,
복잡한 데이터를 효과적으로 전달하고 싶다면 표 활용은 필수입니다.
이번에 제공한 HTML 코드 모음으로 블로그 글 속 표 만들기를 간편하게 시작해 보세요.
꾸준한 정보 제공과 함께 방문자의 이해도를 높여 블로그 품질과 애드센스 수익 향상까지 경험할 수 있을 것입니다.
반응형