Elementor에서 테이블을 만드는 방법(4가지 방법, 단계 포함)

주요 시사점

• Elementor에는 코어 플러그인이나 Elementor Pro에 테이블 위젯이 없으므로 Elementor의 테이블은 HTML 코드, 컨테이너, 테이블 플러그인 또는 애드온 위젯에서 제공됩니다.
• HTML 위젯은 플러그인 없이 Elementor에서 테이블을 만드는 방법입니다: 테이블, tr, th 및 td 태그를 붙여넣고 테두리 및 패딩에 대한 짧은 스타일 블록을 추가합니다.
• 그리드 컨테이너는 테이블을 모방할 수 있지만 3열, 4행 테이블에는 12개의 별도 텍스트 편집기 위젯이 필요하며 결과는 실제 HTML 테이블이 아닙니다.
• TablePress 3.4에는 TablePress 테이블이라는 자체 Elementor 위젯이 추가되며 해당 테이블은 방문자가 정렬, 검색 및 페이지 매길 수 있습니다.
• 마스터 애드온 동적 테이블 위젯은 Elementor 패널의 헤더 및 본문 셀에서 실제 HTML 테이블을 빌드하고 최대 768px 너비의 장치에서 행을 카드로 스택합니다.

Elementor 에서 테이블을 만들려면 Elementor 가 테이블 위젯을 제공하지 않기 때문에 해결 방법이 필요합니다. 작동하는 네 가지는 자체 코드가있는 HTML 위젯,Grid 컨테이너,TablePress 테이블 및 다음과 같은 애드온 위젯입니다 동적 테이블.

우리는 Elementor 4.3에서 네 가지 방법 각각에 대한 테이블을 만들고 데스크탑과 휴대폰에서 모든 방법을 살펴보았습니다.

Elementor에 테이블 위젯이 있나요?

아니요. Elementor 패널에서 “테이블”을 검색하고 내장된 유일한 결과는 목차와 가격표이며 둘 다 Elementor Pro 에 속합니다. 둘 다 데이터의 행과 열을 만들지 않습니다. 가격표는 단일 가격 카드이며 목차는 페이지의 제목을 나열합니다.

어떤 방법을 사용해야합니까?

테이블의 크기와 나중에 편집할 사람을 선택하세요.

방법 1: HTML 위젯으로 Elementor에서 테이블을 만듭니다

이것이 플러그인 없이 Elementor 에서 테이블을 만드는 방법입니다. 일반 HTML 테이블을 작성하고 Elementor 는 그대로 인쇄합니다.

1. Elementor로 페이지를 편집하고 드래그하세요 에리키 위젯을 컨테이너에 넣습니다.
2. 아래 코드를 에 붙여넣으세요 HTML 코드 필드.
3. 태그 사이의 텍스트를 변경합니다. 각 tr 는 행, 각 th 는 헤더 셀이고 각각 td 는 신체 세포.
4. 클릭 출판하다.

<table class="simple-table">
  <thead>
    <tr><th>Plan</th><th>Storage</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Starter</td><td>10 GB</td><td>$5 a month</td></tr>
    <tr><td>Team</td><td>100 GB</td><td>$15 a month</td></tr>
    <tr><td>Business</td><td>1 TB</td><td>$45 a month</td></tr>
  </tbody>
</table>

<style>
.simple-table { width: 100%; border-collapse: collapse; }
.simple-table th, .simple-table td { padding: 12px 16px; border: 1px solid #e4e7ec; text-align: left; }
.simple-table th { background: #101223; color: #fff; }
.simple-table tbody tr:nth-child(even) { background: #f6f6f7; }
</style>

테이블은 가볍고 그것은 진짜입니다 table 검색 엔진과 화면 판독기가 이해하는 요소입니다. 유지 관리가 더 어렵지만 행을 추가하려는 클라이언트는 HTML을 편집해야 하며 누락된 닫는 태그가 레이아웃을 깨뜨립니다.

방법 2: 그리드 컨테이너로 테이블을 빌드합니다

그리드 컨테이너는 위젯을 행과 열로 배치하므로 테이블처럼 보일 수 있습니다. 셀에 버튼,아이콘 또는 이미지가 있는 작은 블록에 적합합니다.

1. 컨테이너를 추가하고 설정합니다 컨테이너 레이아웃 에 그리드.
2. 세트 열 필요한 열 수와 행 행 수에 헤더가 포함됩니다.
3. 세트 간격 0으로 세포가 접촉합니다.
4. 하나를 드래그하세요 텍스트 편집기 각 셀에 위젯을 넣고 해당 텍스트를 입력합니다.
5. 각 위젯이 열립니다 고급~한 다음 추가합니다 패딩 그리고 1px 국경. 헤더 셀에 배경색을 부여합니다.

위젯 수가 빠르게 증가합니다. 세 개의 열과 네 개의 행에는 이미 12 개의 위젯이 필요하고 5 x 10 테이블에는 50 이 필요합니다. 각 측면을 조정하지 않으면 셀이 만나는 테두리가 두 배로 늘어납니다. 출력은 divs 집합이므로 화면 판독기는 테이블로 발표하지 않습니다. 소수의 셀에 대해이 방법을 유지하십시오.

방법 3: Elementor 에 TablePress 테이블 추가

TablePress 는 600,000 개 이상의 활성 설치가있는 테이블 플러그인입니다. 자체 관리자 화면에 테이블을 빌드 한 다음 Elementor 에 배치합니다. Excel,CSV, HTML 및 JSON 파일을 가져 와서 방문자가 행을 정렬,검색 및 페이지 할 수 있기 때문에 긴 테이블에 적합한 선택입니다.

1. 설치 및 활성화 테이블프레스.
2. 로 이동 테이블프레스, 그럼 New 추가하기 테이블을 입력하려면 또는 가져오기 파일을 업로드하려면.
3. 테이블을 저장하고 해당 ID를 기록합니다.
4. Elementor로 페이지를 편집하고 검색하세요 TablePress 테이블. 위젯을 끌어넣고 테이블을 선택하세요 테이블 드롭다운.
5. 단축 코드를 선호한다면 드래그하세요 단축 코드 위젯 및 입력 [table id=1 /] 본인 신분증으로.

위젯에는 스타일 탭이 없으므로 색상과 글꼴은 TablePress 설정과 자체 CSS 에서 가져옵니다. 390px 테스트 전화에서 5 열 테이블도 켜질 때까지 오른쪽 가장자리를 지나 실행되었습니다 수평 스크롤 테이블의 설정에서.

방법 4: 테이블 위젯을 사용합니다

애드온 위젯은 전체 작업을 Elementor 내부에 유지합니다. 패널에 셀을 입력하고 다른 위젯에서 작업하는 것과 동일한 방식으로 스타일 탭에서 테이블 스타일을 지정합니다. 여기서는 Master Addons 의 동적 테이블 위젯을 사용합니다.

1. Master Addon을 설치하고 확인하세요 동적 테이블 위젯 설정에서 켜져 있습니다.
2. Elementor로 페이지를 편집하고 검색하세요 동적 테이블 그리고 끌어 넣습니다. 샘플 네 열 테이블로 시작합니다.
3. 오픈 테이블 헤드. 하나를 추가하세요 테이블 헤더 셀 열당 및 각각을 입력합니다 열 이름.
4. 오픈 테이블 본문. 하나를 추가하세요 표 바디 셀 셀당 왼쪽에서 오른쪽으로. 켜기 새로운 행? 첫 번째 행 뒤의 모든 행의 첫 번째 셀에 있습니다.
5. 셀을 병합하려면 셀의 옵션 탭 및 설정 열 범위 또는 행 범위.
6. 헤더, 본문 및 줄무늬를 스타일링합니다 스타일 탭한 다음 게시하세요.

각 셀에는 텍스트, 아이콘 또는 이미지가 포함될 수 있으며 텍스트 필드에는 동적 태그가 허용됩니다. 반응형 테이블? 설정 섹션은 기본적으로 켜져 있으므로 최대 768px 너비의 장치에서는 모든 행이 열 이름을 레이블로 사용하는 카드가 됩니다.

당신이 아무것도 설치하기 전에 그것을보고 싶어? 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 동적 테이블 페이지 세 개의 라이브 테이블과 열 수 있는 8개의 데모 레이아웃이 있습니다.

동적 테이블은 파일을 정렬,검색, 페이지 매김 또는 가져오지 않습니다. 각 셀은 손으로 입력되며,이는 30 셀에는 괜찮고 300 셀에는 피곤하므로 빅 데이터 세트의 경우 Way 3 으로 돌아갑니다.

피해야 할 실수

• 텍스트 편집기 위젯에서 테이블을 구축합니다. 테이블 버튼이 없으므로 어쨌든 텍스트 탭에 HTML 을 작성하게됩니다. HTML 위젯은 해당 코드에 대한보다 깨끗한 장소입니다.
• 데이터에 대한 가격 위젯을 사용합니다. 가격표 및 가격표 위젯은 구매 버튼이있는 계획을 위해 제작되었습니다. 그들은 데이터의 행에 대한 잘못된 모양입니다.
• 휴대폰을 잊어버립니다. 5 열 테이블은 390px 화면에 거의 맞지 않습니다. 행이 쌓여야 하는지,옆으로 스크롤해야 하는지 또는 열을 잃어야 하는지 결정합니다.
• 위젯에서 50 셀을 구축. 그리드 메서드에 약 12개 이상의 위젯이 필요한 경우 실제 테이블로 전환하세요.

자주 묻는 질문

최종 생각

Elementor 에서 테이블을 만드는 방법은 네 가지가 있습니다. 플러그인이 없는 작은 테이블 하나에 HTML 위젯을 사용하고,버튼이나 이미지가 있는 몇 개의 셀에 대해 그리드 컨테이너를 사용하고,길거나 가져온 데이터에 대해 TablePress 를 사용하고,Elementor 내부에서 테이블을 편집하고 스타일을 지정하려는 경우 테이블 위젯을 사용합니다.

마지막 것이 맞으면, 동적 테이블 의 일부입니다 마스터 애드온 다른 위젯과 함께.

관련 읽기

• Elementor 가격표 팁
• WordPress용 최고의 목차 플러그인