구글 블로그에 표(테이블) 만드는 법과 디자인 변경

이전부터 여러 번 썼던 말인데, 구글 블로그의 에디터는 구식이다.

블로그에 포스팅을 하다 보면 본문에 테이블(표)을 삽입해야 할 일이 가끔 있는데, 보통 다른 블로그는 에디터에 표를 만드는 기능이 있지만 구글 블로그의 에디터는 표를 만드는 기능도 없다.

그래서 이것도 직접 HTML 코드를 입력해야 한다.

이름	포지션	소속
신해철	Vocal	넥스트
신대철	Guitar	시나위
이승환	Vocal	드림팩토리
이태윤	Bass	위대한 탄생

이와 같은 표를 만들 거다. (참고로 이 표는 데스크톱 환경과 모바일 환경에서 서로 완전히 다른 디자인을 하고 있다.)

코드는 다음과 같다.

<div class="post-table">
    <table>
        <thead>
            <tr>
                <th>이름</th>
                <th>포지션</th>
                <th>소속</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td data-label="이름">신해철</td>
                <td data-label="포지션">Vocal</td>
                <td data-label="소속">넥스트</td>
            </tr>
            <tr>
                <td data-label="이름">신대철</td>
                <td data-label="포지션">Guitar</td>
                <td data-label="소속">시나위</td>
            </tr>
            <tr>
                <td data-label="이름">이승환</td>
                <td data-label="포지션">Vocal</td>
                <td data-label="소속">드림팩토리</td>
            </tr>
            <tr>
                <td data-label="이름">이태윤</td>
                <td data-label="포지션">Bass</td>
                <td data-label="소속">위대한 탄생</td>
            </tr>
        </tbody>
    </table>
</div>

이 코드에서 중요한 부분은 가장 상위 태그인 <div> 태그에 class="post-table" 속성이 있다는 것이다.

현재 이 블로그에서 사용 중인 Amalia 템플릿의 경우에는 이 post-table 클래스에 표의 모양을 잡아주는 CSS 코드들이 들어가 있다.

구글 블로그 관리 페이지에서 '테마' > 'HTML 편집'으로 이동한다.

그리고 [ctrl + F] 키를 눌러서 post-table을 검색해 보면 테이블의 디자인과 관련된 CSS 코드들이 보일 것이다.

혹시 디자인을 바꾸고 싶은 부분이 있다면 여기서 바꾸면 된다.

참고로 나는 파란색 네모로 표시해둔 부분을 다음과 같이 수정했다.

.post-table th{
    background-color:#E7F6F2; /* 수정 */
    font-weight:bold
}

테이블 헤드 부분의 배경색을 블로그 배경과 같은 색으로 쓰기로 했다.

참고로 이 부분의 CSS 코드에서는 이전에 설정해뒀던 색상 변수를 사용할 수가 없다.

색상 변수에 대해서 정리한 포스트를 못보신 분들은 아래에 링크한 포스트를 확인하시길~!

구글 블로그 템플릿의 색상을 변경해 보자.

내 블로그를 원하는 색상으로 커스터마이징하고 싶다면 이 글을 보세요. 초보자를 위한 쉬운 컬러 변경부터, HTML 편집을 통해 CSS 변수를 활용하는 고급 방법까지 모두 담았습니다.

.post-table table{
    border-collapse:collapse;
    width:100%;
    font-size: 0.875rem; /* 추가 */
    margin:10px 0; /* 추가 */
}

이 부분에도 코드를 추가하자.

테이블 내에서 적용될 글자 크기를 지정하고, 테이블의 위아래에 여백을 줬다.

참고로 위의 박스 형태의 링크를 만드는 것도 구글 블로그에서는 그냥 만들어지는 것이 아니다.

이 링크도 꽤 노가다를 해서 직접 코드를 입력하고 만들어야 한다. (이 링크 박스를 만드는 방법도 포스팅했었다.)

그런데 테이블(표)을 만드는 것도 이렇게 쉽지가 않다니.. 😓

그나마 다행인 건 포스팅을 하면서 테이블을 만들 일이 (나에게는) 그렇게 많지 않다는 것이다.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.