How to Build and Use TABLES in Your Blog

Fans
18155
Followers
13500
Subscribers
6413
April
30

Blog TablesAs promised in an earlier tip, I wanted to write a post dedicated to creating tables in your blog.  You would be surprised at how much I use this valuable tool to get things to look just right and maximize my space on sidebars, footers and even in posts.  What you can accomplish with the use of tables is amazing and I think it is a tool that every blogger should be familiar with...so here we go!  (As a matter of fact, I used tables extensively in this blog post so that I could get my code and results sections to line up side by side!)

Today, I want to explain to you how to build a table such as the one I have displayed in my footer region, entitled "My Blog is Listed Here".  The function of this table is to display all of my mini-buttons in an attractive and SPACE SAVING way.  I will start out showing you how to create a basic table and then perhaps in a future post, we can discuss how to jazz it up a bit.  Decide where you'd like to put your table and then start with the following code:

<table> (This is the beginning of my table)

</table> (This is the end of my table)

This denotes that you are creating a table.  Next, you must add a horizontal row to your table, which adds the following code:

<table>

<tr>   </tr> (This is row 1)

</table>

Now I have a table with one row of information.  Next, I want to add cells to my row...I will start with two cells here.

<table>

<tr> (This is the beginning of row 1)

<td></td> (This is cell 1)

<td></td> (This is cell 2)

</tr> (This is the end of row 1)

</table>

Now, as long as I have the table shown without a border, all of this that we have done will look "invisible" on our page.  So that I can show you exactly what we are creating, I am going to add a  very simple border to our table by inserting the following addition in the table portion of our code.

Code


<table border="1">

<tr>

<td></td>

<td></td>

</tr>

</table>

Let's also add a background color to our table so that we can see it better. There are many ways to do this, either by listing the color's name or by using its number. I refer to this website frequently so that I can get the exact colors I want: CSS color chart Next, you might also want to specify the dimensions of your table.  You can do that by adding height and width tags.  I will add a width one in the following example so that you can see how it looks:

Code

<table border="1" bgcolor="#8A2BE2" width="200">

<tr>

<td></td>

<td></td>

</tr>

</table>

Now, let's begin to add some content to our table's cells. In cell 1, I'm going to add a small image of a rose and in cell 2, I'm going to add some text. Here's how it's done:

Code

Result

<table border="1" bgcolor="#8A2BE2" width="200">

<tr>

<td><img src="http://www.floral-

directory.com/flower.gif"/></td>

<td>Picture of a rose from The Floral Directory</td>

</tr>

</table>

Picture of a rose from The Floral Directory

Because I would like this picture much smaller, I'm going to set the dimensions of the height to something more manageable. I am also going to add another row to my table that also contains 2 cells containing text and an image.

Code

Result

<table border="1" bgcolor="#8A2BE2" width="200">

<tr>

<td><img src="http://www.floral-directory.com/flower.gif"/></td>

<td>Picture of a rose from The Floral Directory</td>

</tr>

<tr>

<td>Picture of a rose from The Floral Directory</td>

<td><img src="http://www.mommylivingthelifeofriley.com/

wp-content/uploads/2010/04/flower.gif" alt="Floral Directory" height="100" /></td>

</tr>

</table>

Floral Directory Picture of a rose from The Floral Directory
Picture of a rose from The Floral Directory Floral Directory

Finally, most people like their items to be centered inside of their cells. This is an easy thing to accomplish too. Depending on whether you'd like to horizontally align your items to the left, right or center, use the following align code. If you'd like your items to be vertically aligned as well, you can accomplish this using the valign code with the options top, middle or bottom. I normally input this code into the (row) region because then it will apply to the entire row, but you can also input this into the (table) region or even the (cell) region to specify exactly how your contents should be aligned. I will put this code into the (row) region in the first row and will input the code into the (cell) regions in the second row so that you can see the different options you have available.

Code

Result

<table border="1" bgcolor="#8A2BE2" width="200">

<tr align="center" valign="middle">

<td><img src="http://www.floral-directory.com/flower.gif"/></td>

<td>Picture of a rose from The Floral Directory</td>

</tr>

<tr>

<td align="left" valign="top">Picture of a rose from The Floral Directory</td>

<td align="right" valign="bottom"><img src="http://www.mommylivingthelifeofriley.com/

wp-content/uploads/2010/04/flower.gif" alt="Floral Directory" height="100" /></td>

</tr>

</table>

Floral Directory Picture of a rose from The Floral Directory
Picture of a rose from The Floral Directory Floral Directory

There you have it! Your introduction to creating basic tables is now complete. Stay tuned for an upcoming addendum to this tutorial which will get into how to combine rows and columns as well as jazz up the borders, text sizes, etc. Hope you have fun applying these techniques to your own blog design! If you have any questions, please leave me a comment here and I will do my best to help! Happy Blogging!

 

HTML, XHTML and CSS All-In-One For Dummies HTML, XHTML and CSS All-In-One For Dummies
Average Rating:
List Price: $39.99
Sale Price: $5.84
HTML and CSS: Design and Build Websites HTML and CSS: Design and Build Websites
Average Rating:
List Price: $29.99
Sale Price: $13.50

 

I'm a former 7th grade Science teacher turned stay-at-home mom that lives in Houston, Texas. I am married to my college sweetheart and have a beautiful daughter named Riley, who definitely keeps me on my toes! I am also involved in starting a small business which would both manufacture and sell an invention that I've patented, called Toothpaste 2 Go. I love interacting with my readers and hope to learn as much about you as you learn about me!

Melissa
Melissa @ Mommy Living the Life of Riley!
Add Melissa Cleaver to your LinkedIn Network
Add Mommy Living the Life of Riley to your Google+ circle

24 Responses to How to Build and Use TABLES in Your Blog!

    Amberlynn Says:

    1

    Thank you for following Fugitive Firefly and Wild Rose! Following you back :-) Hope you have a fantastic day!

    2

    Hey! Thanks for following me! I’m pretty sure I just put you at 200! :-)

    Tonya Says:

    3

    Thanks for the tip! I’ll have to come back and check this out. Your blog looks great. I’m following you now too.

    Halley Says:

    4

    Following you back from FF! Happy Easter!

    Jennifer Says:

    5

    Thanks for this cool tip and stopping by my site. I’m already a follower & facebook fan and enjoying your site :-)

    Jessica Says:

    6

    OK, I’m pretty sure that just went right over my head.
    Following back. :-)

    Maria Says:

    7

    Following back from FF!
    .-= Maria´s last blog ..Guerilla Fluff =-.

    Kat Says:

    8

    Thanks for visiting Black Kats Design and following me. Back at you! I love the tip about making your graphics load faster. Off to change HTML code!
    .-= Kat´s last blog ..Belief =-.

    Tina Says:

    9

    What great information! I think your blog looks great and can’t wait to explore it more. Thanks for coming by mine as well!

    10

    Thank you so much for posting all of these tips! I am going to do my best to try what you’ve done with your footer, e.g. the scrolling tables.

    I really appreciate your taking the time to share with us what you’ve learned. I’m also very impressed that you’ve been able to teach yourself all of these nifty tricks!

      Melissa Says:

      11

      Thanks so much for stopping by and thanks for all of the kind words. When you start working on your tables, if you get stuck, please let me know and I will do my best to help! Have a great day!

    Briana Says:

    12

    I don’t think my brain will ever get this stuff. I look at it and instantly start to blank out. I’ll have to read your post a million times while I try to build a table and them maybe it will work. Thanks for sharing how to do this. I look at blogs and wonder where they got their template but I guess they are really making their own tables. Very interesting!

      Melissa Says:

      13

      Believe me I know what you mean! I had many, many nights of blanking out before I finally started to get it. Even now, I do a lot of trial and error before I figure out how to get it just right! The good news is that once you get familiar with this stuff, you can do basically anything you want to on your blog…and once you learn it, it tends to stick! Good luck! If you have any questions, comment back here and I’ll do my best to help!

    Nicole Says:

    14

    Thanks for stopping by my blog. You have some really good things going on over here. I will be back because I want to wotk with this table. When I first came to your blog I was so impressed with the layout. NICE!!!!!!!!

    Tracyo Says:

    15

    Thanks for the great info! Now a follower over from TPRP. I will try this when my kidlets go to bed :O)

      Melissa Says:

      16

      Hi Tracy! Thanks so much for the follow! If you get stuck when you try this or if something’s not working right, feel free to contact me again and I’ll do my best to help! Have a great weekend!

    nicole Says:

    17

    ok, so this WILL work say for the stats like you have on your left side bar, or if I wanted to reformat my blog to 2 column versus 3 (like it is now), I could reduce the space my favorite blogs are in?

    THANKS

      Melissa Says:

      18

      Yes, I use tables everywhere on my blog…in my sidebar and footer areas especially, and even in my posts so that my pictures will line up next to the data I want. If you’re asking though whether you can change your blog’s layout from 3 columns to 2 using tables, I’m afraid that can’t be done. You must actually reprogram the layout of your blog using php code in order to do that. Tables are a wondrous thing for you can really maximize your blog space and make things look much more appealing by using them. If you get stuck and need some help, please let me know. Have a great day!

    Danielle Says:

    19

    This is really useful information for me. Thanks, Melissa!

    21

    Tables can be great in many circumstances but are not the standard for web design and can actually hinder your blog by making it slower to load, harder for readers to decipher, etc. If you want to learn how to design your blog correctly and efficiently, learn CSS (of course, HTML). Php is for your wordpress programming, not so much the design of the blog.

      Melissa Says:

      22

      That’s true…this post was meant to help those figure out how to align images in posts and use their space better. I’ve tried using CSS to do that and it seemed way too complicated for such a simple task. That’s when I use my table-building skills to help me out! :-)

    Leslie Galloway Says:

    23

    My hubby was just trying to explain this to me… seeing it helps. Thank you.

Please Leave a Comment

Rate this Post

"Say what you mean and mean what you say, but don't say it mean." Thanks! :)

CommentLuv badge

More in Tips, Techniques, How-Tos & Advice
Summer Slide
Don’t Let Your Kids Experience Summer Slide ~ Prevent Learning Loss with These Helpful Tips!

Working parents are already lining up child care plans for the summer. While they’re at it, educators say all parents of school-age children should also plan for preventing the dreaded...

Close