How to create CSS HTML Table from MS Office Word

Topbullets.comToday I was writing a blog and I needed to insert HTML Table in the article. It takes a lot of efforts and knowledge of different CSS to create beautiful CSS HTML Table. I have knowledge about different websites which provide free CSS code but today I tried it in my own way. I liked it and it hardly took 2 minutes to create a wonderful CSS HTML Table without knowledge of CSS. You just need to know 3 basic things that is 3 html tags. html, head and body. 🙂 Let’s do it. You will certainly like it. It would be more fun if you have command over MS word and table designs. Please check below steps and images.
Step 1: Open word and create a new table. Insert table according to your need and insert the data.

Step 2: Choose any design you like or you can design the table manually. MS Office provides few basic designs but you can edit the table manually as well. Like Text alignment, Bold, Color of font etc. Do whatever you want.
Isert Table - Topbullets.com

Step 3: Now save the word file as webpage. While saving the file select ‘Web page’ from the Save as dropdown menu. No necessary to save it as abc.html. If you select ‘web page’ it would automatically take .html extension.
Word Save as Image - Topbullets.com

Step 4: Now open the html page and press Cltr+U to check source file or right click and then go to ‘Page source’. It is having a lot of complicated html codes but don’t worry. Jump to body tag and then table tag. Or Press Cltr+F and type ‘<table'. You would be redirected to table tag.
Page source - Topbullets.com

Step 5: Copy the entire code. From open table tag to closing table tag. Paste these codes whenever you want. Like I have pasted these codes below this paragraph. You can check the code as well. Open notepad. Paste the code inside body tag and save it as abcnew.html
Notepad CSS - Topbullets.com
CSS Code - Topbullets.com

I pasted these code here in my blog. You can see the outcome.

Name

Age

Gender

Deepesh

23

Male

Copyright © 2014 ·All Rights Reserved · Republishing or copying this article or any part of this without giving reference would come under WordPress Copyright Act.

If you liked this article, please rate and comment. Thank You!

Signature

Deepesh Singh

Advertisements

Please leave your valuable comment.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s