Tuesday, June 2, 2015

How to make pre-formatted CSS + HTML table in blogger post?

Creating blogger post in pre-formatted tables makes the work easier in posting articles especially when the information are standardized. This type of post is suitable for product information such as technical specifications, product facts, prices comparisons. There are many ways you can think of depending on your ideas how you want it to be and who do you target to read the information.

The best example of pre-formatted table is the GSM Arena website which provide information about mobile phone technical specifications. The table and titles of each rows are ready made meaning each time they make a post about new phones technical specifications they just fill in the blank according to the info provided. By doing this way the work is easier rather than keep making new tables and having headache of re-entering new titles of each columns and rows of the table from scratch.



This kind of pre-formatted table can also be done in blogger post and you can do it without so much work with the help of HTML table generator (http://www.tablesgenerator.com/html_tables). There are many other site providing the tools to generate free HTML generation. 

All you need to do are the followings:

1. Select how many rows and columns of the table you preferred



2. Select table themes if there are available. Most HTML generator site provided various themes to select from



3. Select choose background colors of the table i.e Header colors, cell colors, etc

4. Then enter some titles to the column or rows. 



5. Copy the HTML table codes 



6. Once it is done go to the Blogger dashboard and click on Settings>>Posts and Comments



7. Find Post Template and paste the HTML table codes and save the settings

8. Once done you have a pre-formatted table. Everytime you make a post the table will automatically appear and all you have to do is just fill in the blank. No need to make new table.

The table shown here is just an example how you can make pre-formatted HTML table in blogger post. You may have a better idea how to make it better especially in terms of looks, colors, size, and arranging the data. The idea is yours to make it whatever you want it best for your sites. The table can be view in compose mode as below


You can also view the HTML coding of the table by clicking on the HTML view tab beside the Compose mode and below is what you see

The idea is limitless all you have to do is be creative like GSM Arena, Compare prices, compare hosting, etc. The power is in your head.

No comments:

Post a Comment