Thursday, 12 January 2012

How Does Your Blog Look ~ Tables


I had a few people ask me how I did my Goodbye 2011 ~ Hello 2012 page, with links from 36 pictures to the projects I had completed, so I thought I'd do a post to show you what I did to:
  • Create a table with 9 rows and 4 cells in each row.
  • Insert a picture into each cell.
  • Add a link to each picture.

When I first started using tables on my blog, I used a fabulous tutorial by Keren, from Sew la Vie! Keren's tutorial explains:
  • how to generate the code needed to create a table
  • how to add the code to your blog
  • how to add images to your table
  • how to add links to your images
  • how to make your table borders invisible
Over time, I found myself wanting to add extra cells to existing tables. I experimented with copying the existing code in a table and pasting it into the code. This worked, but I thought it was time I worked out how to do it from scratch without using a table generator to do my coding. Here's how I create a table. I have absolutely no experience with coding. This is what I have learnt by experimenting. It is not necessarily the best way to code, just what works for me...

To start a table, type: <table border="1">
To end a table, type: </table>

Where you want the row to start, type: <tr>
To end a row, type: </tr>

To create a cell, type: <td>
After a cell, type: </td>


This is what the code looks like for a table with 1 row and 4 cells in each row. I have added colour to make it easier to follow...
<table border="1">
<tr>
<td>  </td>
<td>  </td>
<td>  </td>
<td>  </td>
</tr>
</table>


Here is the code for a table with 2 rows and 4 cells in each row...
<table border="1">
<tr>
<td>  </td>
<td>  </td>
<td>  </td>
<td>  </td>
</tr>

<tr>
<td>  </td>
<td>  </td>
<td>  </td>
<td>  </td>
</tr>
</table>

However, in both cases, your table will be so small, it will be almost impossible to work with. Here's what the second table will look like.

To make it easier to work with the table, add some text to each cell to make the cells larger. Here is the code with abc added to each cell. You can add any text you like...
<table border="1">
<tr>
<td> abc  </td>
<td> abc  </td>
<td> abc  </td>
<td> abc  </td>
</tr>

<tr>
<td> abc  </td>
<td> abc  </td>
<td> abc  </td>
<td> abc  </td>
</tr>
</table>


And here's the resulting table...
abc abc abc abc
abc abc abc abc

If you go back and look at your code, you will see that some code has been added at the beginning and end of the table...
<table border="1"><tbody>
</tbody></table>
You can add this as you code. I just let blogger automatically add this part for me.

Once you have your table:
  • insert an image into each cell
  • delete the text
  • add a link to each picture
If you would prefer not to have a table border, change the first line of code for the table to...
<table border="0">

When you are coding, you will need to be in  html mode. When you add pictures and text, you can be in html mode or compose mode.

If you have never added tables before, I suggest you begin with Keren's tutorial. Once you have mastered that, you can begin to experiment with your own coding.

It's not a very pretty post, but I hope it's of some help if you would like to create your own tables.

... Pam

How Does Your Blog Look ~ Master List

Pin It

17 comments:

  1. Yay thanks for this!!

    I was practically pulling my hair out trying to make a simple table of images for my 2012 sewing plans and ended up fannying around on InDesign... and my resulting table doesn't even link to the image sources.

    So this tutorial will be a massive help!

    ReplyDelete
    Replies
    1. Hope it all makes sense for you. Let me know how you get on.

      Delete
  2. I utilize that table generator link all the time. :-)

    ReplyDelete
  3. this is exactly the help I needed. thanks so much!

    ReplyDelete
  4. Really useful, thankyou for posting on Ta-Da Tuesday!

    ReplyDelete
  5. Thanks for this Pam. I've not figured all the meaning of each part yet - still just copying and pasting! Good to know how to do it from scratch - and so be able to spot what's missing when there's an error!!

    Thanks for linking to a Round Tuit!
    Hope you have a fabulous week!
    Jill @ Creating my way to Success
    http://www.jembellish.blogspot.com/

    ReplyDelete
  6. TFS!!! This is a great tute!! Stopping by from Reasons to Skip the Housework linky party and already a follower.

    Here is what I shared this week: http://craftybrooklynarmywife.blogspot.com/2012/01/hollys-first-coat.html

    ReplyDelete
  7. This is such a great help, I have bookmarked it already. I love learning new ways to make my blog look better. Thanks so much for sharing at our Link It Up Thursday party (you've been busy, lol).

    ReplyDelete
  8. whoa. I think I understand. No need for this now but I've pinned it for the future! Thanks!

    Stopped by from these peas taste funny

    ReplyDelete
  9. What a fab tutorial! So many talents-and I was already totally impressed with the sewing.

    Thank you so much for taking the time to join our Pin'Inspiration party this week. I'm hoping that you'll pop by tomorrow and share at my "Beat The Winter Blues" party. :-)

    ReplyDelete
  10. Thanks for sharing this. I have been contemplating how to redo my tutorials page- this might work. Glad to have you at Things I’ve Done Thursday!

    http://www.bearrabitbear.com

    ReplyDelete
  11. Hi Pam, Thank you for this great tutorial, it was a huge help

    ReplyDelete
  12. You completely amaze me...i gave up on HTML months ago as I thought it was way too hard as I also wanted to do something similar like photo tables. What I do now to enhance my photos or to create tables of photos is I use a free Photo Editing Software downloadable from the Internet called Photoscape. It is very easy to use...it has different frames, features, texts etc., and it also allows you to put as many photos together and save it as a single photo. So when you want to upload it on your blog, your blog thinks you have a single photo. Hope it all makes sense. Have a look at the link if you'd like.
    http://www.photoscape.org/ps/main/index.php

    ReplyDelete
  13. Pam - I just tried this out for the link buttons...wow you made it so easy. Thank you very much! :) I am so happy to have the organized link buttons on my post now. ;)

    ReplyDelete
  14. Thanks for this! It was really helpful. I'm middle of reworking a couple pages and this is really great.

    ReplyDelete
  15. pam, this is how i feel messing with coding! @_@ hahahaha

    ReplyDelete
  16. Thanks. educative post. http://typearls.blogspot.com

    ReplyDelete

Thanks for stopping by! I love reading your comments and try to reply to all of them via email.