How Do You Create a Table With the Same Structure With Data?


Heather Bennett

Creating a table with the same structure as an existing table is a common task in web development. Whether you want to replicate the structure of a table for styling purposes or to display similar data, HTML provides several options to achieve this. In this tutorial, we will explore different ways to create a table with the same structure as another table.

To start, let’s assume we have an existing table with the following structure:


Header 1 Header 2 Header 3
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6

Now, let’s dive into different methods to create a new table with the same structure.

Method 1: Using HTML Copy-Paste:

One of the simplest ways to create a new table with the same structure is by copying and pasting the HTML code of the existing table. To do this:

1. Select all the code within the `

` tags. 2.

Copy it using Ctrl+C (or Command+C on Mac). 3. Paste it into your desired location using Ctrl+V (or Command+V on Mac).

This method is quick and straightforward but requires manual editing if you want to change the content or modify any attributes of the elements.

Method 2: Using JavaScript:

If you want more control over creating tables dynamically or if you have a large dataset, JavaScript can be handy. Here’s an example of how you can use JavaScript to create a new table with the same structure:



This JavaScript code creates a new table element, copies the HTML content of the existing table, and appends it to the `

` element with the id “newTableContainer”. You can place the new table wherever you want on your page by modifying this container element.

Method 3: Using CSS:

If you want to style an existing table without duplicating its structure, CSS can be a powerful tool. By Targeting the desired table using CSS selectors, you can apply styles to match its structure. Here’s an example:



In this example, we create a class called “my-table” and apply it to the desired `

` element. The CSS selector `.my-table th` Targets all `

` elements inside that specific table, while `.my-table td` Targets all `

` elements. You can then add your custom styles within these selectors to achieve the desired appearance.

  • Conclusion:

Creating a table with the same structure as an existing table is straightforward with HTML. You can either use copy-paste for quick duplication or utilize JavaScript/CSS for more control and customization. Choose the method that best suits your needs and make sure to modify any content or attributes as required.

Remember, tables are a powerful tool for organizing and presenting data on the web. Utilize the structure of existing tables to save time and effort while maintaining consistency in your design.