• open panel

Here Is How To Create A Table In Weebly

 

You can create a good looking table in Weebly in two simple steps. Currently Weebly does not have a built in drag-and-drop element for Tables. But you can create tables of any styles. An example of Table in Weebly is at http://create-free-website.weebly.com/table.html

Example of Weebly Table

Create a style once. Then create as many tables as you want. Just add the data.

The above table is from http://create-free-website.weebly.com/table.html .

Add the following five lines to your CSS file via ” Design -> Edit HTML/CSS “. You can change any of the parameters to your liking. 

table {  border-collapse: collapse; width: 100%; }
th {  background-color: #222; color: #fff; }
th, td {  border: 1px solid #444;  padding: 5px; text-align:center; }
tr:nth-child(even) {  background-color: #fdfdfd; }
tr:nth-child(odd) {  background-color: #e1e1e1; }

If you like the table style as it is, you don’t need to change any thing. Just copy the above five lines and paste to css file

The next step is to drag and drop a custom-html element on to the page you would like to add the table data. For the example in http://create-free-website.weebly.com/table.html we use the following for cutsom-html

<table>
    <tr>
       <th>Fruit</th>
       <th>Calories</th>
        <th>Vitamins</th>
    </tr>   
   <tr>
        <td>Banana</td>
        <td>100</td>
        <td>B6, C</td>
   </tr>    
   <tr>
        <td>Apple</td>
        <td>100</td>
        <td>B6, C</td>
   </tr>
    <tr>
        <td>Orange</td>
        <td>60</td>
        <td>C</td>
   </tr>
</table>

Your entire table should be within <table> </table>. <th> is for table header. <tr> is for table row. <td> is for data. To add another row, just add another <tr> … </tr>. To add another column, add another <td> .. </td> for each row.

If you would like to add multiple tables in weebly pages, just add the custom-html elements with the table. No need to add multiple styles. One definition of style is sufficient for all tables, unless you would like to create different tables with different colours and styles.

 

 
Raju Nunna

About Raju Nunna

Raju Nunna is the Founder of "Weebly Forums"

25 Responses to “Here Is How To Create A Table In Weebly”

  1. Hi,
    Thanks for this post:) but I have a question for some more help concerning this issue. As I am not acquianted with CSS/HTML codes, I only use good tips and by observation and comparison add new adjustments to Weebly websites, so I don't know where the code that you show above for placing in CSS/HTML shoul exactly be located?
    If you could give me some more tips, I would be grateful and would be able to try it out:)

     
    • Da
    • Reply
    • As long as the code is not added in the middle of other elements, it should be fine. If you are not sure, add it after the last line of the main-style.css file in weebly.

       
      • Raju Nunna
      • Raju Nunna
  2. Hi,
    Thanks for sharing. I tried to add a table in weebly with the code you provide and it works pretty good. But it seems that all my columns got messed up with the codes as they became to have boarder, background color, et al. I tried to change class name but it didnt work. Now I have to delete the codes. Is anyway to fix this problem?

     
    • Alex
    • Reply
  3. There is one more simplest way for biginars to make 3D designed and colored table in weebly.By following steps.

    1.make your table in MS Word as your whish.
    2.Save that Document as “doc1.html” on desktop.
    3.open that file with note pad.from desktop.
    4.copy html code, and past this on weebly editor.
    By using custom html.
    5.Enjoy, your table is ready without any html knowledge.

     
    • This works very good! Thanks! Now can I make anything in Word and save it as a Web Page then copy/past the code in Weebly?

       
      • Javier
    • Is there a limit to the size of the table the Word version can do? I am having trouble making a long table show up. Only a short portion shows up and I can’t identify where it is going wrong in the html (I am a beginner but trying to look for a difference in the html between rows.)

       
      • Mexi-Po
    • @ Mexi-Po,

      Delete all the HTML code right up until you get to this line:

      < table class=MsoTableLightList border=1 cellspacing=0 cellpadding=0

      That ensures that Weebly only looks at the actual HTML code rather than all the Microsoft Word settings etc.

      This should work for you – good luck!

       
      • DRAGONZ_RULE
    • Great suggestion. Having worked with html a tiny bit, I altered your suggestion slightly.
      1. Make table in MS Word
      2. Save as “web page, filtered” (which I think means html).
      3. Open file in notpad ++
      4. Copy html code, and paste this into the Weebly custom HTML editor.

      It worked like a charm! Thanks so much for the suggestion. :)

       
      • airbear65
  4. I used this code, but it add the style to all my other pages too. so now, i have a border on every page I have multiple columns. Can someone tell me how to stop the style from the table from being on EVERY page!

     
    • dlrowseom
    • Reply
  5. For some reason you have to separate out the styles for ‘th’ and ‘td’ onto different lines and then it will work. Try this:

    table { border-collapse: collapse; width: 100%; }
    th { background-color: #222; color: #fff; }
    th { border: 1px solid #444; padding: 5px; text-align:center; }
    td { border: 1px solid #444; padding: 5px; text-align:center; }
    tr:nth-child(even) { background-color: #fdfdfd; }
    tr:nth-child(odd) { background-color: #e1e1e1; }

    You can also define a “class” that only applies to a particular table (e.g. “mytable”). Then your CSS would look like this:
    .mytable { border-collapse: collapse; width: 100%; }
    .mytable th { background-color: #222; color: #fff; }
    .mytable th { border: 1px solid #444; padding: 5px; text-align:center; }
    .mytable td { border: 1px solid #444; padding: 5px; text-align:center; }
    .mytable tr:nth-child(even) { background-color: #fdfdfd; }
    .mytable tr:nth-child(odd) { background-color: #e1e1e1; }

    and the first line of your HTML would need to define the class, like this

     
    • … sorry first line of HTML looks like this:

       
    • third time lucky?

      <table class="mytable">

       
  6. I have been making tables by embedding from google docs. The table cells can have links, but they open in the frame. Maybe a HTML tweek could have them open in a new window.

    Instructions for modifiying embed code:
    open the document to be shared
    select File…Publish to the Web
    click the “start publishing” button
    hilight and copy the embed code
    go to your weebly authoring page
    insert a “custom HTML” widget
    paste your embed code into the frame
    after the word frame in the code type: width=100% height =500%
    click out of frame and wait for results
    publish the weebly web site
    When you insert the cusom HTML widget, make sure it is for the full width of the page, not in a multiple column area.
    see tie2012.weebly.com

     
  7. how do i add my site’s html field to weebly? i dont understand how it works…

     
    • koalo
    • Reply
    • In Weebly Editor, there is a “Custom-HTML” Element, which you can drag and drop on to your page. You will then be able to paste html code in that box.

       
      • Raju Nunna
      • Raju Nunna
  8. I’m okay with making tables with html and inserting it in weebly, but how do you insert a link in your custom html table to a file on your website? I would like it to link to a pdf which has not yet been uploaded. If you use custom html, then there does not appear to be a way to open a file upload box. Thanks for any advice.

     
    • ruby
    • Reply
  9. thanks you very much for this
    GOD BLESS YOU !

     
    • jolina
    • Reply
  10. If you use word, copy the contents to http://www.textfixer.com/html/convert-word-to-html.php – which is a word to html converter. It cuts out all that Word mumble jumble and the tables are the right length, even long tables.

    Its much easier than opening it in notepad.

     
    • Robert
    • Reply
    • Was wondering about needing to add an extra line of code for the size because when I pasted it into the custom html, it was very tiny. I like this way better but didn’t know if I should be adding some code to be width=100% or something like that?

       
      • WebDeb
  11. I have discovered a problem and how to fix it.

    If you just use a table as described above, without a class, and you use a multi-column layout, then the background color of your page might change. This is because the multi-column layout also uses the table-tags.

    If you use a class for your table, as described by Alex Webster above, it’s fixed. Just in case, I would always use my own class. You only need to insert the class=”myclass” tag.

    Hope this helps!

     
    • Paul A.
    • Reply
  12. Hello. I seem to have a problem with the CSS code. Whenever I paste the CSS code I can see the the proper table through the previewer below. But the navigation bar and footer becomes white in colour. I’m using one of the older themes(but with the latest updated added by Weebly a couple of months ago).

    Need help, if you want I can send you screenshots :)

     
  13. Whaaaaaaat? It’s this easy?! Who knew?!! Who freakin’ knew?

    Thanks. I needed this, and had I known about it, my site could’ve been up days ago. Oh well, I’ll use the info to make future modifications.

    Thanks, again.

     
  14. I added a table to my website by creating one in excel, saving as a web page, then copying the script in notepad. It worked! Is it also possible to include images? I tried saving my image files to weebly, but they did not show up correctly in the table.

    Thanks, as always, a great tutorial!

     
    • Anna
    • Reply
  15. Hello,

    I’m using the standard weebly tables, and the custom table you’ve provided here. My problem is that the weebly tables are showing as gray for me because of the additional tables. How can I avoid this?

     
    • Nikolas
    • Reply
  16. I was able to import a table from MS Word using the techniques mentioned above. However, I can’t enter data into any of the table cells or highlight existing data to form a link. What happens then is that the table disappears and the HTML code reappears.

    Any ideas on what’s going wrong? Thanks, Joe

     
    • Joe X
    • Reply

Leave a Comment

Weeblyforums.com is neither affiliated with nor endorsed by Weebly
© 2013 Weebly Forums, a CrossWeb.ca venture

Facebook

Follow WeeblyForums on Facebook
%d bloggers like this: