How do I format recipes on my blog?

Reader Question:
I have trouble with formatting recipes and getting the columns lined up. I usually do several lines of ingredients and amounts and hit return.  Then I will highlight the ingredients and amounts and click on the bullet feature and then un-do it.  Then is when the ingredients come together, but they are not aligned!  What am I doing wrong?

Melanie’s Answer:

It doesn’t sound like you’re doing anything wrong. There just isn’t a great way to format some things without specific HTML (like that for a table, which I’ll show you in sec). Since you want to format the ingredients of recipes, I think you have a few choices.

1. Instead of trying to format the list with a bulleted list, you can simply type the amount of the ingredient, hit the space bar, then type your ingredient (which is how most recipe sites I’ve visited do it). Example:

10 roma tomatoes
1 yellow onion
1 lime
1 bunch fresh parsley
1 jalapeno pepper

2. If you like the simple typed list above, but want it indented, you can do that without a bulleted list. Just type your list, highlight it, then click the blockquote button in your editor. It looks like this: Your list will look like this:
   

   10 roma tomatoes
   1 yellow onion
   1 lime
   1 bunch fresh parsley
   1 jalapeno pepper

   It’s a very subtle difference from the list in #1 above, but you should notice it’s indented a little. NOTE: Your blockquotes will likely look different than mine because my template automatically adds the gray color to the text and the line to the left as part of the formatting. Your template will likely just indent your text.

3. If that’s not what you want, you can implement an HTML table. I’ll be honest with you: the method above is easier, especially if you don’t have experience with HTML. Putting a table together with HTML is easy, but you have to keep track of what you’re doing or the cells won’t line up properly. Here’s what your ingredients list might look like with a simple table:

1	can tomatoes
1	bunch parsley
1	yellow onion
1	lime
1	jalapeno pepper

The HTML for that table looks like this (notes in red just tell you what the HTML is doing and shouldn’t be used in the HTML you write for your table):

<table> signals the beginning of the table
<tr> signals the beginning of a table row
<td>1</td><td> cantomatoes</td> <td> signals the beginning of a table cell; </td> signals the end of that cell. You can have as many table cells (<td></td>) on a row as you like.

</tr> signals the end of that table row
<tr><td>1</td><td>bunch parsley</td></tr> (repeated from above)
<tr><td>1</td><td>yellow onion</td></tr>
<tr><td>1</td><td>lime</td></tr>
</table> signals the end of the table

As you can see, there’s not a lot of difference between a basic table and simply typing your ingredients. You can adjust the padding of each cell (the white space around the cell; it makes it appear there is more space around each table cell) to get the table to look just right, but it takes some tweaking and experimenting to figure out what works for you. To learn how to make an HTML table, please see the W3 Schools Tutorial on HTML Tables.

photo credit: Leo Reynolds