Make Recipe Cards For Your Site Using Advanced HTML Tables

Before you start to code your html for your table, you need to decide how you want it to appear once it's finished.

I have found the easiest way to do this is on a piece of paper; you will need to decide what works best for you.

Once you have the general layout decided, it's time to move on to the next step.

To understand how to code the html, you need a general understanding of the basic table commands.

<table> - All Tables start with this basic command.
<tr> - Table Row.
<td> - Table Data. Information that is entered into individual table cells within each table row.

All commands will have a beginning and closing tag.

Table cells can span across more than one column or row. The attributes COLSPAN ("how many across") and ROWSPAN ("how many down") indicate how many columns or rows a cell should take up.

Table Generator for Squidoo Lenses is a nifty little tool for converting your html table code into a block of code that can be used on your lenses.

Underneath the preview is the block of code you need. You will need to copy it and then paste it into a text module.

I copy the code that I'm given from the Table Generator and paste it into a text document to make changes to the appearance.

Note: Save your work often!

Based on the preview that I was given for this table from the Table Generator, I determined what changes I wanted to make to it.

Immediately, I knew that I wanted to add a background color for my recipe card.

It needed rounded corners for the look I wanted, so it was back to the drawing board again to determine which ones needed it. Not all of the corners did and my coding would need to reflect this.

I also needed to clean up the spacing and increase the font size.

Once you've modified the code, it's time to see what your finished project looks like.

This recipe card is the same block of code you see above pasted into a Text Mod.

 Apple Brown Betty

 2 c. sliced apples
 1/2 c. brown sugar
 1/2 c. bread crumbs

1/2 c. chopped nuts
1/2 tsp. cinnamon
2 tbsp. butter

Place a layer of apples in a greased baking dish. Mix dry ingredients together. Sprinkle apples with the mixture. Alternate layers until all is used, ending with the crumbs on top. Dot with butter. Cover and bake at 350 degrees for 45 minutes. Uncover to brown. Serve warm or cold with cream.