Thursday 12 January 2012

How Does Your Blog Look ~ Tables

Learn how to write simple code to create a table on your blog ~ Threading My Way


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

22 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
  17. I always come back to this post to help in putting my tables together, really appreciate. www.typearls.org

    ReplyDelete
    Replies
    1. Thanks for letting me know, Christina. Good to know the tutorial is useful to you.

      Delete
  18. Thanks, Pam, I am using this on my craft instructions index page. I'll let you know when I'm done -- I need to to update all my pages and add them as I get them done so it will take a little while.

    ReplyDelete
  19. I've finished my index page and now I have decided to use tables when making my tutorials--I always seemed to have issues with images in blogger. I made it single column and added a break after the "text" boxes so there is a space before the next image. I ran into one problem when I used extra large images--a few of the words in the post hung over the dividing line on the right between the sidebar. Still working on that. Instead of ABC, I put "picture" or "text" and took the borders out so it looks like this in compose mode:

    picture
    text

    picture
    text

    picture
    text

    picture
    text

    This way I can add my images or my text first and easily add the other later if I want.

    Thanks again.

    ReplyDelete

  20. When my boyfriend broke up with me 4 weeks ago..

    I did everything to get my boyfriend back but nothing worked.

    I contacted a relationship doctor i saw online.

    I told the relationship doctor everything,

    He promised to fix my relationship problem.

    I am the happiest lady on earth right now,

    Never too late to fix your broken heart.

    You can still get your lover back...

    Fix broken relationship/marriage...

    My relationship was restored as promised,

    My Ex-boyfriend came back,

    He promised never to leave me again

    Everything happened just in 3 days..

    I RECOMMEND YOU TO __________________

    Thanks Robinsonbuckler11 (@) gmail com

    ❤️❤️❤️❤️❤️❤️🌹🌹🌹🌹🌹

    Doris Bowen

    ReplyDelete

Thanks for stopping by! I love reading your comments and try to reply to all of them via email. If you don't receive an email reply from me, check back here.