티스토리에서 테이블 그릴 때 넓이 오류 해결법

티스토리 블로그에서 테이블을 작성할 때

대부분 상단의 테이블 버튼을 눌러서 테이블 작성을 하시지요~??

 

 

 

저는 얼마전에 '화장품 사용기한과 유통기한 바로알기'를 포스팅할 때 블로그에서 테이블을 처음 썼는데요

테이블을 가운데로 보내는 버튼도 없고,

무엇보다도

 

 

모바일에서는 테이블이 화면에 맞춰서 축소가 되지 않는 치명적인 문제가 있더라구요!!!

 

그나마 모바일 웹은 옆으로 스크롤이 되는데

티스토리 앱에서는 옆으로 스크롤도 안되니... 이거 원.....

 

 

그나마 저는 코딩을 좀 할 줄 알아서 제 포스팅의 테이블을 발견하고 바로 고쳤지만,

해결법을 몰라 당황하는 분들이 많을 것 같더라구요....

 

 

그래서 정말 쉽게!

코딩의 'ㅋ'자도 몰라도 테이블을 모바일에서도 이상 없이 볼 수 있는 완전 기본적인 방법을 알려드릴까 합니다

 

 

 

우선, 글 작성 하는 페이지에서 테이블 작성을 다 하신다음에

우측 상단에 있는

 

을 클릭하여 html 소스가 뜨도록 합니다

 

 

여기서 테이블이 작성된 부분을 찾아야 하는데요~

테이블은 'table'이라 찾기 쉬우실 거에요~~

 

 

위 코드는

 

 

이 5행3열 짜리 테이블의 코드랍니다!

 

 

테이블은 html에서

 

------------------

 

<TABLE 쏼라쏼라>

...

내용

...

</TABLE>

 

------------------

 

이렇게 작성되는데요

 

 

저기 저 쏼라쏼라 부분에서

'width'라는 단어를 찾아내면 됩니다!

 

 

그리고 이렇게 width="50%"처럼,

width(넓이)를 고정된 값이 아닌 %로 작성을 해주시면 화면의 전체 넓이 대비 비율로 테이블 넓이가 적용 됩니다!

 

 

예를들어

wkdth="50%"로 작성을 하면

 

 

이렇게 테이블의 넓이가 전체 넓이의 50%가 되구요

 

 

width="100%"로 작성을 하면

 

 

이렇게 테이블의 넓이가 전체 넓이의 100%를 차지하게 됩니다 :-)

 

이렇게 비율로 테이블을 작성하게되면 모바일에서도 전체 화면 넓이 대비 비율로 테이블이 나오기 때문에

테이블이 화면 밖으로 나가게 되는 일은 없답니다!!

 

 

하지만, 테이블을 항상 왼쪽에 붙여놓진 않겠지요??

여기서 테이블을

 

 

이렇게 가운데에 오게하는 방법만 더 알려드리고 마치도록 하겠습니다 ;-)

 

 

캡쳐가 잘 안보이지요...?

 

------------------

 

<TABLE 쏼라쏼라 align=center>

...

내용

...

</TABLE>

 

------------------

 

아까 그 테이블 시작하는 부분에서 쏼라쏼라 있는거 그대로 두고 마지막에

 

align=center

 

만 추가로 넣어주세요!

그러면 위 캡쳐처럼 테이블이 화면의 가운데에 위치하게 된답니다!

 

 

저는 '화장품 사용기한과 유통기한 바로알기' 포스팅에서

align은 설정하지 않고, width="100%"로 설정했었는데요.

그렇게하면,

 

1. pc

 

 

2. mobile

 

 

이렇게 어디서든 표가 잘리지 않고 잘 나오는 결과를 얻을 수 있답니다!!

 

 

티스토리 블로그가 규모가 작은 서비스도 아니구...

많은 분들이 이용하는 블로그 서비스인 만큼 이런 세세한 부분이 좀 더 친절했으면 좋았을텐데

조금 아쉽네요 ㅜㅜ

 

그래도 방법이 정~말 쉬우니까

혹시 그동안 테이블이 이상해서 쓰지 못하셨던 분들도

이제 마음껏 테이블 작성 하시길 바래요!