워드프레스 테이블(표) 삽입 방법 - 플러그인 설치 X, 최초 1회 설정으로 끝!

블로그 포스팅을 작성하다 보면 정보를 직관적으로 전달하기 위해 테이블, 표를 사용해야 하는 경우가 종종 발생합니다.

테이블을 생성하는 가장 대표적인 방법은 엑셀을 활용하는 것입니다. 하지만 워드프레스 포스팅에 엑셀 표를 붙여 넣으면, 표는 사라지고 표의 내용만 텍스트로 적용됩니다.

워드프레스에서도 테이블 추가, 편집 기능을 제공하지만, 사용법이 다소 복잡합니다.

이번 포스팅에서는 구글 스프레드시트를 활용해서 테이블을 손쉽게 삽입하는 방법과, 한 번의 CSS 코드 설정을 통해 블로그의 모든 테이블에 동일한 서식을 일괄 적용하는 방법을 안내하겠습니다.

워드프레스 테이블 삽입 방법 (구글 스프레드시트)

엑셀과 기능적, 디자인적 측면에서 매우 유사한 구글 스프레드시트에서 생성한 테이블을 워드프레스로 붙여 넣으면 테이블의 틀이 유지됩니다.

아래는 동일한 표를 엑셀과 구글 스프레드시트에서 워드프레스로 붙여 넣은 결과입니다.

붙여 넣을 테이블 샘플

엑셀 -> 워드프레스

A B C 가 나 다

구글 스프레드시트 -> 워드프레스

엑셀에서 붙여 넣은 경우 표 없이 콘텐츠만 적용된 반면, 구글 스프레드시트에서 붙여 넣은 경우 테이블 형태가 유지되었습니다.

다만, 구글 스프레드시트에서 붙여 넣는 경우에도 글꼴, 색상 등의 서식은 적용되지 않는 것을 확인할 수 있습니다.

워드프레스 테이블 서식 적용 (CSS)

지금부터 워드프레스 테이블에 서식을 입히기 위해 CSS 코드를 활용하는 방법을 안내하겠습니다.

CSS 코드는 관리자 페이지의 외모 -> 사용자 정의하기 -> 추가 CSS 메뉴에서 적용할 수 있습니다.

CSS 코드를 통해 테이블 서식을 지정하면, 내 블로그에 있는 모든 테이블에 동일한 서식을 적용할 수 있습니다. CSS 코드를 수정하면, 수정된 서식이 모든 워드프레스 테이블에 동일하게 변경 적용됩니다.

CSS 코드 샘플(워드프레스 테이블 서식)

지금 보고 계시는 블로그에 적용된 CSS 코드를 공유드립니다.

간략한 설명을 추가해두었으니, 입맛에 맞게 수정하여 사용하시면 됩니다. 참고로 한글 설명을 함께 적용해도 문제없이 잘 작동합니다.

/* 테이블 전체 스타일 */
.wp-block-table table {
    border-collapse: collapse; /* 테두리 겹침 설정 */
    text-align: center; /* 가운데 정렬 */
}

/* 첫 번째 행 스타일 */
.wp-block-table tbody tr:first-child td {
    background-color: #3d85c6; /* 배경색 파란색 */
    color: white; /* 글자 색상 흰색 */
}

/* 셀 테두리 스타일 */
.wp-block-table tbody tr td {
    border: 1px solid #e1e1e1; /* 테두리 1px 회색 */
    font-size: 0.9em; /* 글꼴 크기 0.9em */
}

아래는 구글 스프레드시트에서 붙여 넣은 테이블의 CSS 코드 적용 후 모습입니다.

HTML 컬러 코드

CSS 코드에 적용한 색상은 White, Blue와 같은 영어 단어를 사용할 수도 있지만, HTML 컬러 코드를 활용하면 더욱 다양한 색상을 활용할 수 있습니다.

HTML 컬러 코드는 #32A18B와 같이 #뒤에 6자리 문자+숫자가 붙는 형태이며, 색상별 컬러 코드는 여기에서 확인하실 수 있습니다.

CSS 코드 생성, 수정 (챗GPT)

CSS 코드를 만들어서 공유하는 저는 CSS에 대한 이해도가 얼마나 높을까요?

저는 워드프레스 블로그를 운영하기 전에는 CSS라는 용어를 들어본 적도 없으며, 현재는 CSS를 학습하고 싶은 마음은 있지만, 아직 시작하지 못했습니다.

그럼 위에 공유한 코드는 어떻게 생성했을까요? 위 코드는 오로지 챗GPT로만 작성한 코드입니다.

챗GPT로 만든 코드는 한 번에 원하는 대로 작동하는 경우가 드물어 수정 작업이 필요한 경우가 많습니다. 또한, 완성된 코드를 고수가 봤을 때는 지저분해 보일 수도 있습니다.

그럼 어떤가요? 챗GPT에 물어가며 수정하면 되고, 잘 작동하기만 하면 되는걸요.

CSS에 대한 지식이 있다면 챗GPT를 훨씬 효율적으로 활용할 수 있겠지만, 저처럼 지식이 전혀 없어도 코드를 만들어 적용할 수 있는 부분을 말씀드리고 싶었습니다.

챗GPT로 간단한 코딩을 하는 방법에 대해서 설명한 포스팅이 있으니 참조하셔서, 꼭 한 번 어떤 코드든 직접 만들어 보실 것을 권합니다.

지금까지 구글 스프레드시트와 CSS 코드를 활용하여 워드프레스 테이블을 붙여 넣고, 테이블의 서식을 일괄 적용하는 방법을 알아보았습니다.

테이블과 검색엔진 최적화(SEO)

테이블을 활용하면 검색엔진 최적화(SEO)에 도움이 되는 것으로 알려져 있습니다.

검색 엔진은 검색어와 관련성이 높은 웹 페이지를 보다 상위에 노출하려고 노력합니다.

테이블과 같은 구조화된 데이터를 포함한 웹 페이지는 검색 엔진에게 정보를 더 명확하게 제공하므로, 검색 엔진이 해당 페이지를 더 높은 순위에 노출하는 데 좋은 영향을 줄 수 있습니다.

또한, 테이블을 사용하여 주요 정보를 시각적으로 정리하면, 방문자들이 콘텐츠를 더 쉽고 명확하게 이해할 수 있습니다.

효과적인 테이블 활용은, 콘텐츠 가독성을 향상시키고 블로그 방문자의 체류 시간을 늘리는 데 도움을 주어, SEO에 긍정적인 영향을 미칩니다.

아래는 네이버에서 미드저니 가격이라는 키워드를 검색한 결과입니다. 최상단에 노출된 포스팅의 본문 내용 중 플랜별 가격을 정리한 테이블이 스니펫(미리보기)로 표시되는 것을 확인할 수 있습니다.

독자분들께서도 테이블을 적절히 활용하여 콘텐츠의 가독성도 높이고, 검색엔진 최적화(SEO)에도 긍정적인 영향을 미치시길 바라며, 이번 포스팅을 마무리하겠습니다.

워드프레스 테이블(표) 삽입 방법 – 플러그인 설치 X, 최초 1회 설정으로 끝!