블로거에서 표, 테이블 어떻게 만드나요? 모바일 반응형 표는요? 알려드립니다.

# 구글 블로거(Blogger)에서 표를 쉽게 만드는 꿀팁, 모바일 반응형 표를 만드는 방법

구글 블로거(Blogger)를 가지고 블로그 글을 작성하다보면, 표를 넣어야 할 경우 난감하게 느끼셨을 겁니다.

구글 블로거(Blogger)는 기본적으로 표 만들기를 지원하지 않습니다.

아래는 블로거(Blogger)에서 새글 쓰기 페이지이고, 상단에 글쓰기 도구들이 보입니다만, 눈 씻고 찾아봐도 표 만들기는 안보입니다. --;;

블로거 글쓰기 메뉴

'엑셀'을 평소에 사용해 본 분들이라면, 혹시나 하는 생각에 '엑셀'에서 표를 만들고 복사해서 붙여 넣으면 되지 않을까? 라는 생각이 드실텐데요.

정답은 불가능하다 입니다.
정확한 표현은 엑셀에서 표를 만들고 복사해서 블로거(blogger)에 붙이면 붙기는 합니다만 이미지로 붙습니다. 이미지는 SEO 관점에서 최악의 결과이죠.

그렇다면 어떻게 해야 할까요?

오늘 포스팅에서는 구글 블로거(blogger) 글을 쓸 때 ①쉽게 표를 만드는 방법과, ② 이 표를 모바일 반응형으로 반드는 방법에 대해서 소개해보도록 하겠습니다.

구글 스프레드 시트를 활용해서 예쁘게 표를 만드세요.
혹시 웹기반의 프로그램이라 불편하시다면, MS '엑셀'을 사용해서 표를 만들고 구글 드라이브에 저장하고 구글 스프레드 시트로 열어서 사용하셔도 됩니다.

보기 좋게 열/행을 모두 변경하는 구조로 하려면 손을 많이 대야 하기 떄문에, "열" 넓이를 반응형으로 바꾸는 방법을 알려드리도록 하겠습니다.

(아래 화면 참고하세요)

그럼 아래와 같이 co width 단어가 있는 부분이 노란색으로 표시되는데요.
Col width는 컬럼 넓이를 의미하며, '열'의 넓이 부분입니다.
아래 보시면, Col width가 '숫자'로 들어가 있기 때문에, 모바일 환경에서 페이지가 작아지더라도 고정형 값이 적용되기 때문에 이 부분을 %(퍼센트) 값으로 변경해줘야 합니다.

위에서 확인한 col width 값을 쭉 적어 총 합계를 계산하고, 각 값이 합계에서 몇%에 해당하는지를 구합니다.
Col width 의 % 값은 모두 합했을 때 100%가 되어야 합니다. 이 정도 계산은 초등학교 수학 수준임으로 자세한 설명은 패스합니다.

table border를 검색하면 해당 라인을 쭉 따라가다 보면, 아래에 노란색 표시를 한 width: 0px 값을 찾을수 있습니다. 여기서 0px를 100%로 수정하면 됩니다.

이미지를 캡쳐하느라 글이 길어지긴 했으나, 앞에 요약을 보시면 아시겠지만 상당히 간단합니다.

구글 블로거(Blogger)에서 표 만들기가 어려웠거나, 모바일 반응형 문제로 고생하셨다면 이번에 한번 수정해 보는건 어떨까요?

☝ 추가로 한가지 다른 방법을 소개해보고자 합니다.

위의 방법이 아닌, 표의 크기와 값을 그대로 두고 가로 횡 스크롤 방식을 적용해보고 싶은 분은 아래 포스팅을 참고하세요.