WP Table Manager: 테이블 스타일링

1. 형식

도구 모음에서 글꼴, 글꼴 크기, 텍스트 스타일, 셀 배경색, 텍스트 색상, 셀 가로 및 세로 정렬 등과 ​​같은 셀 스타일을 설정할 수 있습니다. 이러한 스타일은 단일 셀 또는 여러 셀에 적용할 수 있습니다

표 편집기에서 확대/축소 비율을 선택할 수 있습니다. 즉, 표를 확대/축소할 수 있으며, 범위는 50%에서 200%까지입니다.

행 높이와 열 너비는 픽셀 단위로 정의할 수 있습니다. 메뉴에서 서식 > 열/행 크기 적용을 선택한 다음 열 크기 조정/행 크기 조정을 완료 클릭하여 설정을 완료하세요.

2. 테마 및 옵션

테마 선택 옵션이 나타납니다 . 원하는 테마를 클릭하여 적용하세요.

대체 색상

동일한 메뉴 테마 > 대체 색상 헤더 스타일링 및 푸터 스타일링 통해 표의 테두리 색상을 지정할 수 있습니다 . 플러그인 설정에서 템플릿 스타일을 선택하거나 직접 스타일을 만들 수 있습니다.

"제거 >  자동 스타일링 제거" 선택하면 대체 색상을 제거할 수 있습니다 . 확인을 누르면 색상이 지워집니다.

테이블 정렬

테이블 정렬은 테이블 전체를 포함하는 div를 정렬하는 기능입니다. 예를 들어 테이블 전체를 가운데 정렬할 수 있습니다. [메뉴 서식] > [테이블 정렬] .

셀 강조 표시

셀 강조 표시 기능도 옵션으로 제공됩니다. 설정에서 이 기능을 활성화할 수 있으며, 기본적으로는 비활성화되어 있습니다. 강조 표시할 행을 선택하여 강조 표시 색상과 투명도를 조정할 수 있습니다.

3. 셀에 툴팁 추가

표의 각 셀을 마우스 오른쪽 버튼으로 클릭하면 '도구 설명 추가' 옵션이 표시됩니다.

툴팁 너비를 픽셀 단위로 설정할 수 있습니다. 설정하면 툴팁을 편집할 수 있는 편집기가 나타납니다.

콘텐츠를 추가하고 저장하면 완료됩니다. 마우스 커서를 올리면 툴팁이 공개 페이지에 표시됩니다.

4. 행 및 열 고정

컬럼 동결

열 고정 기능은 메뉴 > 형식 > 반응형 옵션 . 최대 5개 열까지 고정할 수 있으며, 첫 번째 열부터 계산됩니다.

열/행 고정을 하려면 테이블의 높이를 고정할 수 있는 추가 옵션이 있습니다(테이블 컨테이너의 높이가 무한할 수 있기 때문입니다).

고정할 열을 선택하면 테이블을 스크롤할 때 항상 고정된 열이 표시됩니다.

행 동결

메뉴 형식 > 표 머리글 에서 해당 옵션을 활성화하고 최대 5개 행까지 고정할 수 있습니다.

테이블 높이를 설정하려면 반응형 디자인 옵션으로 돌아가세요.

그러면 설정에 따라 프런트엔드에서 첫 번째 행이 고정됩니다.

5. 정렬 및 필터

표를 정렬하거나 필터링하려면 메뉴 형식 > 정렬 및 필터 옵션으로 이동하세요.

그러면 정렬 및 필터 옵션이 포함된 팝업 창이 나타납니다. 

테이블을 정렬하려면 프런트엔드 정렬 옵션을 활성화하기만 하면 됩니다. 기본 정렬에 사용할 열과 정렬 방향을 선택할 수 있습니다.

예를 들어, 이 경우에는 A 열을 오름차순 으로 .

필터 옵션은 두 가지입니다

• 열 내부: 각 열의 헤더에서 데이터를 필터링할 수 있습니다. 토글 버튼을 사용하여 헤더의 검색 필드를 표시하거나 숨길 수 있습니다.

• 고급 필터 양식: 이 옵션을 선택하면 표에서 데이터를 검색하고 필터링할 수 있습니다.

주요 검색: 이 기능을 활성화하면 프런트엔드에 검색 입력 필드가 추가됩니다. 이를 통해 사용자는 테이블의 모든 데이터를 쉽게 검색할 수 있습니다.

6. 셀 패딩 및 테두리 반경

셀의 여백과 테두리 반경을 조정하는 데 도움이 되는 테두리 아이콘은 도구 모음에서 찾을 수 있습니다.

7. 사용자 지정 CSS

한 단계 더 나아가 봅시다. CSS 기술을 갖춘 웹 디자이너라면 메뉴 형식 > 사용자 지정 CSS에서 CSS를 추가할 수 있습니다.

이 CSS 코드는 코드 미러를 사용하여 색상이 지정되었으며, Less CSS로도 작성할 수 있고, 역시 잘 작동합니다!

셀, 행, 열에는 각각을 식별하고 사용자 지정 CSS를 적용할 수 있는 좌표가 있습니다. R은 행, C는 열을 나타냅니다.

8. 반응형 워드프레스 테이블

내 테이블은 반응형 디자인을 채택했거나 작은 화면에서 스크롤 기능을 사용하고 있나요?

숨기기 콜

WP Table Manager 열 숨기기 사용하려면 메뉴 형식 > 반응형 옵션 으로 이동하세요

반응형 모드는 고급 기능으로, 모바일 화면에서 열을 숨기는 우선순위를 지정할 수 있습니다. 열이 숨겨지면 체크박스가 있는 모바일 메뉴가 표시되어 열을 표시/숨기도록 선택할 수 있습니다.
열 크기는 표 편집 시 고정됩니다. 모든 열의 크기가 컨테이너 크기를 초과하면 오버플로우가 발생하며, 모바일 기기에서 스크롤을 통해 쉽게 표시할 수 있습니다.

스크롤 기능이 있는 표 (열 개수가 적을 때 더 적합)

(열이 많은 경우에 더 적합한) 숨겨진 열이 있는 표

반복되는 헤더

사이트의 작은 영역에 표를 삽입하고 싶다면 이 방법도 있습니다. 메뉴 형식 > 반응형 옵션 다음, 반응형 유형 > 반복 헤더를 선택하세요.

고객님의 요구에 맞춰 맞춤 설정할 수 있는 옵션이 제공될 예정입니다

• 반응형 브레이크포인트(px): 테이블이 반응형 모드로 전환되는 시점을 정의할 브레이크포인트 값을 픽셀 단위로 선택하세요.
• 반응형 최대 높이(px): 반응형 모드가 활성화되면 브레이크포인트 값에 따라 테이블이 너무 길어지는 것을 방지하기 위해 최대 높이를 정의합니다.
• 반응형 모드 스타일링: 이 반응형 모드에 기본 스타일을 적용하거나 테이블 색상을 사용합니다.

그 후에는 프런트엔드에서 테이블이 어떻게 보이는지 확인할 수 있습니다.

반복 헤더를 사용 하고 필터 옵션이 활성화된 경우 모바일 보기에서 텍스트 상자에 입력하여 필터링할 수 있습니다.

9. 엑셀로 내보내기

PC에 표를 저장하려면 메뉴에서 [ 표]를 하고 [Excel로 내보내기] 버튼을 클릭하세요 . 그러면 프런트엔드에서 내보내기 후 파일 형식이 *.xlsx로 저장됩니다.

10. 페이지네이션

메뉴 형식 > 페이지네이션 에서 이 기능을 찾을 수 있습니다 . 토글 버튼을 사용하여 기능을 활성화하고 페이지에 표시할 행 수를 선택하세요.

11. 셀 테두리 스타일링

표에 테두리 두께, 테두리 색상, 테두리 스타일과 같은 테두리 유형을 적용할 수 있습니다. 먼저 셀 범위를 선택한 다음 도구 모음에서 아이콘을 클릭합니다.

12. 프런트엔드에 표 출력

인쇄 버튼을 표시하려면 먼저 ' 표' 메뉴 하여 '인쇄' 버튼을 선택 .