Make Recipe Cards Using Advanced HTML Tables
Learn how to make recipe cards using html tables
This week our assignment for Rocket Moms was to make a Fall Recipe Lens. I decided to be creative with my design of it and went in search of recipe card template to use.
I wanted to make a table in the shape of a recipe card.
Understandably, it is going to be more complex than your average table. While I have a decent understanding of the basics, I thought it would be easier to use a template as a guide.
I couldn't find one anywhere and several search terms were used. The closest I came was to find a template that could be printed out. I found several nice ones, but nothing that I was looking for.
It was then that I sat down to see what I could come up with. Hopefully someone else will find this helpful!
Buy at AllPosters.com
Lay Out Your Table
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.
The HTML Code
To understand how to code the html, you need a general understanding of the basic table commands.
- All Tables start with this basic command. - Table Row.- 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.
Learn More About HTML
In this book, pictures and step-by-step instructions explain how to build great-looking, standards-compliant web sites.
Table Generator - For Squidoo Lenses
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.
Modify The Appearance - What look are you going for?
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.
After Modifications - Your completed recipe card
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.
The Template Code
Recipe Card HTML is licensed under: Creative Commons Attribution 3.0 United States License.
Recipe Title Goes Here
Instructions Go Here
Here are some blank recipe cards that you can use however you'd like.
If you want to use the code above and have a card of a different color, it involves changing the color 4 different places in the code. I recommend using HTML Color Names.
Light Steel Blue (#B0C4DE)
Examples of Background Images
For your recipe cards
Background credit: Flickr
Holiday Recipe Card Templates
Here you will find a variety of holiday themed recipe card templates that you can download and modify to suit your own needs. After creating the lens Recipe...
Rocket Moms is a gathering of the smartest women on the web, working together to make Squidoo lenses (and a whole lot more).
See the recipe cards in action!
Apple Brown Betty
Some of my fondest childhood memories are of my Grandma and I in the kitchen of her house, preparing her scrumptious Apple Brown Betty. I remember spending ...
I tried to explain the steps I took when making my recipe card, but it is entirely possible that I missed something.
If you are unsure how I did something, feel free to come back and ask me about it. I'll do my best to talk you through it.