Taking it to a table — a blogging tip

I’ve been working on my blog’s organization. First it was the drawers in the kitchen, then my clothes closet, and now my blog. I’m in one of those, as my daughter used to say when she was young, “organize it up” moods.

I’ve been working on my menu pages (tabs across the top), in particular on my “Places” page. The drop-down menu was getting too long and bulky so I categorized things into USA cities, International, and added a National Parks page.

My Yellowstone post was the first in what I hope eventually becomes my series of posts about the National Parks we have visited, and will visit in the future.

Do you have any you can recommend?

I’ve been using tables to  keep things organized. So I thought I’d share with you how to do that.

First you have to find and use the “text” tab on the edit post screen at the top of the menu bar. I explain this in n a post last year,  Fun with fonts.

For a table, this is all you need ( I keep it in a word document where I can copy it from and then paste it here. It’s just a lazy woman’s short cut.):

<table border=”1″>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Think of it as a symmetrical sandwich. Or paired parentheses. In html when you have a command or instruction, it is typically enclosed in <>. I talked about how to do this with fonts in  Fun with fonts.

Each command needs a closing command. So they come in pairs: an “<em>” will italicize the words that follow it, ad infinitum until you add the closing command “</em>”, which is simply the basic command preceded by a “/”. I explain this idea more thoroughly in Fun with fonts.

If you look at the html for a table, you see the “<table>” command at the top and it’s mate at the bottom “</table>”. (You also see a specification for the table border at the top). Then you have the table body “<tbody>”, the row “<tr>”, and the cell “<td>”. They all have closing commands that are nested together, like parentheses.

Right now I have only one row <tr> in the table. It has two cells <td>. And once I type (or paste) it in the “text” window, it will look like this (without the words):

First cell in one row

Second cell in one row

If I want more cells across the page, I just add “<td> </td>” inbetween the <tr> and </tr> in the code above.

<table border=”1″>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

cell one

cell two

cell three

cell four

I typed the words that appear in each cell in between the <td> and </td> while I was working in the “text” editing window. But once you have the table set up, you can see the lines for it in your “visual” view. Then you can place your cursor inside a cell and type or place pictures as you please. My only caution about pictures in tables is that if they are too large, they will blow out the table borders and not work. I often use “thumbnail” or resize the photo to be 150, 200, or 250 pixels wide if I want to use one in a table. Read my post about putting pictures on WordPress.

If you want more rows, you add them with the number of cells you are using in between. So for the above table, if I wanted to add a row, I would need to add

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

for each row I wanted. This all has to be before the closing </tbody> and </table> commands.

I have some good examples of multi-row, two-cell tables on my Birds and Deer pages under the Wildlife tab above.

I hope you’ll give it a try and let me know how it works. Feel free to send me your questions if you want to do this and get stumped.

Cheers.

From Yellowstone post. Click on picture to see larger image.