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