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 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.

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 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

<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.

Sample table created with Word 2010 to show the activities planned in a calendar month is shown here for example.

3. Simple Table App from Weebly App Center

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.

4. Advanced Data Table Widget

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.

5.  Google Spreadsheet

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.

6. Online Table Generators

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.