ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

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


      6 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 

      6 years ago

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

    • microfarmproject profile image


      7 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 

      7 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 

      7 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


      7 years ago

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

    • profile image


      7 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 

      7 years ago from Blue Mountains Australia

      Really nicely done! Blessed

    • ForestBear LM profile image

      ForestBear LM 

      7 years ago

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

    • profile image


      7 years ago

      nice to read, thanks)

    • Linda Pogue profile image

      Linda Pogue 

      8 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


      8 years ago

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

    • John Dyhouse profile image

      John Dyhouse 

      8 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


      8 years ago

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

    • spunkyduckling profile image


      8 years ago

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

    • Chocolatealchemy profile image


      8 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


      8 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 

      8 years ago

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

    • athomemomblog profile image

      Genesis Davies 

      8 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 

      9 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


      9 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

      Beth Webster-Duerr 

      9 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


      9 years ago

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

    • EditPhotos profile image

      Edit Photos 

      9 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


      9 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 

      9 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 imageAUTHOR

      Macs LM 

      9 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


      9 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 

      9 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 Quick 

      9 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


      9 years ago

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

    • Laddoo LM profile image

      Lloyd Pinto 

      9 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 Gee 

      9 years ago

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

    • AppalachianCoun profile image


      9 years ago

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

    • profile image


      9 years ago

      You have done an excellent job presenting this. Wonderful!

    • profile image


      9 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 

      9 years ago from Croatia

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

    • LakeMom profile image


      9 years ago

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

    • profile image


      9 years ago

      That's a clever code!

    • KathyMcGraw2 profile image

      Kathy McGraw 

      9 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


      9 years ago

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

    • profile image


      9 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


      9 years ago

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


    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

    Show Details
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
    ClickscoThis is a data management platform studying reader behavior (Privacy Policy)