WP Table Manager: 테이블 스타일링

1. 형식

툴바에서 셀의 스타일을 설정할 수 있습니다. 예를 들어 글꼴, 글꼴 크기, 텍스트 스타일, 셀 배경색, 텍스트 색상, 셀 가로 및 세로 정렬 등이 있습니다. 단일 셀이나 여러 셀에 적용할 수 있습니다.

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

행 높이와 열 너비는 픽셀 단위로 정의할 수 있습니다. 메뉴 서식 > 열/줄 크기 적용 다음, 열 크기 조정/행 크기 완료 클릭하여 완료합니다.

2. 테마 및 옵션

테마 메뉴 테마 선택 옵션을 찾으실 수 있습니다 테마를 클릭하시면 적용됩니다.

대체 색상

같은 메뉴 테마 > 대체 색상 머리글 및 바닥글 스타일 사용하여 표의 선 색상을 지정할 수 있습니다 . 템플릿 스타일을 선택하거나 플러그인 설정에서 직접 만들 수 있습니다.

"제거 >  자동 스타일 제거" 을 클릭하면 대체 색상을 제거할 수 있습니다 . 확인 후 색상이 지워집니다.

테이블 정렬

표 정렬은 표 전체를 포함하는 div를 정렬하는 기능입니다. 예를 들어 표 전체를 가운데 정렬하는 것과 같습니다. 메뉴 서식 > 표 정렬 .

셀 강조

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

3. 셀에 도구 설명 추가

표의 각 셀을 마우스 오른쪽 버튼으로 클릭하면 도구 설명 추가 옵션을 볼 수 있습니다.

툴팁 너비를 픽셀 단위로 설정할 수 있습니다. 툴팁을 편집할 수 있는 편집기가 있는 툴팁으로 이동합니다.

내용을 추가하고 저장하면 완료됩니다. 마우스를 올리면 툴팁이 공개 측에 표시됩니다.

4. 행 및 열 고정

컬럼 동결

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

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

고정할 열을 선택하면 표를 스크롤하여 항상 고정된 열을 표시할 수 있습니다.

행 동결

메뉴 형식 > 표 머리글 에서 찾을 수 있으며 , 여기서 옵션을 켜고 행을 고정할 수 있습니다(최대 5행).

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

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

5. 정렬 및 필터

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

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

표를 정렬하려면 프런트엔드 정렬 옵션을 활성화하세요. 기본 정렬 기준이 될 열과 정렬 방향을 선택할 수 있습니다.

예를 들어, 이 경우 ASC 으로 열 A를 .

필터에는 2가지 옵션이 있습니다.

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

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

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

6. 셀 패딩 및 테두리 반경

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

7. 사용자 정의 CSS

한 단계 더 나아가 보겠습니다. CSS에 능숙한 웹 디자이너라면 메뉴 서식 > 사용자 정의 CSS에서 CSS를 추가할 수 있습니다.

CSS 코드는 코드 미러를 사용하여 색칠되었으며, Less CSS로 작성할 수도 있습니다. 역시 작동합니다!

셀, 줄, 열에는 각각을 식별하고 사용자 정의 CSS를 적용하는 좌표가 있습니다. R은 행, C는 열입니다.

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

내 테이블은 반응형인가요? 아니면 작은 기기에서 스크롤을 사용하나요?

열 숨기기

WP Table Manager 우선순위 도구를 사용하여 반응형 디자인을 처리합니다. 기본적으로 반응형 기능은 비활성화되어 있으며, 오버플로가 발생합니다(모바일에서는 잘 작동합니다). " 열 숨기기" 메뉴 형식 > 반응형 옵션 으로 이동해야 합니다

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

스크롤이 있는 테이블(열 수가 적은 경우에 더 좋음)

열이 숨겨진 테이블(열이 많은 경우에 더 좋음)

반복되는 헤더

사이트의 작은 영역에 표를 삽입하려는 경우 사용할 수 있는 또 다른 옵션입니다. 메뉴 형식 > 반응형 옵션 다음 , 반응형 유형 > 반복 헤더를 선택하세요.

귀하의 요구에 따라 사용자 정의할 수 있는 옵션이 제공됩니다.

• 반응형 중단점(px): 테이블이 이 반응형 모드로 전환되는 시점을 정의하기 위해 픽셀 단위로 중단점 값을 선택합니다.
• 반응형 최대 높이(px): 반응형 모드가 활성화되면 중단점 값에 따라 매우 긴 테이블이 생성되는 것을 방지하기 위해 최대 높이를 정의합니다.
• 반응형 모드 스타일링: 이 반응형 모드에 기본 스타일링을 적용하거나 표 색상을 사용하세요.

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

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

9. Excel로 내보내기

PC에 표를 저장하려면 메뉴 '표' 하여 'Excel 내보내기' 버튼을 클릭하세요 . 프런트엔드에서 내보낸 후 파일 형식은 *.xlsx로 지정됩니다.

10. 페이지 매김

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

11. 셀 테두리 스타일

표에 테두리 너비, 테두리 색, 테두리 스타일 등 테두리 유형을 적용할 수 있습니다. 먼저 셀 범위를 선택한 다음 도구 모음에서 아이콘을 클릭하세요.

12. 프런트엔드에서 테이블 인쇄

인쇄 버튼을 표시하려면 먼저 메뉴 표로 인쇄 버튼을 체크해야