Demystifying HTML: Building Tables

I was recently fighting a battle with HTML coding to update my Tutorials page. I spent about forty-five minutes trying to figure out why my images weren't lining up, and it was just a huge mess. Thank goodness I backed up the HTML code I already had, because I just kept on making it worse and worse.  I felt like I was in a battle between Agent Perry and Dr. Doofenschmerz--except I was Dr. D and I was losing. It was sad (even sadder than the fact I sometimes watch Phineas and Ferb for fun--or the fact that I built Perry the platypus out of Playdo while I was babysitting).

As I was swearing mild profanity replacing words (BLAST! DARN!) under my breath, I realized the reason I was having so much trouble. I didn't actually know what the HTML tags meant. I had originally copied the code from a tutorial on another website--but the tutorial hadn't taught me how to build my own table, it simply taught me how to plug in the image URL's and make the provided template work. 

So, to better the blogging race, I've decided to teach you all how to make your own table of images, to your own specifications. This way you won't rely on anyone except yourself to get your tables made.

Here are the basic HTML tags you will need to know, along with descriptions of what they do.

1. To start your table, you start with the HTML tag <table border="# of pixels">.
The number you insert between the "" marks is the thickness of the border around your table.
For my purposes, I've always had a table border of zero--simply because I don't like having a border around my tables.

2. To start a row, use the tag <tr>. This stands for "table row." It's not necessary for you to know that, but I know I personally like to know what everything means because it helps me make sense of all of the HTML nonsense. I swear, it's like a foreign language; but no fear!

3. Now that you've started a row, you need to add cells. To start a new cell, use the HTML tag <td>--which stands for "table data." 

4. To add an image in your cell, you need to use the old tag <img src="image URL">. If you don't know, img src means image source (which you probably knew already, but if not, there you have it).

5. Now that you've added your image code, you need to close the cell. To do this, we use the HTML tag </td>. In HTML, a "/" indicates a closing tag--so in this case, you are simply closing the "table data" cell you made in step 3.

Next you can add more cells by repeating steps 3-5 as many times as you need.

6. To end a row, use the tag </tr>. This simply means you are ending the table row.

In order to add more rows, repeat steps 2-6 as necessary.

7. To close the entire table, just use the tag </table>

And that's it! See--it's not that bad. I hope I've saved you some trouble with this (I know I myself might have to refer back to this later, so if it doesn't help you, at least it helps me).

If you have any questions or requests for more Demystifying HTML posts, leave me a note in my new and improved comments section, powered by Intense Debate

No comments:

Post a Comment

Thank you so much for leaving me a note! I love hearing what my readers have to say--in fact, comments literally make my day.

Please be nice and don't use profanities or other negative language.