HTML Basics: Tables

If you're not a blogger, you'll probably want to ignore this post! :-P

When I was in high school, I took a computer science course. Nerd? I know, I know, but it was actually a great class. I got some basic html and program writing skills and easy credit. My blog has been a fun outlet for that nerdy side of me because I get to play around with custom coding again. Ok, I'll stop with my explanation now because I sound like a big dork....

After I posted about my new Recipe page, Sarah from Scissors and a Whisk asked about how I got the buttons to line up. So I'll tell you how! You can use this on blog "pages" or in posts themselves. AND I made different tags different colours so it's easier for you to read!

Building Tables

The code for building tables is really simple, you need to start by defining your table with the tag:

<table>

Next you need a tag to define the row:

<tr>

And one to define each column:

<td>

And, in case you know absolutely nothing about HTML, you need to "close" each tag you "open". This means you need put each tag I showed above, followed by the content, and then a closing tag. A closing tag is basically the original tag, but with a slash before the text.

Ok, enough wordy descriptions already! Here's how it works...

The code looks like this:

<table>

<tr>

<td>one</td>

<td>two</td>

</tr><tr>

<td>three</td>

<td>four</td>

</tr>

</table>

And when you paste it in (in HTML edit mode):

one	two
three	four

You can add your images using html instead of the button in blogger's editor and put them in tables so that they line up nicely in posts (if you want multiple images in a row) too.

The Other Details

For my recipe page, I used files and made them into links. To make a link you need this code:

<a href="http://acireg.blogspot.com">

But obviously with your desired url in the quotation marks. And you close it with a simple:

</a>

For an image, you need this code:

<img height=125 src="https://lh4.googleusercontent.com/-HJdpTmkzDe4/TrGz4GrW7yI/AAAAAAAADNg/j9Abxend050/s512/17133094175.jpg">

The height is in pixels, I just play around with it until I get it right! And the url has to end in jpg, gif, etc., meaning it's the image file itself. Oh, and you don't have to "close" an image tag.

You just place the image code in between the link tags so that it becomes a linked image!

Are you totally confused? Bear with me! Here's the code:

<table>
<tr>
<td>
<a href="http://acireg.blogspot.com">
<img height=150 src="https://lh4.googleusercontent.com/-HJdpTmkzDe4/TrGz4GrW7yI/AAAAAAAADNg/j9Abxend050/s512/17133094175.jpg">
</a>
</td><td>
<a href="http://acireg.blogspot.com">
<img height=150 src="https://lh3.googleusercontent.com/-9dUGYpaQzHI/TrG0PZykNRI/AAAAAAAADNo/os-_JMhSPJg/s512/17133126009.jpg">
</a>
</td>
</tr><tr>
<td>
<a href="http://acireg.blogspot.com">
<img height=150 src="https://lh3.googleusercontent.com/-FFMOfl3vxIE/TrG0loy_RHI/AAAAAAAADNw/KVEwoebEWwI/s512/17133143156.jpg">
</a>
</td><td>
<a href="http://acireg.blogspot.com">
<img height=150 src="https://lh5.googleusercontent.com/-y0fMsa6khyE/TrG03H4Pa7I/AAAAAAAADN4/nDcM-27HXJg/s512/17133154397.jpg">
</a>
</td>
</tr>
</table>


Finally, if you use the blogger editor, be prepared for some variation. The space between table cells looks different in the editor than they do in the post itself, but it's never been an issue. And last, but not least, if you want to centre your table on the screen, add <center> before the table and </center> after!