--- title: How to Create Your First Drag and Drop Table with Ninja Tables description: "Welcome to Ninja Tables! This tutorial will explain the most extraordinary feature, **Drag and Drop Table**. We will explore the possibilities of Ninja Tables and how to use them to create WordPress tables. So let’s get started and create our…" url: "https://www.ninjatables.com/docs/how-to-create-your-first-drag-and-drop-table-with-ninja-tables/" updated: "2025-08-08" category: Simple Mode (Drag and Drop Table Builder) --- # How to Create Your First Drag and Drop Table with Ninja Tables Welcome to Ninja Tables! This tutorial will explain the most extraordinary feature, **Drag and Drop Table**. We will explore the possibilities of Ninja Tables and how to use them to create WordPress tables. So let’s get started and create our first Drag & Drop table visually with Ninja Tables. When we go to the Ninja Tables dashboard, we will be asked to either **Create Your First Table** or **Import Table**. We will select the **Create Your First Table** button. ![Welcome to Ninja Tables UI](https://ninjatables.com/wp-content/uploads/2025/05/Welcome-to-Ninja-Tables-UI-1024x536.png) If you already have created tables earlier, then you will see a similar screen below and click on the **+ Create New Table** button. ![All Tables List UI](https://ninjatables.com/wp-content/uploads/2025/05/All-Tables-List-UI-1024x536.webp) Once you click the "Add Table" button, you will see a popup dialogue with multiple table creation options. ## Create Drag and Drop table From the menu on the side, we'll pick **Drag & Drop Table**. ![New UI drag and drop table](https://ninjatables.com/wp-content/uploads/2025/06/New-UI-drag-and-drop-table-1024x742.webp) You can name the table and select the number of rows and columns from here. Hit **Create** when you're done selecting. Or you can choose to **import** a table (using a URL or a CSV/JSON file). We've created a table with 3 rows and 3 columns. After that, the live table interface looks like this: ![Add row columns](https://ninjatables.com/wp-content/uploads/2023/08/Add-row-columns-1024x559.png) The left section on the menu, grouped by **General** & **Advanced**, contains table cell elements that you can drag and drop on the table. Four cell elements in the Advanced section are available in the Pro version only. The General elements include **[Text](https://ninjatables.com/docs/text-element/)**, **[Button](https://ninjatables.com/docs/button-element/)**, **[Icon](https://ninjatables.com/docs/icon-element/), [Rating](https://ninjatables.com/docs/star-rating-element-in-ninja-tables-drag-and-drop/), [List](https://ninjatables.com/docs/list-element/), [HTML](https://ninjatables.com/docs/html/), [Shortcode](https://ninjatables.com/docs/shortcode-element/),**and**[Image](https://ninjatables.com/docs/image/)**. The Advanced or Pro version includes **[Styled List](https://ninjatables.com/docs/styled-list/), [Ribbon](https://ninjatables.com/docs/ribbon-element/), [Progress](https://ninjatables.com/docs/progress/),**and**[Text Icon](https://ninjatables.com/docs/text-icon-pro/)**as below screenshot. ![Advanced table elements](https://ninjatables.com/wp-content/uploads/2023/08/Advanced-table-elements-1024x425.png) The buttons at the top of the table are **Manage Cells** and **Background** features to operate on the cells, row/column add/delete/duplicate, and background colors. Above these buttons, you'll notice an auto-generated shortcode, a **Preview** button, and a blue **Save Table** button. When a table is done, hit the **Save Table** button and paste the shortcode anywhere on your website. ## Customizable premade templates If you want to customize a table from a premade design, scroll down after the first window to "Drag and Drop Table" opens. There are 4 different table templates- - Pricing tables - Comparison tables - Employee tables - Schedule tables ### Ninja Tables free templates ![Table Templates](https://ninjatables.com/wp-content/uploads/2022/10/Screenshot_7-1024x468.png) Pick any table template and edit them to fit your purpose. Now we will be adding a Text element to the table by dragging on the Text Element and dropping it onto the table. ![Drag cell element and drop on table](https://ninjatables.com/wp-content/uploads/2023/08/Drag-cell-element-1024x453.png) Now once an element is added to the table, clicking on it will reveal the customization options for the element. More on the customization per element is described separately in documentation later on. When you click on the dropped cell element, you can customize it however you need. ![Customize table cell element](https://ninjatables.com/wp-content/uploads/2023/08/Customize-table-cell-element-1024x583.png) - Add text - Font color - Font size - Text alignment - Font style - Cell spacing - Move cell - Duplicate - Delete Please check our documentation for more on settings, [responsiveness](https://ninjatables.com/docs/responsive-table-design/), and [elements](https://ninjatables.com/docs-category/table-elements/). Once all the customizations are done, click on the save button and check the preview. Now all there's left to do is paste this table on a page. Simply copy the auto-generated shortcode from above the table and paste it where you need it. ### More Drag and Drop Table Templates We have created a dedicated page with [50+ table designs](https://ninjatables.com/free-table-templates/) just for you! These tables are ready to use as soon as you download the file. Many tables are created using the Drag and Drop builder function. Check out a few we handpicked for you and customize tables your way. 1. [Staff directory](https://ninjatables.com/free-table-templates/staff-directory-template/) 2. [Product rating box](https://ninjatables.com/free-table-templates/product-rating-box/) 3. [Semester/class schedule](https://ninjatables.com/free-table-templates/semester-schedule-table/) 4. [Simple pricing table](https://ninjatables.com/free-table-templates/drag-and-drop-pricing-table/) 5. [Cricket league points](https://ninjatables.com/free-table-templates/cricket-league-point-table/) 6. [Product comparison](https://ninjatables.com/free-table-templates/comparison-product-table/) 7. [Nursing care plan](https://ninjatables.com/free-table-templates/nursing-care-plan/) and more. So that’s it! Please check out our other documentation regarding the features of the Drag & Drop Tables and enjoy creating tables visually with Ninja Tables!