How 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 normal text content. Though Weebly introduced a free “Simple Table” app through it’s App Center, there are many simple ways you can add table to your free Weebly site.
How to Add Table in Weebly Site?
In this article let us explore all possibilities of adding table to your Weebly site.
- HTML Method
- Using Microsoft Word
- Using free Simple Table App from Weebly App Center
- Advanced data tables with search box and pagination
- Using Google Spreadsheet
- Embedding table code from other third parties
Looking for adding pricing table in Weebly?
Checkout Here...1. Using HTML Method
HTML table tag is one of the easiest way 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <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 Notepad to create this code and save it as a .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. 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, we explained with Microsoft Word 2010.
- Click on the “Insert” tab and then “Table” button to select the number of rows and columns to create a simple table.
- Once you created the table, click any cell inside the table to see the menu “Table Tools” appearing on top of the other menu items.
- Click on the “Table Tools” option and customize your table.
- Once your table is ready save the document as a webpage (*.htm or *.html)
- Open the saved document in a Notepad (Right Click and Open with Notepad) and copy the code.
- Use Embed code element to paste the code on your Weebly site.
Some Weebly themes also support copy paste the table directly from Microsoft Word or Excel to your Weebly editor.
Sample table created with Word 2010 to show the activities planned in a calendar month is shown here for example.
Sunday Monday Tuesday Wednesday Thursday Friday Saturday Week 34 1 2 3 4 5 6 Week 35 7 8 9 10 11 12 13 Week 36 14 15 16 17 18 19 20 Week 37 21 22 23 24 25 26 27 Week 38 28 29 30 31 Tentative Planned Holiday Navigate to App Center and connect the free “Simple Table” app available under “Tools” category to your site, then drag and drop the 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. Weebly Simple Table App Advanced data tables uses jQuery JavaScript libraries and enables search box, pagination and filtering options for a table. Though it may need some time 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. Weebly Advanced Data Table When you have a huge table with hundreds of rows then the simple option could be using Google Spreadsheet and embed the code on your Weebly site to share the table. There are lot of advantages when using Google Spreadsheet like enabling content editing for invited users. Also you can continue to update the content from your Google account and add complete sheet with multiple tabs. Though creating table with HTML is simple, it is cumbersome tasks especially for creating a bigger size tables. Since Google services are blocked on many countries or 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. 3. Simple Table App from Weebly App Center
4. Advanced Data Table Widget
5. Google Spreadsheet
6. Online Table Generators
View demo of various tables on Weebly site
View Tables DemoRecommended Articles:
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 youWell, 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.
10 Comments
Leave your reply.