15
Jan

How to create and publish tables in Blogger, Overblog, CanalBlog, Skyrock, WordPress…

No Comments Posted by : Vanina Category : Tutorials

It is not easy to create nice tables on blogging platforms such as Blogger, Overblog, CanalBlog, Skyrock, Hautetfort… or even in WordPress or Dotclear.
Indeed, we usually need to know a bit of HTML and CSS techniques to be able to publish nice tables.

Now there is an easy solution: create a table on SocialCompare, click on the “embed” button and copy and paste the code into your blog post.

Here is an example in images, step by step :

  1. Click on “create a table” in SocialCompare:

    Choose the name of your table, a category/theme and click on “Add” (except if you already have the table as a spreadsheet, then you can click on “Import”):

    create comparison table

  2. Add columns headers (items to compare) :

    You need to know that the table can be rotated at any moment later (it is already possible now by clicking on “Rotate” link), so do not worry if you want your items in lines and criteria in columns, and vice and versa…

    add items to compare

  3. Add lines headers (comparison criteria) :

    You need to choose the criteria type that you want to add, such as text, list, image, video, unit, vote… in our example, it is a criteria type: “rating on 5 stars” named “Ergonomy”. These various and advanced criteria enable you to create original and advanced tables. (see the complete list of criteria types here).

    add criteria table

  4. Add existing content (i.e: existing criteria) :

    When starting to write a word, suggestions of existing content are made, it is recommanded to use them, by selecting the adequate data, in order to reuse the same data from one table to another one. It make data maintenance easier (updates of an item are propagated to all tables using it) and it enables comparison of different items coming from different tables.

    add existing criteria

    Now that we have added all the headers of our table using the green Add button, we can validate by clicking on “Ok”. We now have the structure of our table, we can start to fill in the values.

    empty comparison table

  5. Fill in, edit the content of our table :

    You have to click on the cell you want to edit, on the “pencil” icon to start to fill the table. You can use the “Tab” key to go through the cell fields. When it is finished, you have to click on the green “Save” button or on the “Save” disk icon on the top left corner of the table, next to the + button (that enables you to add more lines and columns).

    comparison table to edit

  6. Publish your table :

    Click on the green “Publish” button, located on the right of “Save”. Publishing the table makes it visible to SocialCompare’s community, that will be able to update the data (if you enable modifications by everyone) or be able to suggest changes/updates of your data (if you have blocked the modifications rights).

    publish comparison table

  7. Copy the code to embed to your blog post:

    Finally to embed the table into your post, you need to click on the “embed” button and to choose the table dimensions depending of your blog size and choose the table style (look and feel: defaut, compact…). You can change completely the colors, design of your table if you want…, following the guidelines and tutorial made in this previous blog post. Then you copy the code displayed in this window, and paste it into your blogging platform.

    embed table on blog

  8. Paste the code into your blog post:

    Use the “HTML” part of you blog editor to paste the code. For example in Blogger, you get this:

    new post table in blogger

  9. Publish your blog post:

    Publish your blog post as you do usually and see the result:

    blogger post with table

If you have any feedback or suggestion to improve our service, please do not hesitate to post your ideas on our dedicated discussions topics on our Facebook page, as explained in this previous post.

If you do not have a facebook account, do not hesitate to use the comments part of this post or use our contact form.

Trackbacks / Pingbacks

Leave a Reply