Wednesday, November 4, 2009

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="http://1.bp.blogspot.com/_W-3mdqA0N_s/SWojXXYXYjI/AAAAAAAABIA/jRLJIzm2VFI/s400/conversation2.jpg"> <br>
<img src="http://3.bp.blogspot.com/_W-3mdqA0N_s/SWojXW3xwCI/AAAAAAAABII/NUZ8jOThd1c/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.)

No comments:

Post a Comment