How To Add HTML table in wordpress post
One of my subscriber sent me an email and ask that how I can add html table to wordpress blog?
At the time I decide to write this post for my viewer. So today i am sharing the tricks of “Adding html table to wordpress post”. This is a basic and easy tricks but I know most of the newbies will not know that how to add html table to wordpress post. In the previous post I have explain that how to show html code in blogger post click on the link if you are interested, if not, then continue reading this post.
I have noted that every one that is new or old to wordpress blogging, is interested to have a professional blog with nice post and arrangement. Leave this discussion and start adding html table to wordpress. Follow the instruction and make html table.
Just remember “one rule” when you are posting html code and that is:
For every begin <> there must be an end </>
It means that every code in wordpress is mostly start with <> and close with </> this is the important term, and you should keep in mind that. Now see the given code for table. The start is from <table> and close with </table> this is rule that I have mentioned above. You can modify it as:
td= put data, text or images. You can repeat as many time as you want cells in your post.
tr= to make rows, repeat as many time as you want rows in you post.
<table width="400" border="2" cellspacing="1" cellpadding="1"> <tbody> <tr> <td> row1, cell1</td> <td>row1, cell2</td> </tr> <tr> <td> row2, cell1</td> <td>row2, cell2</td> </tr> <tr> <td> row3, cell1</td> <td>row3, cell2</td> </tr> <tr> <td> row4, cell1</td> <td>row4, cell4</td> </tr> </tbody> </table>
I have added the code in html editor to my wordpress blog and then I have prieview it with “Visual mode”. Remember that I have a little problem with my theme function, and the border is not displaying well, when you apply this tricks you will see the color of the border.
Now the given is the preview of the above code see it.
|row1, cell1||row1, cell2|
|row2, cell1||row2, cell2|
|row3, cell1||row3, cell2|
|row4, cell1||row4, cell4|
Now we have to put text, images and link in the above table. I have added some link with images and simple text to the table see below the changes.
|Thsi is a simple text see this one, you can also add image like the above one, You can also add a link to the post, article or media in the table. Try to make your blog post as professional as like you,||Now You have learn that How you can add html table to wordpress post. This is very easy feel free to midify it and change the structure of the table, repeat the rows as many times as you want|
That’s it, You are done, if you want an example of the above code ( link, images, text in HTML) then copy the given code modifed it with your own links and text. I am putting the HTML code for the last image in the table “Make Money With Adsense“, just copy and paste the below code.
<a href="http://www.entertolearn.com/makemoney/how-to-make-money-with-adsense/" target="_blank"> <img style="border: none;" src="http://www.entertolearn.com/wp-content/uploads/2011/09/Earn-money-with-adsense-300x165.jpg" alt="How To Make Money with Adsense" width="150" height="140" border="0" /> </a>
I hope You will understand now, if you are still confuse that where to enter your text, images and link, just see the given code.
<td> Your Text,Image,and Link goes Here</td>
Learning a little more now can add border effect to the complete tablet. just copy this code.
<table style="border:1px solid black;"> <tr> <th>Table header</th><th>Table header</th> </tr> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> </table>
This code is used when you want to make header along with cell, the preview for the above code is given below.
|Table header||Table header|
|Table cell 1||Table cell 2|
If you are still confused just leave comment here. See you in the next post, have a nice life.