|
| LinkExchange Member | Free Home Pages at GeoCities |
|
| LinkExchange Member | Free Home Pages at GeoCities |
| Moving Text |
| Images In Cell |
| Adding A Cell |
| Adding A Row |
| Adding A Link |
| Table Background |
| Row Background |
| Cell Background |
| Great you've made it this far! Let's learn how to play around with your table. (Just in case you need to go back to the first lesson I'll put a link to table tutor 1 here. |
| Let's move some text around inside the table first. This is what you write:
<table border="3" width="100" height="100"> This is what you get:
Write this:
<table border="3" width="100" height="100"> This is what you get:
You can put your text where you want in the table by changing the code. If you want it up top change it to align="top". Want it on the bottom? Just change "top" to "bottom". |
| Now, let's try getting an image into your table. Just replace the word Comet with your image file.
<table border="3" width="100" height="100">
There you go! How's that? You're getting to be a regular html expert now! It took me several days to even get this far when I was teaching myself to do tables. So you must be doing a lot better than I ever did! |
| Now, let's make it a little bit more difficult. How about two cells? I'm going to go back to the word comet for right now and leave out the align attributes for the moment. Type this:
<table border="3" width="100" height="100"> You get this:
I would recommend that you specify the size. You don't have to but your table could really come out looking pretty funky and completely different from the way you intended it to! |
| To add more cells just keep putting in the <td>whatever you like here</td> codes till you get what you want. Of course that isn't always possible. Sometimes you want another row of cells. Wanna know how? Look below:
<table border="3" width="100" height="100"> You should have a table resembling this:
|
| Let's touch on linking inside a table really quick. It's just like putting an image in except you use the <a href=> code. Let's try it.
<table border="3" width="100" height="100">
<tr> You ought to get a link like this:
|
| Got it? Great! Let's start changing some colors around. We'll start with the entire table background. I'm going to take out the width and height right now so you won't get confused.
<table border="3" bgcolor="#3399CC">
<tr>
|
| Now, let's change the colors of each row
<table border="3">
<tr bgcolor="#AAAAAA">
|
| Now change the color of each cell
<table border="3">
<tr> You get something really colorful like this:
Boy those are terrible colors I picked! Oh! Hey! We're at the end! That's it! Did you find what you need? There is a bit more but it starts to get a little more complicated. You can do all sorts of things with a table. If you like to get fancy and you get really good at this stuff, try to make a table inside another table! Those can get scary! But once you get it down it isn't hard at all! Hope you enjoyed yourself. Let me know if you have any questions and I'll sure try to answer them! |
  |
