{DIY} HTML Tables

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!

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.

 .

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.

Related Posts

DIY Wall Paneling Ideas

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