How to Create a Data Table in WordPress

While displaying research data, statistics, product lists, pricing comparisons, etc., it is very much needed to display that complex information in a clean and structured format. In such cases, WordPress data tables come in handy.

Fortunately, integrating these tables doesn’t need any coding skills. All you need to figure out is the right method of adding these data tables in WordPress. Thankfully, this tutorial is fully focused on it.

In this guide, we promise to offer you the friendliest method of creating a data table in WordPress with the all-in-one Elementor addon and data table plugin, ElementsKit.

Prerequisites before integrating WordPress data table

The first requirement to add a data table is to install a solution that provides the easiest way to add a data table. ElementsKit is a no-code WordPress data table plugin that lets you add a custom or CSV data table in a drag-and-drop Elementor interface. To benefit from this solution, you will need additional free tools.

다음은 prerequisite plugins you need to install before diving into the process of adding a data table in WordPress:

• ElementsKit (무료 & pro)

• 엘레멘터 (무료)

How to create a data table in WordPress

Since you are all prepared to integrate WordPress data tables by downloading the required tools, let’s check out the complete five-step tutorial on how to create a data table in WordPress:

Step 1: Enable the Data Table widget.

In the first step, you need to enable the Data Table widget of ElementsKit after installing the prerequisite plugins. For that, navigate to ElementsKit >> Widgets 그리고 아래로 스크롤 until you find the Data Table widget.

찾아본 후, 켜다 the toggle button and scroll up.

Then, after scrolling up, you will see a "변경 사항을 저장하다" button that you have to hit to save the changes you have made.

Step 2: Drag-and-drop the Data Table widget.

In the second step, you need to add a page by visiting Pages >> Add Page 그리고 hitting the “Add Page” button. Or, you can add a data table to an existing page by clicking the “Edit with Elementor” 옵션.

새 페이지로 리디렉션한 후, 제목을 붙이다 to the page and "Elementor로 편집"을 누르세요 단추.

Next to redirecting to the Elementor editor, search for the Data Table 위젯과 "+"로 드래그 앤 드롭하세요 상.

Step 3: Edit the content of the custom data table.

After adding a Data Table widget, navigate to the content tab and customize table content by doing the following:

• Data Type: Select Custom from the dropdown option to upload a custom table.
• Header table area: Adjust the table header.
  • 텍스트: Enter header text.
  • 배경색: select background color for the table area.
  • 텍스트 색상: Choose text color.
  • 아이콘 유형: Select icon type.
• 아이템 추가: Add more items or header columns by clicking on it.
• Header Alignment: Select alignment for this header.

지금, expand the Body Content tab and edit the content of the row of your table. For that, expand row 1 and adjust the following areas:

• New Row: Enable the toggle button to add a new row.
• 텍스트: Insert text for column.
• Add a URL: Enable it to add a url.
• 배경색: Adjust background color.
• 텍스트 색상: Select the text color.
• 아이콘 유형: Choose icon type.

Similarly, customize the content of the other rows for your data table.

After adjusting the body content, expand table settings, 그리고 make the following adjustments:

• Display Serial Number: Enable it to display the serial number.
• 찾다: Enable it to show the search option.
  • 검색 자리표시자: Add the placeholder text for the search option.
• 고정 헤더: Turn on to fix the header.
• 주문: Enable to activate ordering.
• 반응형: Turn on for the table responsiveness.
• 쪽수 매기기: Activate to show table pagination.
• Search Icon: Insert the search icon.
• Prev Text: Show previous text for pagination.
• Next Text: Add next text for pagination.
• 정보: Enable it to add info text for the data table.
  • Info text: Insert info text.
• 항목: Enable it to add entries.
  • Entries text: Add text for entries.
• Show items per page: Set how many rows or items you want to display on a single page.

Step 4: Upload a CSV file in WordPress

Besides a custom data table, you can also upload a CSV file in WordPress. You can directly CSV 파일 업로드 or from a remote file URL, or from a Google Sheet viewer URL.

Upload CSV file to WordPress

After expanding the Table, select CSV file from the dropdown option and select “Upload File” for the File Type. Then, enter the CSV file URL. Thus, your data table will be displayed. You can also adjust the header alignment. Then, after editing table settings and style customization, hit the “게시” 단추.

원격 파일 URL

Also, you can add a data table from a remote URL. For that, select “Remote File URL” for the File Type and enter your CSV file URL in the respective field. Also, set header alignment 그리고 "게시"를 누르세요 button after customizing the complete data table.

Google 시트 뷰어 URL

Again, you can add a Google Sheet by selecting “Google Sheet Viewer URL” for the File Type. Now, enter the URL of your Google Sheet and select header alignment. Finally, do table settings.

Step 5: Customize the style of the custom data table.

In the final step, after adjusting the content of your data table, customize the style of your table by editing the background Type, 심, 여유, 테두리 유형, 박스 섀도우, etc. of your Wrapper.

Similarly, adjust the style of the 머리글, Header Image, 몸, Body Image, 찾다, 정보, 항목, 그리고 항해 of your data table.

합산

Now, you know how to create a data table in Elementor, maintaining the best presentation and customization with ElementsKit. Because ElementsKit will hand you full control over the table settings and other customizations. Moreover, these customizations need zero coding knowledge.

So, whether you want to integrate a CSV file or Google Sheets, ElementsKit comes with all the possible options to add a custom data table in WordPress, avoiding coding hassle.