HTML 표 마크다운 변환 시 첫 칸이 사라지는 이유
위키백과나 공공데이터 포털의 표, 엑셀에서 내보낸 HTML 표를 그대로 복사해 마크다운으로 바꿔본 적이 있다면 결과가 이상하게 나오는 경우를 본 적이 있을 수 있습니다.
각 행 맨 앞 칸—보통 항목 이름이 들어가는 자리—이 통째로 비거나, 나머지 칸 값이 한 칸씩 밀려서 마지막 칸만 빈칸으로 나오는 경우입니다.
원본 HTML 표 코드는 멀쩡해 보이고 오타도 없는데 변환 결과만 어긋나 원인을 찾기 쉽지 않습니다. 이 현상은 변환이 잘못된 것이 아니라, 표 코드 안에 있는 태그 하나 때문에 생기는 확인 가능한 원인이 있습니다.
요약 ① 이 변환기는 표의 첫 번째 줄만 제목 행으로 읽고, 그 아래 모든 줄에서는
<td>태그만 값으로 셉니다. ② 본문 행 맨 앞 칸이<th scope="row">로 쓰여 있으면 그 칸은 값으로 세지지 않고 통째로 건너뜁니다. ③ 건너뛴 자리는 줄 맨 앞이 아니라 맨 뒤에 빈 칸으로 채워지므로, 나머지 값이 전부 한 칸씩 밀린 것처럼 보입니다.
문제: 표를 그대로 옮겼는데 첫 칸이 사라진다
위키백과의 국가별 통계표나 공공기관 비교표처럼 접근성을 고려해 만든 표는 각 행 맨 앞 칸에 <td> 대신 <th scope="row">를 씁니다. 스크린리더가 그 칸을 해당 행의 제목으로 먼저 읽어주기 위한 표기법입니다.
화면에는 보통 살짝 굵은 글씨 정도로만 보여서 일반 칸과 눈으로 구별되지 않습니다. 그래서 표를 복사할 때는 그 칸이 <td>인지 <th>인지 확인하지 않고 코드를 그대로 붙여넣게 됩니다.
원인: 변환기가 제목 행과 본문 행을 다르게 읽습니다
이 변환기는 표의 첫 번째 줄(<tr>)에서는 <th>와 <td>를 구분하지 않고 전부 제목 행 칸으로 읽습니다. 반면 그 아래 모든 줄에서는 <td> 태그만 값으로 읽고, <th>는 아예 세지 않습니다.
그래서 본문 행 맨 앞에 <th scope="row">가 있으면 그 칸의 글자는 결과에 나타나지 않습니다. 모자란 칸은 줄 맨 앞이 아니라 맨 뒤에 빈 칸으로 채워지기 때문에, 남은 값들이 전부 한 칸씩 왼쪽으로 당겨진 것처럼 보입니다.
해결: 붙여넣기 전에 원본 코드에서 th 위치를 확인합니다
표를 옮기기 전에 표 위에서 마우스 오른쪽 버튼을 누르고 '검사(Inspect)'를 선택하면 개발자 도구에 그 <table> 코드가 열립니다. 첫 번째 <tr> 아래 다른 줄들 안에 <th로 시작하는 태그가 있는지 찾아봅니다.
있다면 붙여넣기 전에 그 <th ...>와 닫는 </th>만 <td>, </td>로 바꿔주면 됩니다. 안의 글자는 그대로 두고 태그 이름만 바꾸는 정도라 표 전체를 다시 만들 필요는 없습니다.
저희 도구로 확인하기. 태그를 손으로 찾아 바꾸는 대신, 표 코드를 그대로 붙여넣고 변환 결과에서 각 행의 칸 수가 제목 행과 같은지, 맨 앞 칸이 비어 있지 않은지부터 확인해도 됩니다.
무료 · 가입 불필요 · HTML table 코드를 그대로 붙여넣으면 마크다운 표로 즉시 변환
자주 막히는 지점
| 상황 | 실제로 일어나는 일 |
|---|---|
본문 행 맨 앞 칸이 <th scope="row">로 표시됨 | 그 칸 글자가 결과에서 사라지고, 나머지 값이 한 칸씩 당겨집니다 |
rowspan으로 이어져 그 줄엔 칸 자체가 없음 | 같은 이유로 맨 뒤가 빈 칸으로 채워져 밀려 보입니다 |
| 칸 안에 파이프 기호가 포함됨 | 자동으로 이스케이프 처리되어 표 구분선과 겹치지 않습니다 |
| 표에 제목 행 없이 데이터부터 시작함 | 첫 번째 줄이 그대로 제목 행으로 쓰여 데이터 한 줄이 제목으로 잘못 들어갑니다 |
정리
- 이 변환기는 표의 첫 번째 줄만 제목 행으로 읽고, 그 아래 모든 줄에서는
<td>태그만 값으로 셉니다. - 본문 행 맨 앞 칸이
<th scope="row">로 쓰여 있으면 그 칸은 사라지고, 나머지 값이 한 칸씩 밀려 보입니다. rowspan으로 생략된 칸도 같은 방식으로 뒤 칸이 밀립니다.- 붙여넣기 전에 개발자 도구로 원본 코드에서
<th위치를 확인하고<td>로 바꾸면 방지할 수 있습니다. - 변환 후에는 각 행의 칸 수가 제목 행과 같은지 확인하는 습관이 안전합니다.
무료 · 가입 불필요 · HTML table 코드를 그대로 붙여넣으면 마크다운 표로 즉시 변환
자주 묻는 질문
표를 복사했는데 원본에 th가 있는지 어떻게 확인하나요?
표가 있는 페이지에서 표 위에 마우스 오른쪽 버튼을 누르고 '검사(Inspect)'를 선택하면 개발자 도구에 해당 <table> 코드가 열립니다. 그 코드 안에서 두 번째 <tr>부터 <th로 시작하는 태그가 있는지 찾아보면 됩니다.
엑셀이나 구글 시트에서 내보낸 표도 같은 문제가 있나요?
엑셀이나 구글 시트를 '웹페이지로 저장'해 내보낸 표는 대부분 모든 칸을 <td>로만 씁니다. <th>가 본문 행에 섞여 나오는 경우는 주로 위키백과나 공공기관 통계표처럼 접근성을 고려해 손으로 마크업한 표에서 많이 나타납니다.
colspan·rowspan으로 병합된 칸도 이 도구가 나눠서 복원해 주나요?
아닙니다. 병합된 칸은 글자만 한 칸에 들어가고, 나머지 칸은 자동으로 채워지거나 잘립니다. 마크다운 표 문법은 셀 병합을 표현하지 못하므로, 원본에서 미리 병합을 풀어 붙여넣어야 합니다.