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.

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