About "Tables and Table Data"

Yesterday I wrote up the tutorial teaching how to format a blog post using html coding to format a table and the data to go in that table. One thing I didn't explain is why you might want to use this process.

Learning to format within existing code (the existing code makes your blog look how it does, usually by using existing templates that you choose) expands your horizons. It is simply learning how to work within the bounderies you have been given.

A while ago, I wanted to create a post which had pictures on one side with words to describe those pictures in a somewhat poetic way on the other side. I had a definate way I wanted the post to look, but I needed to use html code to get it to look that certain way.

Another time I just wanted to change the background color of my post along with the text, just to get it to stand out a bit and look a little different.

By creating columns, inserting breaks, and adding a different background color I could position the pics and the words any way I wanted and give the post the exact look and feel I was going for.

Existing templates are wonderful tools, but when you want a custom look, oft times handcoding with html is exactly what is needed.

Tables and Table Data

Sorry I've let so much time go by before adding any more info. I was surprised to come back and find some new followers! Welcome!

Okay, what I'd like to do today is show you how to change the color of the background area you are working in, like I did in this post, and then add pics and words in two separate columns. We will use <br> to start a new line. Add more breaks <br> if you want more space in between. Okay, so let's learn about tables.

You learned about website body's here. Remember how we could change the background color to any color that we liked, using hexidecimal codes that start with the # sign and have 6 letter/number combinations? We are going to do that again, but instead of putting it in the body tag, we are going to put it in the table tag. It will be basically the same principle though.

So first of all, let's choose a color. I'm going to choose Spring Green for the background color, and violet for the text color.

So I start by typing:
<table bgcolor=#4AA02C>
<tr>
<td>
Then You can add pictures on this side (if you've forgotten how to add pics, review this post)

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1vwGvoQemWaz_CvXo9q_yIxP68delgrPPkwCecYP3dKj49Jb2_rjzK3VgVGnwRcWIXIjw2Xbu_E40LPVdqSvHSf-QTqM21aLm8ni-QzWpwQdOTepgQLFd9EowBa0VmC5qG-v9fX9bMDM/s400/conversation2.jpg"> <br>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmD4kmr5y3o6M16F2o3RKnOG0vXx_8hoE0czGwAgf6RI-BWEp0mX68foQX1ZirbjRbU3Yf0bf1E4sh4beIpo8jX252cCtTN8Pm0_kpzqNsD0jHKwvV2pcuveFYDW0QYDby9ioee6mfBEI/s400/eating_cereal2.jpg" >
</td>

<td>
Then add words to this side in a new table data:
<font color="#8D38C9">Weekends <br>
Sleeping late >/font<

</td>
</tr>
</table>

So it looks like this:

Then You can add pictures on this side

Then add words to this side in a new table data: Weekends Sleeping late

So the table is the big area that I've colored green. We did nothing with the table row (tr) this time, but you still have to put it in your code between the table and table data. And the table data (td) has the info and pics in it in columns. Get it?

Go have fun!
(because I didn't explain the *why* behind wanting to use tables, I wrote this new blog post today that you might be interested in reading.)