ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • HubPages Tutorials and Community

Make Recipe Cards Using Advanced HTML Tables

Updated on July 29, 2013

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

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

Head First HTML with CSS & XHTML
Head First HTML with CSS & XHTML

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

Color Examples

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.

Pink (#FFC0CB)





Light Steel Blue (#B0C4DE)





Plum (#DDA0DD)





Examples of Background Images

For your recipe cards

Example 1





Example 2





Example 3





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.

Need Help?

    0 of 8192 characters used
    Post Comment

    • profile image

      circle7ranch 4 years ago

      I can't wait to try this out -- I do have one question though. I like the speckled paper backgrounds you show at the end of the lens. I am unsure how to add these into the template code provided. I see how you can change the background colors, but are these images?

    • SJMurphy LM profile image

      SJMurphy LM 5 years ago

      Thanks so much for this :) It's so helpful to have this for future lenses! Great lens!

    • microfarmproject profile image

      microfarmproject 5 years ago

      That is very cool. I will have to read it over again to absorb it, and give it a try! Thanks!

    • bilafond lm profile image

      bilafond lm 5 years ago

      This is lot of information I will definitely visit again and try a dry run and learn it a couple of times. But thanks a lot Tam.

    • bilafond lm profile image

      bilafond lm 5 years ago

      This is lot of information I will definitely visit again and try a dry run and learn it a couple of times. But thanks a lot Tam.

    • MissionBoundCre profile image

      MissionBoundCre 5 years ago

      A lot of information for a newbie. Will visit several times to glean alittle at a time

    • profile image

      sherioz 6 years ago

      Thanks so much for this. This gave me an idea for how to do a printable instructions card another way. I've used it on one of my new lenses and put up the "how to" on squidu. You know what - I think I will do a lens on it first.

    • Elle-Dee-Esse profile image

      Lynne Schroeder 6 years ago from Blue Mountains Australia

      Really nicely done! Blessed

    • ForestBear LM profile image

      ForestBear LM 6 years ago

      Fantastic lens, thank you so much for the tips. Just bookmarked it.

    • profile image

      WallpaperMan 6 years ago

      nice to read, thanks)

    • Linda Pogue profile image

      Linda Pogue 6 years ago from Missouri

      Now I want to go back and update my recipe lenses. More work! LOL! Thank you very much. This is deeply appreciated!

    • itsmuzza2011 profile image

      itsmuzza2011 6 years ago

      wow ill be trying some of these out for sure, many thanks great lens / help

    • John Dyhouse profile image

      John Dyhouse 7 years ago from UK

      great lens, I hope that I will be able to apply this to some of my recipe lenses

    • spunkyduckling profile image

      spunkyduckling 7 years ago

      Very creative :0 Thanks..I'll be sure to try these some time.

    • spunkyduckling profile image

      spunkyduckling 7 years ago

      Very creative :0 Thanks..I'll be sure to try these some time.

    • Chocolatealchemy profile image

      Chocolatealchemy 7 years ago from London, United Kingdom

      I was reading a lens by Sojourn HTML Borders Backgrounds and she recommended your lens - synchronicity really does work! Your lens is perfect as I have been wanting a more elaborate design to showcase my recipes. You've made a fabulous lens with all the information, tools and tips I need - thank you so much for sharing this.

    • profile image

      DARdreams 7 years ago

      Thanks for the great ideas! I make lots of recipe lenses and this will really spice them up!

    • lemonsqueezy lm profile image

      lemonsqueezy lm 7 years ago

      IO will definitely use this recipe card idea in the future. This is a great lens!

    • athomemomblog profile image

      Genesis Davies 7 years ago from Guatemala

      Really cool lens and very helpful! I don't make a lot of recipe lenses, but I really like this idea for when I do! I'm also going to be blogging this on Thanks!

    • clouda9 lm profile image

      clouda9 lm 7 years ago

      Wowsa find this morning...found ya on Google! Thank you for this code and all your hard work showing us how to make the coolest looking recipe cards for our lenses. Using on my new Rocket Mom lens for Quick Molasses Cake...yummy!

    • purplelady profile image

      purplelady 8 years ago

      Thank you, Thank you. I hate html, but I love copy and paste. This lens is wonderful . If I were a Squid Angel, I would drop blessings all over you. Since I am not, I will have to give you 5 recipe cards. I wanted to use on my Driftless Market lens; I did and it worked like a dream. Need to figure out the html color codes; but first things first. I was thrilled Wanted to be able to show you:

    • SoyCandleLover profile image

      BW Duerr 8 years ago from Henrietta, New York

      Love, love it, USED it. :D 5 stars, Fav and credited on my Turtle Cupcake recipe. Thanks so much!

    • rubyandmahoney profile image

      rubyandmahoney 8 years ago

      I love this recipe card format and am trying it out for the first time!

    • EditPhotos profile image

      Edit Photos 8 years ago from Earth

      I don't have any recipe lenses - but I am very impressed with how you made this easy to use with great snippets of code! 5**** and an angel blessing

    • mschuerer profile image

      mschuerer 8 years ago

      I have a recipe lens in draft and this lens is a major help with formatting it! Thanks so much.

    • Sylvestermouse profile image

      Cynthia Sylvestermouse 8 years ago from United States

      This is really awesome! I hate that I have not seen this lens before now. I have written several recipe lenses now and I tried to figure out how to create this format myself. Thank you for showing me the error of my ways. Perhaps, after Christmas, I will go back to those lenses and convert them:)

    • Macs LM profile image

      Macs LM 8 years ago

      [in reply to Jimmie] It took me awhile to figure out how to do it, but there are now download links!

    • ZenandChic profile image

      Patricia 8 years ago

      I don't know if I can figure this out. I know html but this is complicated. I will see if I can do it. Thank you for all your work of showing people how on this lens

    • justduky lm profile image

      justduky lm 8 years ago

      WOW. Loved your lens. I make homemade dog biscuits and this recipe card is PERFECT for my lens. I'm actually updating it this week with a new recipe. Can't wait to try this technique. Thank you so much for sharing. Happy cooking!

    • jimmielanley profile image

      Jimmie Lanley 8 years ago from Memphis, TN, USA

      Fantastic tutorial! I love the rounded corners with the tab. Very authentic looking.

      One tip -- provide a printable graphic or PDF of your recipe. LOTS of visitors will click it.

    • profile image

      anonymous 8 years ago

      This will be so helpful with recipe lenses. Thanks for sharing. 5* & bookmark.

    • Laddoo LM profile image

      Lloyd Pinto 8 years ago from Mumbai

      Great lens! I am going to be using this code for a few of my lenses!!

    • Mickie Gee profile image

      Mickie Goad 8 years ago

      Wonderful instructional lens. Five Stars from me. A bookmark, too!

    • AppalachianCoun profile image

      AppalachianCoun 8 years ago

      Wow, thank-you for the great info and tips. Fantastic lens. 5 stars*****

    • profile image

      kimmanleyort 8 years ago

      You have done an excellent job presenting this. Wonderful!

    • profile image

      Sojourn 8 years ago

      Girl, you're brilliant! Going to add this to the featured lens module in my HTML lens. I learned something new and I love it!

    • Mihaela Vrban profile image

      Mihaela Vrban 8 years ago from Croatia

      Excellent lens! Love the code too! Blessed by an Angel!

    • LakeMom profile image

      LakeMom 8 years ago

      GREAT LENS! Thanks for the info! You make it seem easy!

    • profile image

      CleanerLife 8 years ago

      That's a clever code!

    • KathyMcGraw2 profile image

      Kathy McGraw 8 years ago from California

      Wow Tam, I'm totally impressed! I just might try this, but have to do it when my frustration level is at it's lowest, as code stuff makes me crazy. Thanks for the Tutorial :)

    • profile image

      bdkz 8 years ago

      WOW this is cool! 5 Stars and a Squid Angel Blessing! Thanks for sharing this with us.

    • profile image

      boutiqueshops 8 years ago

      Great stuff! This is amazing ~ thank you for all the hard work you put into making this to share with everyone~

    • ctavias0ffering1 profile image

      ctavias0ffering1 8 years ago

      That is really nicely done, I guess you could use the same 'recipe card' style just as easily for craft projects. 5*