워드프레스 표 테이블 쉽게 만들기

워드프레스 글쓰기 편집기인 구텐베르크에서 제공하는 표 만들기 블록 TABLE 테이블은 초보자의 입장에서는 다루기 난해합니다.

열과 행을 만드는것까진 문제가 없으나 열과 행의 간격, 표 셀의 병합등 초보자 입장에서는 수행하기 어렵기 때문에 어떤 방법이 있을까 찾아보다가 발견한 웹사이트입니다.

목차(Click)

HTML Table generator이라는 웹사이트의 경로입니다.

해당 웹사이트에서는 자유롭게 셀을 추가하고 병합하고, 셀의 배경 색깔을 자유롭게 바꿀 수 있으며 텍스트의 수평 중앙정렬뿐만 아니라 수직 중앙정렬이 가능하고 표 안에 이미지나 링크를 간편하게 삽입할 수도 있습니다.

아래는 해당 웹사이트에서 실제 표를 만드는 작업을 수행중인 모습입니다.

1) File>New table에서 새로운 테이블을 생성해줍니다.

2) 생성후 원하는 내용을 작성합니다.

셀의 간격은 표의 열과 열 사이에 마우스를 올려두면 간격을 조절할 수 있는 아이콘이 뜨며 행의 간격 혹은 텍스트 작성 중 줄바꿈을 하고 싶다면 엔터를 입력하면 됩니다.

대부분의 기능은 엑셀과 유사하기때문에 이것저것 클릭하다보면 손쉽게 방법을 찾으실 수 있으실겁니다.

3) 셀의 병합 방법

원하는 내용을 작성하고 병합이 필요한 셀이 있다면 해당셀을 드래그하여 선택하고

이미지에 빨간색 네모박스로 표기된 버튼을 누르면 셀이 병합되는걸 확인하실 수 있습니다.

4) 병합 후 셀의 수평/수직 중앙 정렬은 해당 셀을 선택 후 마우스 우클릭으로 Text align으로 실행할 수 있습니다.

1) 자유롭게 행과 열을 추가할 수 있습니다.

마우스 우측클릭 후 Row, Column 기능을 활용하여 자유롭게 셀을 추가 및 삭제할 수 있습니다.

2) 표기된 버튼 기능을 활용해 표에 이미지나 URL을 삽입할 수도 있습니다.

3) 셀의 배경 색도 자유롭게 변경할 수 있습니다.

4) 시인성이 좋은 표 테이블의 테마도 지정할 수 있습니다.

1) 아래 Generate 버튼을 클릭하면 생성되는 HTML 소스를 카피합니다.

2) 워드프레스 글쓰기에서 /HTML을 입력하여 블록을 생성합니다.

3) 복사한 HTML 소스를 입력합니다.

4) 미리보기를 클릭하면 작성된 테이블 표를 확인할 수 있습니다.

Table generator를 사용해보니 단점은 모바일, 테블릿에서 반응형으로 작동하지 않는다는 점 이였습니다.

꼭 반응형으로 표를 제작해야겠다면 TablePress 플러그인을 설치 후 테이블 가져오기 기능을 통해 Table generator에서 작성된 html 코드로 표를 제작하면 됩니다 이때 주의할 점은 CSS는 적용되지 않으니 별도로 CSS를 작성 및 지정해줘야 합니다.

혹은 챗지피티나 그록같은 AI를 통해서 HTML을 반응형으로 변환해서 사용하면 되겠습니다.

이외에도 SEO를 위해 워드프레스 목차를 시인성 좋게 작성하고 싶으시면 아래 버튼을 누르셔서 랭크매스 목차를 심플하고 멋지게 꾸미고 클릭을 통해 접고 펼칠 수 있는 방법을 확인해보세요 🙂