How to create an HTML table for your sidebar

If you've read my bucket list, you'll know that one of my goals is to learn HTML.  I have a good idea of how the basic tags work, but I still want to learn more about how the complicated stuff works.  The good news is that there are a lot of HTML generators online that you can use.  I used one of them recently when I set up the ad space in my sidebar.

Here's what I did:

First I went to this website. You can play around with the boxes to change how many rows and columns you want.   You can also play around with the cell borders and colors if you want.  I like to play with those numbers just to see what they do, but if you are not a nerd, you can skip that part!

When you've got the number of rows and columns that you want, you'll want to copy the code provided.  Make sure you get all of it, or else your table won't work out correctly.

Now take all of that code and head over to to a real time HTML editor.  There are lots of free ones online, or you can just pick this one.  Everything you type at the top (the blue part) should automatically format itself down below.  This makes it easy to see what you are doing and catch yourself before you get too lost.

So paste this at the top:

And you'll see your table down below.  The places that say "table cell" are where you are going to put your ads.  This table is currently intended for text entries, but we can easily add a picture with a link in each cell.

For this next part you will need two things.  An image and a place you want that image to take you to.  If the person who bought your ad space has a blog button this part will be easy.  Just take all of the text from that blog button and paste it where you see the words "table cell."  Don't change anything else.  Leave all the other bracketed stuff alone.

In my case, I have an ad for The Dose Girls.  I copied the text from their blog button.  It looks like this:
<a href="http://www.thedoseofreality.com/" target="_blank">
<img src="http://www.thedoseofreality.com/wp-content/uploads/2013/04/TDoRnewAvatar.jpg" width="100" /></a>

The words in green are the website that this picture will link to.  The words in blue are the location of the picture.  Make sure you use everything from the opening  <a ... to the closing </a... .

Replace "table cell" in each case with both pieces of  HTML code.  There should be one line that tells the internet where to find your picture, and one line that will direct you to another website.  By the way, see where it says target="_blank" up there in orange?  That tells your browser to open that link in a new tab.  You can add that if you want people easily be able to come back to your page, or you can take it out if you are okay with them leaving.  Also, if your table is running all across the page, you can fix it two different ways.  One is by changing the width of the entire table up in the very first tine.  It currently says width="100%."  If you change 100% to 210 (no %), it will be more square.  You can also go into the image source link and add in the text: width="100"/ after the image location on each picture.  It's in red up there.

If you've done everything correctly, you should see a table like this:


If that's not what it looks like, I suggest going back and double checking the steps up above.  I highly recommend using copy and paste instead of trying to type all this out.  There are lots of things that can go wrong with HTML coding.

Now that you have the table looking the way you want it to, and you've clicked your pictures to make sure they go where you want them to, you have to decide where to place this table.  I have mine in two places.  One is on my sidebar and one is in a tab at the top of my blog.  For the sponsor tab at the top of my blog, I wrote out the text of what I wanted to say and then switched over to the HTML editor and pasted in my code.  When I switch back, there's my table, all nicely formatted and clickable!  If you want yours centered, just use the <center> tag at the beginning of your table and the </center> tag at the end.

For the sidebar, I went into my dashboard, clicked on the layout and added an HTML widget on the side.  I pasted the text into the widget and saved it.  Easy peasy!

Again, I will say that I am not an HTML expert, but this worked for me and it should work for you too.  If you have questions, go ahead and ask them.  I'll see what I can do to find the answers.  If you are a professional HTML writer, please be kind!