6 Ways to Add Table in Weebly Site

Table is a simple and precise way to express the classified content within a limited space. For example, student’s mark list, organization’s employee list or a sports event list can be well displayed using a table instead of explaining with a lengthy text content. Though Weebly introduced a free “Simple Table” app through it’s App Center, there are many simple ways you can add table in your Weebly site.

How to Add Table in Weebly Site?

In this article let us explore all possibilities of adding table to your Weebly site. Check out this article if you are looking for adding pricing table in Weebly.

1. Using HTML Method

HTML table tag is one of the easiest ways to create table content offline and paste it on your Weebly page using an “Embed Code” element. Using standard HTML <table> tags, you can create simple tables for your site. Here is an example code to create a HTML table with the following features:

• Header and first column are highlighted in different background colors
• Different font colors are used for different cells
• Table border is used to create a space between cells
• Row height is fixed as 30px with the width of the table is fixed as 300px

<table border="3" bordercolor="Skyblue" width="300">
<th height="30" bgcolor="gray"><font color=Yellow>Plan   </font></th>
<th height="30" bgcolor="gray"><font color=Yellow>Sites   </font></th>
<th height="30" bgcolor="gray"><font color=Yellow>Price (1 Year Plan)</font></th>
<tr height="30">
<td bgcolor="silver"><b>Free</b></td>
<td><font color=26EB10><b>10</b></font></td>
<td><font color=26EB10><b>Free</b></font></td>
</tr>
<tr height="30">
<td bgcolor="silver"><b>Starter</b></td>
<td><font color=26EB10><b>10</b></font></td>
<td><font color=26EB10><b>$4.08</b></font></td>
</tr>
<tr height="30">
<td bgcolor="silver"><b>Pro</b></td>
<td><font color=26EB10><b>10</b></font></td>
<td><font color=26EB10><b>$8.25</b></font></td>
</tr>
</table>

And here is how the table will look like in your Weebly site:

You can customize the above code to add multiple columns and rows as per your requirement. You can use simple text editing apps like Notepad or TextEdit to create this code and save it as .html file. Open the .html file with any browser to test the code before you use it on your Weebly site. Once finalized with your code then paste the above code inside the “Embed Code” (Custom HTML) element to see the table in your site. Note that Weebly may restrict the use of very big tables of more than few hundred rows, in this case you may split the content into multiple tables and use it on the same page.

2. Using Microsoft Word

The above HTML method is complex and time consuming to create a big table and you don’t have many options to create different kind of tables. Here comes the Microsoft Word a multi-dimensional word processing software. Follow the below instructions to create a table using Microsoft Word:

• Open Microsoft Word, here we explain with Microsoft 365 app in Windows 11. Though the process remains same, some items and menu maybe different in macOS.
• Click on the “Insert” menu and then “Table” button to select the number of rows and columns to create a simple table.
• Once you created a table, click any cell inside your table to see an additional “Table Design” menu appears in top menu items.
• Click on the “Table Design” menu to select a table style and customize your table settings.
• Once your table is ready, go to “File > Save As” menu and click “Browse” to open “Save As” dialog box.
• Make sure to select the “Save as type” as “Web Page” and save your document with *.htm or *.html file extension.
• The saved file will show as Microsoft Edge HTML Document (.htm) in your File Explorer along with a corresponding folder containing XML and theme documents. Right click on the HTML document and select “Open with” option. Check if you see Notepad, otherwise click on “Choose another app” and select Notepad app (on Mac, you can use TextEdit to open the HTML file).
• This will open the HTML document in a Notepad with the complete code of your table. Select all and copy the code to your clipboard.
• Go to your Weebly site, drag an Embed code element and paste the copied table code.
• Click outside the element to see the live preview of the table showing in Weebly editor.
• Now, you can publish your page to make the table live.

Below is how the Word table will look inside Weebly editor. The sample table shows various activities planned in a calendar month as a schedule.

Note: Some Weebly themes also support copy paste the table directly from Microsoft Word or Excel to your Weebly editor.

3. Using Simple Table App from Weebly App Center

The next option for adding table in Weebly site is looking for a Weebly app from the App Center.

• When you are on the Weebly editor, go to “Build” tab and scroll down to the bottom of the sidebar elements. You will see a “Add App” button and click on it to open App Center.
• Use the search box to find and open Simple Table app. Click on the “Add” button on the app page.
• On the pop-up that appears, click on “Connect” to link the app to your site. Now, you can find the Simple Table button under “Installed Apps” group in the sidebar elements.
• Drag and drop the Simple Tool element to add tables to your site.

As the name indicates, it is a very simple app for adding table with heading and rows. You can customize few options like alignment, background colors and the heading position.

4. Advanced Data Table Widget

All the above options are for creating a basic table with header and additional rows in Weebly site. However, advanced data tables uses jQuery JavaScript library and enables search box, pagination and filtering options for your table. Though it may need some time to add and adjust the table on a Weebly site, it is worth try. The table will look something like below and check out our dedicated article on creating advanced data table for Weebly site.

5. Google Sheets

When you have a huge table with hundreds of rows then the simple option could be using Google Sheets and embed the document on your Weebly site to share the table. There are lot of advantages when using Google Sheets like enabling content editing for invited users. Also you can continue to update the content from your Google account which will reflect instantly on Weebly site and add multiple sheets in a single file.

6. Online Table Generators

Though creating HTML table in Weebly is easy, it is a cumbersome task especially for creating a bigger size tables. Since Google services are blocked on many countries or if you are not interested in using Google account then you can use online table generator tools. This will help to create a HTML code for you and copy / paste the code inside “Embed Code” element on your Weebly page.