엑셀 표를 웹사이트/블로그에 붙여넣는 가장 쉬운 방법 (HTML 변환)

엑셀로 만든 가격표나 제품 목록, 데이터 테이블을 내 웹사이트나 블로그에 그대로 보여주고 싶을 때가 있습니다. 하지만 엑셀 표를 그대로 복사해서 붙여넣으면 서식이 모두 깨지고 엉망이 되기 일쑤입니다. 그렇다고 수십, 수백 개의 행과 열을 <table>, <tr>, <td> 태그를 써가며 직접 코딩하는 것은 끔찍한 일이죠.

이 글에서는 엑셀 표를 웹사이트에 올리는 가장 쉽고 전문적인 방법을 소개합니다. 단 한 번의 변환으로 깨끗한 HTML 코드를 얻고, 이 표를 모바일에서도 멋지게 보이는 반응형으로 만드는 팁까지 한 번에 알려드립니다.

목표: 엑셀 표를 HTML `<table>` 코드로 바꾸기

웹사이트는 표 형태의 데이터를 보여주기 위해 HTML <table> 태그를 사용합니다. 예를 들어, 아래와 같은 간단한 표는,

이름	이메일
홍길동	gildong@test.com

이러한 HTML 구조로 이루어져 있습니다.

<table>
  <tr>
    <td>이름</td>
    <td>이메일</td>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>gildong@test.com</td>
  </tr>
</table>

데이터가 많아질수록 이 코드를 직접 작성하는 것은 시간 낭비이며, 태그를 하나라도 빠뜨리면 표 전체가 깨질 수 있습니다.

즉각적인 해결책: 온라인 엑셀 → HTML 변환기

이 지루한 과정을 단번에 해결해주는 것이 바로 온라인 변환기입니다. XLSX-Tool의 변환기는 엑셀 파일을 업로드하는 즉시, 웹사이트에 바로 사용할 수 있는 깨끗하고 의미있는(Semantic) HTML 코드를 생성해 줍니다.

➡️ XLSX to HTML 변환기 바로가기

엑셀 데이터를 웹사이트에 바로 붙여넣을 수 있는 깨끗한 HTML 테이블로 변환하세요.

변환기 사용법 (3단계)

엑셀 파일 업로드: 위 링크 페이지에서 HTML로 변환할 엑셀 파일을 선택합니다.
HTML 코드 생성: 파일이 업로드되면, 변환기가 첫 번째 시트의 데이터를 읽어 즉시 HTML 코드를 생성하여 화면에 보여줍니다.
복사하여 붙여넣기: ‘HTML 복사’ 버튼을 눌러 코드를 클립보드에 복사한 뒤, 여러분의 웹사이트나 블로그의 HTML 편집기 창에 그대로 붙여넣으면 끝입니다.

※ 엑셀의 ‘웹 페이지로 저장’ 기능, 왜 쓰면 안될까?

“엑셀에도 HTML로 저장하는 기능이 있지 않나요?” 라고 생각하실 수 있습니다. 네, 엑셀의 파일 > 다른 이름으로 저장 > 웹 페이지(*.htm, *.html) 기능이 존재합니다.

하지만 이 기능은 웹사이트에 표를 ‘삽입’하는 용도로는 절대 사용해서는 안 됩니다. 엑셀이 생성하는 HTML 코드는 수천 줄에 달하는 불필요한 스타일 정보와 독자적인 태그로 가득 차 있어, 웹사이트의 기존 디자인과 충돌하고 페이지를 매우 느리게 만듭니다.

반면, 온라인 변환기는 오직 데이터 구조(<table>, <thead>, <tbody>, <tr>, <th>, <td>)만 담백하게 추출하기 때문에, 웹사이트에 깔끔하게 통합하고 CSS로 자유롭게 디자인하기에 최적입니다.

전문가 팁: 모바일에서 깨지지 않는 ‘반응형 테이블’ 만들기

온라인 변환기로 얻은 깨끗한 HTML 테이블이 있다면, 이제 간단한 CSS 코드 한 줄만으로 모바일에서도 완벽하게 보이도록 만들 수 있습니다. 표가 화면보다 클 경우, 좌우로 스크롤해서 볼 수 있게 하는 가장 실용적인 방법입니다.

웹사이트 편집기에서, 복사한 <table>...</table> 코드 전체를 <div> 태그로 감싸줍니다.

<div class="table-container">
  <!-- 여기에 변환기에서 복사한 table 코드를 붙여넣으세요 -->
  <table>
    ...
  </table>
</div>

웹사이트의 CSS 편집 파일에 아래 코드를 추가합니다. (WordPress 사용자라면 ‘사용자 정의 > 추가 CSS’에 넣으면 됩니다.)
```
.table-container {
  overflow-x: auto; /* 내용이 넘칠 경우 가로 스크롤바 생성 */
  width: 100%;
}
```

이제 스마트폰처럼 작은 화면에서 표를 볼 때, 좌우가 잘리지 않고 부드럽게 스크롤하여 모든 데이터를 확인할 수 있습니다.

결론: ‘변환’과 ‘스타일링’을 분리하는 것이 핵심

웹사이트에 엑셀 표를 올리는 가장 전문적인 방법은 다음과 같습니다.

온라인 변환기를 사용해 엑셀 데이터로부터 깨끗한 HTML 구조를 얻는다.
웹사이트의 CSS를 이용해 HTML 표의 디자인과 반응형 동작을 제어한다.