티스토리 표 모바일 최적화(스크롤로 넘겨보기)

표의 내용이 몇 줄 안되고 내용이 적다면 티스토리 표 기능을 이용해 만들면 되지만 표의 내용이 많을 경우 직접 만드려면 너무 노가다다.

이때 엑셀을 이용해서 간단히 표를 만들어서 티스토리에 붙여넣기를 해 주면 된다.

아래 내용을 보면서 어떤 문제가 생기는지 알아보자.

먼저 아래는 엑셀에서 만든 표를 그대로 티스토리에 복사 후 붙여넣기 한 결과이다.

결과물을 보면 표의 테두리가 없는 것을 확인 할 수 있을 것이다.

엑셀에서 바로 티스토리에 복사 후 붙여넣기를 하면 안된다.

경상북도	울릉군	울릉읍	독도리
인천광역시	옹진군	백령면	백령도
제주특별자치도	서귀포시	대정읍	마라도

그럼 이번에는 엑셀 → 워드 → 티스토리의 과정으로 가운데 워드를 한 번 거쳐보자.

아래는 엑셀의 표 내용을 복사 후 워드에 붙여넣기 한 뒤 워드에서 다시 복사를 해 티스토리에 붙여넣기 한 결과물이다.

최종적으로 표가 이쁘게 잘 만들어진 것을 확인 할 수 있다.

경상북도	울릉군	울릉읍	독도리
인천광역시	옹진군	백령면	백령도
제주특별자치도	서귀포시	대정읍	마라도

 

그런데 여기서 문제가 하나 발생을 한다.

아래 표와 같이 표의 간격이 넓으면 뒷부분은 짤려서 보이지 않는다.

경상북도	울릉군	울릉읍	독도리
인천광역시	옹진군	백령면	백령도
제주특별자치도	서귀포시	대정읍	마라도

 

이 때 아래의 스크롤 기능을 이용해서 표를 좌우로 이동시키게 만들 수 있다.

먼저 아래의 소스를 메모장 등의 복사를 하자.

<div style="width:100%; overflow:auto">   
     여기에 붙여넣기
    <table class="txc-table" style="." width="100%" cellspacing="0" cellpadding="0" border="0"></table>
</div>

엑셀 - 워드 - 티스토리에 아래와 같이 표를 복사했다.

우측 상단에 있는 HTML을 체크해 주면 아래와 같은 소스들의 내용을 볼 수 있다.

여기의 소스들을 Ctrl + A(전체선택)을 한 뒤 Ctrl+ C(복사)를 하고 조금전에 메모장에 만들어준 소스의 여기에붙여넣기을 지우고 Ctrl+ V(붙여넣기)를 눌러 아래 소스를 붙여넣기 하자.

메모장의 작업을 끝났으므로 다시 티스토리로 이동해 HTML 모드에서 메모장의 내용을 복사한 뒤 붙여넣기 하면 끝이다.
그럼 최종적으로 화면상에 보여지는 표는 아래와 같지만 표를 좌우로 이동시켜보면 움직이는 것을 확인 할 수 있다.

경상북도	울릉군	울릉읍	독도리
인천광역시	옹진군	백령면	백령도
제주특별자치도	서귀포시	대정읍	마라도