• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Live Laugh Rowe
  • About
    • About Me
    • Contact Me
    • The Rowes
    • In The Press
    • PR & Advertise
    • Privacy Policy
    • Resources
  • Recipes
    • Appetizers/Snacks
    • Beverages
    • Breakfast
    • Desserts
    • Main Dish
    • Side Dishes
    • Sandwiches
    • Skinny Dishes
    • Slow Cooker
    • Soups/Chilis
    • Weight Watchers
  • Crafts & DIY
    • Crafts
    • Decor
    • DIY Projects
    • Fall Projects
    • Holidays
    • Home Projects
  • Printables
  • Shop My Home
  • Facebook
  • Instagram
  • Pinterest
  • Twitter
Subscribe
Live Laugh Rowe

Live Laugh Rowe

A lifestyle blog that shares crafts, recipes, tutorials and life's moments.

  • About
    • About Me
    • Contact Me
    • The Rowes
    • In The Press
    • PR & Advertise
    • Privacy Policy
    • Resources
  • Recipes
    • Appetizers/Snacks
    • Beverages
    • Breakfast
    • Desserts
    • Main Dish
    • Side Dishes
    • Sandwiches
    • Skinny Dishes
    • Slow Cooker
    • Soups/Chilis
    • Weight Watchers
  • Crafts & DIY
    • Crafts
    • Decor
    • DIY Projects
    • Fall Projects
    • Holidays
    • Home Projects
  • Printables
  • Shop My Home
  • Facebook
  • Instagram
  • Pinterest
  • Twitter
Subscribe

{DIY} HTML Tables

01/29/2012 · Kelly Rowe · 18 Comments

This post may contain Amazon or other affiliate links. As an Amazon Associate I earn from qualifying purchases.

Pin
Share
Tweet
Share

Oh happy day!!  I am so excited to be sharing this tutorial on how to make your own html tables with all of you.  For some, it may be such old news… but for others, this might be your lucky day {smile}.  Over the past few weeks, I have learned an ENORMOUS amount of bloggy things.  It’s been an incredible ride of learning how to tweak my own html, create a button in Adobe Photoshop, get the html, resize buttons and the list goes on.  I am a firm believer in paying it forward.  There are a couple of my new bloggy friends {Lish and Emily} who’ve answered a bunch of questions for me and my curious mind.  Not only is it appreciated, but it makes me want to help some of you answer a few lingering questions.  If you’re new to the bloggy world — it’s a bit overwhelming at times.

Have you ever wanted your ads, buttons or advertisements to line up and look a little more orderly?  I did!  I’m a large serving of perfectionism with a side of anal retentiveness {giggle}.  So, nothing short of perfectly aligned ads, buttons and so forth was simply unacceptable.  My husband to the rescue!  Little did I know how much he knew about html.  Kudos to his patience with my learning curve — and answering an ungodly number of questions.  So, without any more rambling on my part, here is the scoop on how to create html tables, courtesy of my hubby!

DIY HTML TABLES

The Introduction

First, let me start off by saying how bummed I am that Kelly made me take out all my references to nerds, Family Guy, and William Shatner’s acting. In all honesty, I do understand removing Family Guy and William Shatner, but a computer-related post without a nerd joke is almost unforgivable. Oh, well, such is the love-hate relationship a writer has with an editor.

The Four Steps to Creating a Table

HTML code is made up of tags. There is an opening tag followed by a closing tag. Closing tags are identical to its corresponding opening tag except there is a “/” included in the closing tag. That’s about all the HTML code you need to understand to get started on creating tables.

  1. The first step is to define the table itself using the <table> tags. You do this by typing the opening and closing table tags. The border = “1” places a thin border line around the table. If you want it removed, set the number to 0; if you like the look but want the border thicker, increase the number.

    <table border = “1”>
    </table>

  • The next step is to define the table body using the <tbody> tag within the table tags. Nothing special to note here. Again, we have an opening tag followed by a closing tag.

    <table border = “1”>
    <tbody>
    </tbody>
    </table>

  • The next step is to define the table row using the <tr> tags. These opening and closing tags are placed within the table body tags.

    <table border = “1”>
    <tbody>
    <tr>
    </tr>
    </tbody>
    </table>

  • Finally, at least from the standpoint of all the necessary table tags required, we define the table column using the <td> tags. These tags go within the table row tags.

    <table border = “1”>
    <tbody>
    <tr>
    <td></td>
    </tr>
    </tbody>
    </table>

You’re done. Well, not quite…

Adding Additional Columns and Rows

In the steps above we defined the structure of a table and created only only one row with one column, or cell. To define more columns per row, you would add additional <td> tags in between the <tr> tags.

<table border = “1”>
<tbody>
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
</tr>
</tbody>
</table>

Similarly, if you want to add more rows, you would add more <tr> tags between the <tbody> tags, but you have to place them either before or after the previous table row tags. Be very careful here not to place table rows within table rows, or intermingle your opening and closing tags.

<table border = “1”>
<tbody>

<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
</tr>

<tr>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
</tr>

</tbody>
</table>

Here is how the table code above looks when parsed by the web browser.

Row 1 Column 1 Row 1 Column 2
Row 2 Column 1 Row 2 Column 2

 .

The Finishing Touches

The last thing to do is replace the “Row x Column x” text with you own hyperlink code to a picture, etc. A cell will expand to accomodate the size of your largest jpg. This could result in a less than desirable look if you mix sizes. The safest thing to do to ensure a clean look is to keep the dimension of each picture the same using height and width options in the link as shown below. I’ve used “125 x 125” to create a square jpg; you can use “125 x 150”, or whatever you want, but just make sure all jpgs are “125 x 150.”

Note: You can resize a “150 x 150” down to “125 x 125” because the dimension retain the same height to width ratio (i.e., 150/150 = 1 and 125/125 = 1). You will distort an image if you resize a “150 x 150” down to “125 x 150” because the height to width ratio changed (150/150 = 1 and 125/150 = 0.83).

<a href=”https://www.edenministry.org/”><img src=”https://www.google.com/logo.jpg” height=”125″ width=”125″/></a>

Once you have your link and have it sized, place it between the <td> and </td> tags like so…
<td><a href=”https://www.edenministry.org/”><img src=”https://www.google.com/logo.jpg” height=”125″ width=”125″/></a></td>

…and if all went according to plan, your table should will resemble the one below as you fill up the columns with jpgs (again, if you set the border to 0 you will not see the lines). If you want your table centered, include the align=”center” option in the table tag after the border option to look like this: <table border = “1”; align=”center”;>.

As long as each picture has the same dimension, the look of the table will be clean with no extra effort on your part. However, as you get more comfortable dealing with tables, you will be able to mix dimensions and organize them to create a varied, but clean, look.

Check out Part II to this post {here}.
Subscribe to Updates | Like on Facebook | Follow on Pinterest
keep living and laughing, friends.
Pin
Share
Tweet
Share

Related Posts

Wall Paneling Pictures

DIY Wall Paneling Ideas

25+ DIY Pineapple Projects and Printables for you to enjoy!

25+ Pineapple Projects and Printables

Outdoor Serving Stations to Build this Weekend

{DIY} HTML Tables // Part II

25 Fabulous Handmade Gift Ideas

25+ Doily Craft Ideas. From wreaths to chandeliers, these paper doily crafts are truly inspirational. livelaughrowe.com

25+ Doily Craft Ideas

Technical Jibber Jabber, Tips and Tricks

Previous Post: « We Are Family… {and a free printable}
Next Post: Popcorn Cupcakes and Trivia »
about kelly

ABOUT KELLY

A DIY fanatic, Kelly shares her journey through her blog, Live Laugh Rowe, where she showcases her recipes, tutorials, crafts, home projects, and all things DIY. This East Coast Girl at heart believes family is number one as she finds the perfect balance of being a daughter, wife, sister, entrepreneur, writer and woman of God. Be sure to follow along as she shares her passion for life, love and family! Read more...

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recipe Rating




Comments

  1. Cinthya says

    01/29/2012 at 10:08 pm

    Wow, these are awesome tips. Thanks for sharing. I'm printing this post for sure. New follower from Sunday Social btw.

    Reply
  2. Deana says

    01/30/2012 at 8:30 am

    Thank for the info…I've did a little of this but you made it so clear …pinning this on my blog info board:)

    Reply
  3. Emily @ 52 Mantels says

    01/30/2012 at 4:23 pm

    I officially love your husband. In a completely un-scandalous way. I'm working on my ads now (pick your plum is acting funky) but I've used the table for a few other sidebar items. LOVE!! SO nice and clean. And, it really is SO simple. Even for a lame-brain like me 🙂

    THANK YOU!!!

    Reply
  4. smk053078 says

    01/30/2012 at 8:02 pm

    You are the BOMB DOT COM!!! Thank you and thanks for the linky paaarty links! Whoo-hoo!!

    Because Shanna Said So Giveaway

    xo,
    shanna

    Reply
  5. Michelle@Crazy For Crafts says

    01/31/2012 at 9:08 am

    Great tips! I'm hosting a giveaway & doing some new things on my blog, so I've been trying to figure a lot of this stuff out recently as well. So glad I found your post!

    Please stop by if you have a chance! http://crazyiniowa.blogspot.com/

    Reply
  6. Lish says

    02/01/2012 at 8:55 pm

    I just discovered tables a few months back when I was working on my tutorial page!!! LOL..glad your figuring everything out, it's so much fun, you just need a lot of time to play with it 🙂 thanks for the shout out too my friend!

    Reply
  7. {Adventuresindinner} says

    02/02/2012 at 12:39 pm

    That is clear enough even for me! :0)

    Thanks so much for sharing at Pin'Inspiration Thursday, hope to see you pop by on Saturday to "Beat the Winter Blues". Have a fantastic end of the week.

    Reply
  8. very merry vintage style says

    02/03/2012 at 9:57 am

    Great tutorial. I am definitely in need of this! Going to add it to my great finds blog tips page!
    Mary

    Reply
  9. Kara at Petals to Picots says

    02/04/2012 at 2:46 pm

    This is such a helpful tutorial!!! Thanks for sharing at my party 🙂

    Reply
  10. Emily @ 52 Mantels says

    02/05/2012 at 10:31 am

    Thanks for linking this up, friend!! I'm so enjoying my purdy tables 🙂

    PS. I'm seeing you EVERYWHERE lately! You go girl!!

    Reply
  11. AmieAnn says

    02/05/2012 at 10:45 am

    Oh my.. I am soo going to have to try this.. my blog could use a little help in the facelift area! Thanks so much for sharing with the Pink Hippo party.. can't wait to see what you share next..
    p.s. Love the new look of your blog!

    Reply
  12. Aimee - ItsOverflowing.com says

    02/05/2012 at 8:39 pm

    Great tutorial!! Thanks for linking up! Just checking, did you see my Lisa Leonard giveaway yet?

    XO, Aimee

    Reply
  13. Whitney says

    02/06/2012 at 12:13 am

    Thank you for this! I am new to all of this and can't pretend that I understand it all. This will be soooo helpful!

    Reply
  14. Angie Ramirez says

    02/09/2012 at 8:34 pm

    thanks for sharing this..and linking up at create and inspire party! bookmarking this!

    Angie

    Reply
  15. cathy@my1929charmer says

    02/09/2012 at 9:10 pm

    wow, great for sharing this. I think I'll have to read this a couple time, I am such a nerd with all this. Tips like this are so invaluable! Thanks for sharing your creative inspiration at Sunday's Best Par.tay!

    Reply
  16. Sarah says

    08/14/2012 at 3:34 pm

    Now this is awesome! This is what I want to do with smaller ads and buttons and stuff, I’m gonna try it. Just curious why did you have to take the nerd references out? Is that like frowned upon. I make references to Big Band Theory all the time, I love Dr. Sheldon Cooper and I just can’t help myself. LOL. I was just curious about that. I use to watch Family Guy all the time. Not so much anymore, but it’s funny. Gotta love Shattner!

    Sarah

    Reply
  17. Claire @ A Little Claireification says

    05/06/2013 at 8:18 pm

    Your Hubs made me laugh so hard in this!! Thanks so much. This is exactly the formula I use on my “Featured” page {although I ned to fix some of the image sizes!} so I am going to try again to use it in a text box on my side bar and see what happens! All it takes is missing one “>” or ” and it doesn’t show. Love playing with these little codes and learning more.
    Because… maybe I AM a nerd! {that was for Hubs}. 😉
    Thanks so much to you both! xoxo, Claire

    Reply
  18. Jelli says

    11/17/2013 at 6:44 pm

    Using this again today. Always come back to this post for all my tables how-to! Thanks again, Kelly.

    Reply

Primary Sidebar

Looking for something?

Hey there! I’m Kelly.

I’m the author, creator, cook, and photographer behind the blog. I am so glad you’re here!  I’m passionate about life, family, and my faith. If there’s one thing I’ve learned in my journey, life is hard, but God is good.  Read More

Popular on Pinterest

Valentine Favors with cones and candy.

Footer

  • Facebook
  • Instagram
  • Pinterest
  • Twitter
  • YouTube

Looking for something?

Copyright © Live Laugh Rowe, LLC • Privacy Policy • Log in