You have created a beautiful and colorful table in Excel and now you want to export and publish it on the webpage (Referring to Blogger here). Creating the same table using html-CSS is too cumbersome as compared to Excel. You are wondering whether there is any easy method to do so. There are quite a few ways you will come across on the internet, like, using Google spreadsheet or publishing on office online or using Tableizer, an online tool. I tried them all but not with satisfactory results. Some form of formatting errors would always creep in.
I tried different ways and found out this uncomplicated method which will enable you to get your job done very effectively. Follow these steps:
1. To format your table, use Calibri font 10.5 Bold for your local language and Calibri 12 Bold for English. Save your settings.
2. Select the table.
3. Open file menu > Save as …. Under Save as type you will see many options. Save it as Webpage(*.html) instead of the usual Excel Workbook(*.xlxs) on your desktop.
4. Under the various save options which appear below, select selection and click publish.
5. Locate the file on your desktop. Right click on it and open it with notepad. You will find many empty rows or vacant spaces in the code, just delete them.
6. Press Ctrl + H. In Find what: type style=' and in Replace with: type style='border: 1px solid black; You can choose any color for the border. (This step is necessary as Blogger html doesn't accept td border formatting of Excel.
7. Now log in to your blogger account and open the html of the web page that you want to publish.
8. Type the following code:
<div id="table-1" style=" float:left; margin: -425px auto -200px -5px;">code </div><div id="" style="clear: left;"> </div>
You may need to change the margins in the code. They appear in the following order- upper, right, lower, left. Leave the right margin 'auto' only.
9. Copy the html code from the notepad and paste it in the above code snippet you just typed. Replace 'code' with your excel code.
10. Look in the preview. Adjust the margins as required.
11. Sometimes, Blogger inserts this line into your html - <![if supportMisalignedColumns]> . It is visible in the preview above the table. Locate it and delete it.
Try this procedure on other platforms like WordPress, as well and let me know the outcome in the comments.
great it working
ReplyDelete