WordPress 테이블 블록을 사용하는 방법

WordPress 테이블 블록을 사용하면 게시물이나 페이지에 대한 테이블을 만들 수 있습니다. 이것은 표로 작성된 데이터를 표시하는 데 유용합니다. 사용하기 쉽고 웹사이트 디자인에 맞게 스타일을 지정할 수 있습니다.

이 기사에서는 테이블 블록을 자세히 살펴보겠습니다. 게시물 및 페이지에 추가하는 방법, 설정 및 옵션, 모범 사례, 자주 묻는 질문에 대해 알아보겠습니다.

게시물 또는 페이지에 테이블 블록을 추가하는 방법

블록을 추가할 블록 삽입기를 클릭하고 테이블을 검색합니다. 테이블 블록이 나타나면 클릭하여 콘텐츠에 추가합니다. 또는 화면 왼쪽 상단에 있는 삽입기를 사용하거나 /table 을 입력하고 Enter 키를 누를 수 있습니다.

이렇게 하면 열과 행의 수를 지정할 수 있는 테이블 블록이 추가됩니다. 테이블에 대해 원하는 열과 행 수를 입력하고 테이블 생성을 클릭합니다.

셀에 내용을 추가하고 맨 아래에 캡션을 추가할 수 있는 화면에 표가 나타납니다. 기본 스타일은 사용 중인 WordPress 테마에 따라 다릅니다. 제 예제에는 Twenty Twenty-One WordPress 테마를 사용하고 있습니다.

테이블 블록 설정 및 옵션

설정과 옵션을 살펴보겠습니다.

테이블 블록 도구 모음

테이블을 클릭하면 테이블 블록 도구 모음이 테이블 위에 나타납니다.

블록 유형 또는 스타일 변경

이를 통해 그룹에 표를 추가하고 레이아웃의 열 수(표 열 아님)를 설정하고 표에 대해 원하는 스타일을 선택할 수 있습니다. 스타일에는 두 가지 옵션이 있습니다. 기본 스타일은 배경이 단색인 반면 Stripes는 모든 선에 회색 줄무늬를 추가합니다. 옵션 위로 마우스를 가져가면 미리보기가 제공됩니다.

정렬 변경

표를 왼쪽, 가운데, 오른쪽, 넓은 너비 또는 전체 너비로 설정합니다. 와이드 너비 및 전체 너비는 모든 테마에서 지원되지 않습니다. 이 예에서는 넓은 너비로 설정했습니다.

열 정렬

각 열에 대한 맞춤을 개별적으로 선택합니다. 왼쪽, 가운데 또는 오른쪽 정렬로 설정합니다. 이 예에서는 왼쪽 열을 오른쪽으로 설정하고 나머지는 가운데로 설정했습니다.

굵게 및 기울임꼴

굵게 및 기울임꼴 설정은 강조 표시한 텍스트를 조정합니다. 표 또는 캡션 내의 모든 텍스트는 굵게, 기울임꼴 또는 둘 다로 만들 수 있습니다. 모든 셀을 개별적으로 선택해야 합니다.

링크

표 또는 캡션에 있는 모든 항목에 대한 링크를 추가합니다. 이 예의 캡션과 시계 이름에 대한 링크를 추가했습니다. URL을 입력하면 웹사이트에서 이전에 사용한 URL을 검색하여 제안으로 제공합니다.

추가 테이블 옵션

그러면 여러 옵션이 있는 드롭다운 상자가 열립니다. 다음 각 옵션이 위의 이미지에 추가됩니다.

인라인 코드 – 코드 스타일의 텍스트를 표시합니다.

인라인 이미지 – 커서 위치에 인라인으로 배치할 이미지를 선택할 수 있는 미디어 라이브러리를 엽니다. 이미지를 선택하여 너비를 변경할 수 있습니다.

키보드 입력 – 콘텐츠에 키보드 태그를 추가하여 키보드 입력을 정의합니다. 브라우저의 기본 고정 폭 글꼴로 표시됩니다.

취소선 – 강조 표시한 텍스트를 통해 선을 배치합니다.

아래 첨자 – 강조 표시한 텍스트를 아래 첨자로 만듭니다.

위 첨자 – 강조 표시한 텍스트를 위 첨자로 만듭니다.

텍스트 색상 – 강조 표시한 텍스트의 색상을 변경할 수 있습니다. 미리 만들어진 색상 중에서 선택하거나 색상 선택 도구를 사용하여 색상을 선택하거나 값을 16진수 또는 RBG 코드로 입력할 수 있습니다.

표 편집

테이블 편집 옵션은 행과 열을 삽입하거나 삭제할 수 있는 드롭다운 상자를 엽니다. 선택한 행이나 열의 앞이나 뒤에 추가합니다. 이렇게 하면 언제든지 테이블 크기를 쉽게 변경할 수 있습니다. 이 예제에서는 둘 다 추가했습니다.

차단 옵션

테이블 블록 옵션 버튼은 선택할 수 있는 더 많은 옵션이 있는 드롭다운 상자를 엽니다. 테이블 옵션에는 다음이 포함됩니다.

추가 설정 숨기기 - 이 옵션은 오른쪽 사이드바를 숨겨 작업 공간을 더 깔끔하게 만듭니다.

복사 – 테이블 블록을 클립보드에 복사합니다. 그런 다음 해당 페이지나 게시물 내에서 원하는 곳에 붙여넣을 수 있습니다.

복제 – 테이블 아래에 테이블 블록의 복제본을 생성합니다.

앞에 삽입 – 테이블 블록 앞에 블록에 대한 공백을 삽입합니다.

뒤에 삽입 – 테이블 블록 뒤에 블록에 공백을 삽입합니다.

Move To – 블록 편집기 내에 파란색 선을 배치합니다. 화살표 키를 사용하여 줄을 위 또는 아래로 이동할 수 있습니다. 테이블 블록을 이동하려는 위치에 파란색 선이 표시되면 Enter 키를 누르고 블록이 자동으로 새 위치로 이동합니다.

HTML로 편집 – 이 옵션은 콘텐츠를 HTML로 사용할 수 있도록 코드 편집기로 변경됩니다.

재사용 가능한 블록에 추가 – 이 옵션은 테이블 블록을 재사용 가능한 블록에 추가하므로 모든 페이지나 게시물에서 다시 사용할 수 있습니다.

그룹 – 모든 블록을 함께 조정할 수 있도록 그룹을 만듭니다.

블록 제거 – 이 옵션은 테이블 블록을 삭제합니다.

테이블 블록 설정

테이블 블록 설정은 오른쪽 사이드바에 다른 설정과 함께 배치됩니다. 사이드바가 열려 있지 않으면 오른쪽 상단 모서리에 있는 톱니바퀴 아이콘을 클릭한 다음 테이블 블록의 아무 곳이나 클릭하여 설정을 표시합니다. 아이콘과 간단한 설명이 있는 테이블 이라는 단어가 표시됩니다. 스타일, 색상, 표 설정 및 고급 옵션도 표시됩니다. 각 제목을 클릭하여 설정을 엽니다.

스타일

테이블 블록 스타일을 사용하면 줄무늬가 없는 테이블이나 줄무늬 테이블 중에서 선택할 수 있습니다. 두 스타일 아래의 드롭다운 상자에서 기본 스타일을 설정하거나 설정하지 않은 상태로 둘 수도 있습니다. 스타일은 미리보기를 제공합니다.

색상

색상을 사용하여 테이블 블록의 텍스트, 격자 및 배경 색상을 제어할 수 있습니다. 미리 선택된 여러 색상 중에서 선택하거나 색상 선택기에서 사용자 정의 색상을 선택하십시오.

텍스트와 그리드의 경우 하나를 선택합니다. 배경의 경우 단색을 선택하거나 그라디언트를 만듭니다. 텍스트와 배경색 모두 16진수 또는 RGB 코드를 입력할 수 있습니다. 배경 그라데이션은 선형 또는 방사형일 수 있습니다. 선형에는 방향을 제어할 수 있는 설정이 포함되어 있습니다.

위의 예에서 텍스트와 격자에 흰색을 선택하고 방사형 그래디언트에 몇 가지 파란색 음영을 선택했습니다.

줄무늬 스타일을 선택한 경우 배경색은 배경의 줄무늬 색상을 제어합니다. 줄무늬는 단색 또는 그라데이션 배경이 될 수 있습니다.

테이블 설정

테이블 설정은 켜거나 끌 수 있는 옵션을 제공합니다. 설정에는 다음이 포함됩니다.

고정 너비 – 셀을 같은 크기로 만들어 테이블이 일관되게 보입니다. 셀이 콘텐츠의 크기에 적응하여 다른 크기로 바뀌는 것을 방지합니다.

헤더 섹션 – 굵은 텍스트로 맨 위에 행을 추가합니다. 굵은 선으로 다른 셀과 구분됩니다. 이들은 분리되어 열의 레이블로 작동합니다.

바닥글 섹션 – 바닥글로 작동하는 행을 테이블 하단에 추가합니다. 굵은 선으로 다른 셀과 구분되지만 기본적으로 텍스트는 굵게 표시되지 않습니다. 이것은 정보를 요약하거나, 총계를 제공하거나, 큰 표의 제목을 반복하는 데 유용합니다.

고급의

고급 테이블 블록 설정에는 HTML 앵커에 대한 옵션과 추가 CSS 클래스를 추가하는 필드가 포함됩니다. 앵커는 특수 URL로 작동하므로 테이블 블록에 직접 연결할 수 있습니다. CSS 클래스 필드를 사용하면 사용자 정의 CSS 클래스를 추가하여 블록의 스타일을 지정할 수 있습니다. 기본적으로 스타일 설정에서 선택한 스타일에 대한 클래스가 있습니다.

테이블 블록을 효과적으로 사용하기 위한 팁 및 모범 사례

표로 작성된 데이터나 콘텐츠를 표시해야 할 때마다 표 블록을 사용하십시오. 열을 만드는 데 사용하지 마십시오. Columns Block이 이에 가장 적합합니다.

단락 블록이 있는 테이블의 제목을 추가합니다.

헤더를 추가하여 행의 제목을 만듭니다. 이해하기 쉬운 명확한 레이블을 사용하십시오.

고정 너비를 사용하여 테이블을 보다 세련되고 전문적으로 보이게 합니다.

가독성을 높이려면 큰 테이블의 경우 줄무늬를 선택하십시오.

바닥글을 사용하여 정보를 요약하거나 표가 큰 경우 제목을 다시 표시합니다.

테이블 블록에 대해 자주 묻는 질문

테이블 블록의 가장 좋은 용도는 무엇입니까?

이 블록은 표와 차트를 만드는 데 유용합니다.

테이블 블록을 사용하여 열을 생성할 수 있습니까?

예, 하지만 열을 충분히 제어할 수는 없습니다. 이를 위해 Column Block을 사용하는 것이 가장 좋습니다.

나중에 테이블 크기를 변경할 수 있습니까?

예. 테이블의 옵션을 사용하여 행이나 열을 삽입하거나 삭제합니다.

결론

이것이 WordPress 테이블 블록에 대한 우리의 모습입니다. 이것은 기본 테이블을 만들기 위한 훌륭한 블록이며 웹사이트에 맞게 어느 정도 스타일을 지정할 수도 있습니다. 이 블록은 블록 편집기의 장점 중 하나입니다. 이 블록으로 생성된 테이블은 간단하지만 훌륭하게 작동하고 구축하기 쉽습니다.

우리는 당신의 의견을 듣고 싶습니다. WordPress 콘텐츠에서 Table Block을 사용합니까? 의견에 귀하의 경험에 대해 알려주십시오.

Seahorse Vector / Shutterstock.com을 통한 추천 이미지