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.
Thank you SO MUCH for walking through how to do this using Word. This is a livesaver compared to the Simple Table offered by Weebly. I am creating a schedule of events and just needed a table that could be easily updated, so saving the schedule as html then copying it is just perfect. Thanks again!
Thank you, thank you.
Using word as per your instructions worked a treat and does everything we want until Weebly upgrades Simple Table. Most grateful
hi there. thanks for the tutorial .. i used the second way ” by Microsoft word” everything is fine except some boxes needs o be filled by users… but its solid window test cant be edited or write on it…please tell me how to solve this if u know
Tables are not meant for user inputs. What you need is not a table, it should be a form with a backend script collects and process the user inputs. This is not possible with default Weebly unless you use some third party solutions.
I’ve been using embedded google sheets on Weebly for a couple years, but now I’ve just upgraded my site theme to the new, more mobile responsive weebly version and the google embed code is preventing my site’s navigation from displaying. Weebly says “too bad”. I guess working with google products isn’t a priority for a powerhouse app like weebly.
Any use of embed code element is not supported by Weebly whether it is from Google or from any other developers.
Fabulous summary of options!
I just spent several (frustrating) days with Weebly customer support who seemed oblivious to all but the Table App which is incapable of receiving data by upload (i.e., it requires hand re-entry of spreadsheet data you already have in Excel).
For others with my dilemma, I had two inter-related problems:
1. I had large pre-existing spreadsheets (hundreds to thousands of rows of data) which load just fine with the Weebly Scribd document importer EXCEPT,
2. My data needs to be searchable by site users (names, dates of birth, death, etc. for a genealogy society). and Scribd content is incapable of being indexed by search engines (Google, Bing or even Weebly’s own site search utility).
Your HTML solution addresses both Weebly deficiencies.
For another inelegant solution, Weebly’s drag and drop Text field can house spreadsheet data as simple un-columnated (but search engine index-able) text by copying a range of Excel spreadsheet cells and pasting as plain text into a Weebly Text box. Pasting more than a hundred or so rows of formatted Excel data tend to crash Weebly, so right click and “paste plain text.” Strangely, though, you must add a leading column with a space in each cell to the original Excel spreadsheet before exporting to Weebly or the lead column won’t index and become searchble with Google, etc.. Welcome to 2016 and glitchy software.
Here’s another solution if you’re starting with an Excel Spreasdheet:
Uploading an Excel document using Weebly’s (Scribd) Document element works fine, but it creates web data that can’t be indexed by search engines. If you’re beginning with a large native Excel spreadsheet data and you want your new Weebly page to be found by search engines, this is a simple method that works. instructions parallel the MS Word solution (above):
Using Microsoft Excel
Follow the below instructions to create a table using a Microsoft Excel spreadsheet as the starting point:
– Open Microsoft Excel, I used Microsoft Word 2013.
– Format text and column widths for final appearance.
– Drag mouse across all data cells you wish to upload.
– Select “Save As” and select file type: “Web Page (*.htm, *.html)”.
– Before clicking “Save”, select the “Save: Section: Sheet” radio button (not the “full Workbook”).
– Click “Save”, then in the secondary Publish dialog box, click “Publish”
– Open the saved HTML document in a Notepad (Right Click and “Open With > Notepad”) and copy the code.
– Use Weebly’s Embed code element to paste the code on your Weebly site.
Thanks for taking time to post in details. After your comments we have added two more options in the list – advanced data table and Google Spreadsheet. Please check out if that can help for you.
4 hours of scratching my brain and translating from french to english finally cracked it. Definitely centralise the code to make the text appear on the weebly page.
Thank you
Well, of all the darned things, it worked. I used the instructions regarding using Word. I made the exact sample table I wanted and published it on my Weebly website. It actually worked and looks exactly like I wanted. Thanx guys. This is going to be fun.
I was trying to add a huge table with lot of rows but the table is getting broken and showing partially. Is there is a fix for this?
Huge tables may get broken, split the table into two or three small tables.
Hello… Just to let you know that I use Kompozer to create my tables with content using wysiwyg and then copy the code between the ‘table’ tags (including the tags). Inside Weebly, I select the appropriate page and drag the HTML element onto the work area. I then post the code, et voila – a nice clean table appears. Updating the table is simple, just update in Kompozer and copy the revised code then paste it over the existing HTML code on the Weebly page. Saves messing around writing code or if you don’t possess a copy of Microsoft Word.