HTML 표 기초 — table 태그와 엑셀에서 옮기는 법

블로그 글에 비교표를 넣고 싶은데 에디터 표 기능은 답답하고, HTML 모드는 태그가 무섭습니다. 사실 HTML 표는 태그 네 개로 끝나는 단순한 구조입니다. 구조와 함정, 그리고 손으로 안 치는 법까지 정리합니다.

구조 — 태그 네 개면 충분

<table>
  <tr><th>메뉴</th><th>가격</th></tr>
  <tr><td>아메리카노</td><td>4,500</td></tr>
  <tr><td>라떼</td><td>5,000</td></tr>
</table>

• table — 표 전체의 틀
• tr(row) — 한 줄
• th(header) — 제목 칸 / td(data) — 데이터 칸
• 기억법: "줄(tr)을 쌓고, 줄 안에 칸(th·td)을 채운다." 셀 병합이 필요할 때만 colspan·rowspan을 더합니다.

th와 td — 의미의 구분

• th는 "이 칸은 머리글"이라는 의미를 담습니다 — 굵게 보이는 건 부수 효과일 뿐입니다.
• 화면 낭독기는 th를 기준으로 "가격 열의 4,500"처럼 표를 읽어 줍니다 — 접근성의 기본입니다.
• 검색엔진도 th로 표의 구조를 이해합니다. 모든 칸을 td로 만들고 CSS로 굵게 꾸미면 보기엔 같아도 의미가 사라집니다.

자주 하는 실수

• 닫는 태그 누락 — </td> 하나가 빠지면 그 뒤 칸들이 밀립니다. 표가 이상하면 닫는 태그부터 세어 보세요.
• 칸 수 불일치 — 줄마다 칸 수가 다르면 레이아웃이 어긋납니다. 빈 칸도 <td></td>로 자리를 지켜야 합니다.
• 표를 레이아웃 용도로 — 표는 데이터용입니다. 페이지 배치는 CSS의 영역입니다.
• 모바일 폭 초과 — 칸이 많은 표는 좁은 화면에서 넘칩니다. 표를 감싸는 요소에 overflow-x:auto를 주면 가로 스크롤로 해결됩니다.

엑셀에서 한 번에 옮기기

1. 엑셀·구글 시트에서 표 범위를 복사합니다.
2. 표 변환기에 붙여 넣고 출력 형식을 HTML로 고릅니다 — 첫 줄의 머리글(th) 처리 여부도 선택합니다.
3. 생성된 table 코드를 복사해 블로그 HTML 모드·웹페이지에 붙여 넣습니다.
4. 칸이 많을수록 손으로 치는 것보다 빠르고, 닫는 태그 누락 같은 실수가 없습니다.