Wednesday, January 29, 2014

How to add custom table design to blogger - Tutorial

Hi,In this blog i will show you how to add custom designed table in to blogger. Since blogger default tables are boring . We can modify the design and add based on our wish and style.So let get started How to add custom designed table to blogger.

Here is a quick video to add custom table designs to blogger.



We will be going create custom design of tables using excel. I will be using Open Office as my excel application.You can use MS Excel or Open Office. So open Open office/MS Excel select spreadsheet.


Click on spreadsheet  and open a new spread sheet. We will design our table in spread sheet using formatting tools. We can add header text,make the content alignments,font size,color,weight changes using excel formatting tools present.

We will design a  table with sample data.

Now once sample table is created will format the table to make it look beautiful.To make it look better i added background color and increased font sizes and family.Here you can look at modified table.You can do more on this table.

Once you complete with designing the table in excel. Save the excel document in .html extension. This can be done  File -> Save As -> Save As type(dropdown) -> HTML Document(.html)




After saving the document in .html format by adding file name before saving.Open the .html file which you saved in browser.

Copy the table code from page source.


Once you copy table code from HTML page source. Login into your blogger account and create new post. Press the toggle button saying Compose and HTML on top left of the screen.

In HTML editor paste the copied code  from page source. Once you copy the code to HTML editor in blogger save the blog and toggle back to Compose button. You can see a customized table appearing on your content pane of your blog. You can preview the blog post and by clicking on preview button on right hand side of the blog editor.




Here is the preview of customized table. Thats it .

To know more about me visit www.nithinchandrasr.com.

You can subscribe to my channel on YouTube: www.youtube.com/nithinchandrasr

No comments:

Post a Comment