WordPress 에서 데이터 테이블을 구축한다는 것은 일반적으로 HTML 과 싸우거나 스타일을 지정할 수없는 단축 코드를 붙여 넣는 것을 의미합니다. The 동적 테이블 위젯 인 Elementor용 마스터 애드온 시각적으로 하나를 빌드할 수 있습니다: 헤더 열을 추가하고 행을 채우고 Elementor 패널에서 모든 부분을 스타일링합니다. 테이블 마크업 없음,플러그인 잠금 없음.
직원 디렉토리,스펙 시트,일정표, 가격표와 같이 그리드에 속하는 모든 것에 적합합니다. 셀을 병합하고,헤더에 아이콘을 추가하고,행에 줄무늬를 표시하고,전화기의 반응형 모드를 켤 수 있습니다. 아래는 헤더 셀에서 스타일링 탭까지 모든 설정을 통한 실행입니다.
동적 테이블 위젯이 수행하는 작업 #
위젯은 두 개의 리피터에서 표준 HTML 테이블을 구축합니다: 하나는 헤더 행에 대해,하나는 본문 셀에 대해 각각 셀은 자체 항목이므로 코드를 작성하지 않고도 텍스트,정렬 및 열 또는 행 범위까지 제어할 수 있습니다.
여기에는 세 개의 탭이 있습니다: 헤더,본문 및 설정에 대한 내용,색상 및 간격에 대한 스타일,일반적인 Elementor 옵션에 대한 고급. 그 결과 테마와 일치하는 깔끔하고 반응이 빠른 테이블이 탄생했습니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
- 표시하려는 데이터는 열과 행으로 스케치됩니다.
동적 테이블 위젯을 추가하는 방법 #
Elementor 편집기에서 을 엽니다 요소 패널 및 검색 동적 테이블또는 마스터 애드온 섹션으로 스크롤합니다. 페이지로 드래그하십시오. 샘플 테이블로 로드되므로 빈 그리드 대신 작업 레이아웃에서 편집할 수 있습니다.
테이블 헤더 설정하기 #
열다 콘텐츠 탭. 그만큼 테이블 헤드 섹션은 헤더 행을 보유합니다. The 테이블 헤드 토글은 헤더를 표시하거나 숨깁니다 테이블 헤더 셀 중계기는 열당 하나의 항목을 보유합니다.
각 헤더 셀에는 자체 콘텐츠 및 옵션 하위 탭이 있습니다. In 콘텐츠 당신은 설정합니다 열 이름 그리고 다음을 추가할 수 있습니다 아이콘 그 옆 (없음 또는 아이콘, 아이콘 라이브러리 또는 업로드된 SVG에서). 사용 항목 추가 열을 추가하려면 복사 아이콘을 복제하고 X를 제거하세요.
테이블 본문을 채웁니다 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 테이블 본문 섹션은 셀을 보유합니다. 각 항목은 하나의 셀이고,a 새로운 행? 새 행이 시작되는 위치를 토글 표시하므로 순서대로 셀을 추가하고 각 행의 시작 부분에 플래그를 지정합니다.
각 본문 셀에는 콘텐츠 및 옵션 하위 탭도 있습니다:
- 본문 텍스트: AI로 쓰기 옵션이 포함된 셀 콘텐츠입니다.
- 열 범위 및 행 범위: 열이나 행에 걸쳐 셀을 병합합니다.
- 사용자 정의 너비: 해당 열에 대해 고정된 너비를 설정합니다.
- 정렬: 셀 내에서 왼쪽, 중앙, 오른쪽 또는 정당화.
- 장식: 미리 설정된 스타일을 적용하여 셀을 돋보이게 합니다.
테이블을 키우려면 을 클릭합니다 항목 추가를 입력하고 셀 텍스트를 입력한 후 켭니다 새로운 행? 각각의 새로운 라인의 첫 번째 셀에. 여기에 다섯 번째 직원 행이 추가되고 있습니다.
테이블을 반응적으로 만드십시오 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 설정 섹션에는 다음이 있습니다 반응형 테이블? 토글. 켜져 있으면 테이블이 넘치지 않고 작은 화면에서 리플로우되므로 각 행은 휴대폰에서 읽을 수 있는 카드로 쌓입니다. 사람들이 잊어버리는 설정이며 모바일에서 테이블이 깨진 것처럼 보이는 이유입니다.
테이블을 스타일링합니다 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 스타일 탭이 분할됩니다 글로벌 스타일, 테이블 헤더 스타일, 그리고 테이블 본문, 게다가 패턴 (프로 옵션). 그만큼 글로벌 스타일 섹션은 테이블 전체의 모양을 설정합니다.
- 줄무늬 테이블: 얼룩말 줄무늬를 켜고 줄무늬 행 색상을 선택합니다.
- 배경 색상: 세포 뒤의 기본 색상입니다.
- 내부 셀 패딩: 각 세포 안의 공간.
- 테두리 유형 및 테두리 반경: 셀과 둥근 모서리 사이의 선입니다.
헤더 및 바디 스타일링 #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 테이블 헤더 스타일 섹션은 헤더의 배경,텍스트 색상,타이포그래피, 패딩을 설정하여 맨 윗줄이 서로 떨어져 있게 합니다. The 테이블 본문 섹션은 데이터 셀에 대해서도 동일한 작업을 수행합니다.
- 배경 색상 및 텍스트 색상: 체세포의 색깔.
- 아이콘 크기, 아이콘 색상 및 아이콘 패딩: 모든 셀 아이콘에 대한 스타일링.
- 정렬 및 타이포그래피: 본문 텍스트가 어떻게 표시되고 보이는지.
페이지의 결과 #
열, 행, 스트라이프를 제자리에 놓고 게시하거나 미리 보고 테이블을 렌더링합니다. 켜면 모바일에서 반응합니다.
일반적인 사용 사례 #
- 직원 또는 팀 디렉토리 이름, 역할, 연락처 정보가 포함되어 있습니다.
- 사양 시트 제품 특징 및 가치 비교.
- 일정 및 시간표 수업, 이벤트 또는 근무 시간.
- 가격표 그것은 가득 차 있을 필요가 없습니다 가격표.
- 데이터 요약 스프레드시트에서 스타일이 지정된 그리드로 가져옵니다.
동적 테이블 위젯 작업 팁 #
- 먼저 열을 계획합니다. 행이 정렬되도록 본문을 채우기 전에 모든 헤더 셀을 설정합니다.
- 첫 번째 셀에만 새 행을 표시합니다. 모든 셀이 아닌 각 행의 시작 부분에 플래그를 지정하거나 레이아웃이 중단됩니다.
- 휴대폰용 반응형 테이블을 켭니다. 모바일에서는 이 기능이 켜져 있지 않으면 와이드 테이블이 오버플로됩니다.
- 긴 테이블에는 스트라이핑을 사용하십시오. 얼룩말 행은 키가 큰 데이터 테이블을 훨씬 쉽게 스캔할 수 있도록 합니다.
- 셀 텍스트를 짧게 유지. 긴 문자열은 열을 늘리므로 사용자 정의 너비를 사용하여 균일하게 유지하세요.
자주 묻는 질문 #
마스터 애드온의 동적 테이블 위젯은 무엇입니까?
HTML 데이터 테이블을 시각적으로 구축하는 Elementor 위젯입니다. 리피터를 통해 헤더 열과 본문 셀을 추가한 다음 패널에서 색상,패딩, 테두리 및 스트라이핑을 스타일링합니다. 관련된 HTML 또는 단축 코드가 없으며 테이블을 반응형으로 만들 수 있습니다.
동적 테이블에서 셀을 병합할 수 있습니까?
예. 각 본문 셀의 옵션 하위 탭에 열 범위 및 행 범위 옵션이 있습니다. 여러 열 또는 행에서 해당 셀을 병합하도록 범위를 설정하면 테이블 내부의 그룹화된 제목 또는 요약 행에 유용합니다.
모바일에서 동적 테이블이 반응합니까?
예. 설정 섹션에는 반응형 테이블 토글이 있습니다. 이 토글을 켜면 테이블이 작은 화면에서 리플로우되므로 각 행이 페이지를 넘기는 대신 읽을 수 있는 블록으로 쌓여 휴대폰에서 넓은 테이블을 사용할 수 있습니다.
테이블에 줄무늬 행을 추가할 수 있나요?
예. 스타일 탭에서 전역 스타일 섹션에는 줄무늬 테이블 토글과 줄무늬 배경색이 있습니다. 이를 켜면 행 색상이 바뀌고 긴 테이블을 훨씬 쉽게 읽을 수 있는 얼룩말 줄무늬가 추가됩니다.
테이블 헤더에 아이콘을 추가할 수 있나요?
예. 각 헤더 셀에는 Icon 으로 설정된 유형 옵션이 있으며,이 옵션을 사용하면 라이브러리에서 아이콘을 선택하거나 SVG 를 업로드할 수 있습니다. 아이콘은 열 이름 옆에 표시되며,이름은 이메일,전화 또는 위치와 같은 열에 한눈에 레이블을 지정하는 데 도움이 됩니다.
감싸는 #
동적 테이블 위젯은 HTML 을 건드리지 않고 데이터의 행과 열을 깔끔한 스타일의 테이블로 바꿉니다. 헤더를 설정하고 본문 셀을 추가하고 각각의 새 행에 플래그를 지정한 다음 색상,스트라이핑 및 테두리를 스타일링하여 페이지에 맞게 지정합니다. 관련 데이터 레이아웃은 을 참조하십시오 비교표 위젯 그리고 the 가격표 위젯, 전체를 찾아보세요 마스터 애드온 위젯 및 확장, 그리고 확인해 보세요 가격 페이지 각 계획에 포함된 내용입니다.
