지난 글에서 링크(A 태그)를 통해 블로그를 거미줄처럼 엮는 법을 배웠죠? 이제 독자들은 여러분의 블로그 안에서 더 오래 머물 준비가 되었습니다. 하지만 정보를 전달할 때 글만 적으면 자칫 지루해질 수 있습니다.
[왜 표를 써야 할까요?]
여러분이 노트북 추천 글을 쓴다고 상상해 보세요. 글로만 "A 노트북은 가격이 100만 원이고 무게는 1kg이며 배터리는 10시간 가요. 반면 B 노트북은..." 이렇게 적으면 읽기 힘들겠죠?
이걸 표로 만들면 독자는 단 1초 만에 두 노트북의 차이를 비교할 수 있습니다. 구글 검색 로봇 또한 표 데이터를 매우 좋아합니다. 정보가 잘 정리된 문서라고 판단하여 '스니펫(검색 결과 상단에 요약 정보가 나오는 것)'에 노출될 확률이 확 올라가거든요!
[표의 3대 핵심 태그]
표를 만드는 것은 건물을 짓는 것과 비슷합니다. 규칙만 알면 정말 쉬워요.
<table>: "이제부터 표를 그릴 거야!"라고 선언하는 전체 틀입니다.<tr>(Table Row): 표의 '가로 한 줄'입니다.<th>(Table Header): 표의 '제목 칸'입니다. 보통 굵고 가운데 정렬됩니다.<td>(Table Data): 표의 '일반 데이터 칸'입니다.
구조를 쉽게 그려보자면 이렇습니다: <table> 안에 <tr>들이 있고, 그 <tr> 안에 <th>나 <td>가 들어가는 방식입니다.
[실전 연습: 메모장에 표 만들기]
아래 코드를 복사해서 메모장에 넣어보세요.
<table border="1">
<tr>
<th>상품명</th>
<th>가격</th>
<th>특징</th>
</tr>
<tr>
<td>노트북 A</td>
<td>100만원</td>
<td>가벼움</td>
</tr>
<tr>
<td>노트북 B</td>
<td>120만원</td>
<td>고성능</td>
</tr>
</table>(참고: border="1"은 표의 테두리를 보여달라는 간단한 설정입니다.) 저장하고 브라우저로 열어보면, 깔끔하게 정리된 표가 나타날 겁니다!
[표 만들 때 꼭 지켜야 할 3가지]
- 제목 행(
<th>)을 잘 활용하세요: 표의 첫 줄에는 반드시<th>를 써서 여기가 무엇을 나타내는 칸인지 명확히 해주세요. 로봇이 내용을 이해하는 핵심 단서가 됩니다. - 데이터는 간결하게: 표 안에 너무 긴 문장을 넣지 마세요. 핵심 키워드나 수치 위주로 넣어야 가독성이 좋습니다.
- 반응형 고려하기: 표는 스마트폰에서 볼 때 가로로 길어지면 화면 밖으로 잘려 나갈 수 있습니다. 처음엔 간단하게 표를 만들고, 아래에서 알려드릴 반응형 코드를 적용하면 모바일에서도 예쁘게 보이게 만들 수 있으니 너무 걱정 마세요!
[표가 스마트폰에서 깨질 때 — 실제 해결법]
.table-wrap {
overflow-x: auto; /* 화면보다 표가 넓으면 좌우 스크롤 생성 */
}<div class="table-wrap">
<table border="1">
...
</table>
</div>표를 <div class="table-wrap">로 감싸고 위 CSS 한 줄만 추가하면, 표가 화면 밖으로 잘리는 대신 좌우로 스크롤됩니다. 별도 프로그램 설치 없이 블로그스팟 테마 편집 → CSS 부분에 붙여넣기만 하면 적용됩니다.
[셀 합치기: rowspan과 colspan]
<tr>
<td colspan="2">2칸 합치기</td>
</tr>가격표에서 "무료배송" 항목처럼 여러 칸을 하나로 합쳐야 할 때 씁니다. colspan은 가로로, rowspan은 세로로 합칩니다.
[초보자가 자주 하는 실수 3가지]
<tr>닫는 태그를 빼먹어서 표 전체가 깨지는 경우- 첫 줄에
<th>대신<td>를 써서 접근성(스크린리더)이 나빠지는 경우 - 표를 레이아웃(디자인 배치)용으로 남용하는 경우 — 요즘은 표 대신 flex/grid를 씁니다
저도 처음엔 표 태그가 너무 복잡해 보여서 피하곤 했습니다. 하지만 표를 쓰기 시작한 뒤로 독자들이 글에 머무는 시간이 눈에 띄게 늘었습니다. 복잡한 줄글보다 잘 정리된 표를 훨씬 편하게 받아들이기 때문입니다.
핵심 요약
<table>은 표의 전체 틀,<tr>은 가로 줄,<th>는 제목 칸,<td>는 데이터 칸입니다.- 표는 데이터를 비교 분석할 때 독자와 검색 로봇 모두에게 최고의 가독성을 제공합니다.
- 복잡한 정보를 한눈에 보여주어 독자의 체류 시간을 늘리고 블로그 지수를 높여줍니다.
- 화면이 좁은 모바일에서는
overflow-x: auto로 감싸주면 표가 깨지지 않습니다. - 너무 큰 표보다는 핵심만 짚어주는 작고 깔끔한 표가 훨씬 효과적입니다.
다음은 블로그 레이아웃의 기본이자, 나중에는 디자인의 핵심이 될 [구역 나누기: Div와 Span 태그]를 배워보겠습니다. 이제 웹사이트다운 모습을 갖추기 위한 첫걸음입니다!
여러분의 블로그에 어떤 표를 넣으면 독자들이 가장 좋아할 것 같나요? 비교하고 싶은 정보가 있다면 무엇인가요?