Table Lessons, From basic to advanced

First you need the main Table Tag, [table] and [/table]
    [table]

    [/table]
Second you need at least a Row, [tr] and [/tr]
      [table]
      [tr]

      [/tr]
      [/table]
Thirdy you need at least a Cell in the row to put things in, [td] and [/td]
        [table]
        [tr]
        [td][/td]
        [/tr]
        [/table]
Forth, we put some text in the [td] cell
          [table]
          [tr]
          [td]Im Hot, Sweet, & Sticky[/td]
          [/tr]
          [/table]
          Im Hot, Sweet, & Sticky
And Now the same Table with a border tag added to the table so we can see a border. The larger the number, the bigger the border, the smaller the number, the smaller the border, (rocket science ain't?, lol) for this table, lets use the number 3.
          [table border="3"]
          [tr]
          [td]Im Hot, Sweet, & Sticky[/td]
          [/tr]
          [/table]
          Im Hot, Sweet, & Sticky
And Now the same Table with the colored border tag added to the table.
          [table border="3" bordercolor="green"]
          [tr]
          [td]Im Hot, Sweet, & Sticky[/td]
          [/tr]
          [/table]
          Im Hot, Sweet, & Sticky
And Now lets add the width of what we want to build, lets say, 355 pixels, the width of the blog as described in the very first post.
    [table border="3" bordercolor="green" width=355]
    [tr]
    [td]Im Hot, Sweet, & Sticky[/td]
    [/tr]
    [/table]
    Im Hot, Sweet, & Sticky
Now lets add color to the main table so it wont look so bland as I teach ok? how about a lightblue with the bgcolor tag, I do like blue, hope you do also, if not, change it to a color you like...
    [table border="3" bordercolor="green" width="355" bgcolor="lightblue"]
    [tr]
    [td]Im Hot, Sweet, & Sticky[/td]
    [/tr]
    [/table]
    Im Hot, Sweet, & Sticky
And Now lets add some height, for a demonstration, lets use 100 with the height tag, if height is not specified, the table just keeps growing downward so everything your putting in it fits, but I need some height now to show you the next codes, wooohoo, slick huh?
    [table border="3" bordercolor="green" width="355" height="100" bgcolor="lightblue"]
    [tr]
    [td]Im Hot, Sweet, & Sticky[/td]
    [/tr]
    [/table]
    Im Hot, Sweet, & Sticky
    We now have one table, one row and one cell in the row
Lets now, I think, 3 cells in that row is a good idea about now, so I will put, Im Hot in the first [td] cell, sweet in the next, and sticky in the 3rd
    [table border="3" bordercolor="green" width="355" height="100" bgcolor="lightblue"]
    [tr]
    [td]Im Hot,[/td]
    [td]Sweet,[/td]
    [td]& Sticky[/td]
    [/tr]
    [/table]
    Im Hot,Sweet,& Sticky
Now the fun starts, Lets start moving things around inside of the cells, this will be by 2 different tags in the cells, the align and valign command, first table will use the align command, second table will use the valign, and the 3rd table will be a combination of both.
    [table border="3" bordercolor="green" width="355" height="100" bgcolor="lightblue"]
    [tr]
    [td align="left"]Im Hot,[/td]
    [td align="center"]Sweet,[/td]
    [td align="right"]& Sticky[/td]
    [/tr]
    [/table]
    Im Hot,Sweet,& Sticky

    [table border="3" bordercolor="green" width="355" height="100" bgcolor="lightblue"]
    [tr]
    [td valign="top"]Im Hot,[/td]
    [td valign="middle"]Sweet,[/td]
    [td valign="bottom"]& Sticky[/td]
    [/tr]
    [/table]
    Im Hot,Sweet,& Sticky

    [table border="3" bordercolor="green" width="355" height="100" bgcolor="lightblue"]
    [tr]
    [td align="right" valign="bottom"]Im Hot,[/td]
    [td align="center" valign="middle"]Sweet,[/td]
    [td align="left" valign="top"]& Sticky[/td]
    [/tr]
    [/table]
    Im Hot,Sweet,& Sticky
Now, lets remove the height code, and get back to basics, as this table is now going to start to grow, and also, I'm going to also change the align codes in the cells before starting lesson 2,
    [table border="3" bordercolor="green" width="355" bgcolor="lightblue"]
    [tr]
    [td align="center" valign="middle"]Im Hot,[/td]
    [td align="center" valign="middle"]Sweet,[/td]
    [td align="center" valign="middle"]& Sticky[/td]
    [/tr]
    [/table]
    Im Hot,Sweet,& Sticky

Important Note on Holding Open An Empty Table Cell;

    On Internet Explorer you can hold open an empty table cell by just adding the width and height into the [td] line of code. For example; [td width="20" height="50"], but on Netscape, if you view that cell coded in this manner, the cell will collapse and screw up your table, Netscape needs some type of cell content to hold it open to the assigned width and height.

    The best way to hold a empty cell open to a proper width and height, is to use a one pixel clear transparent gif image. But we cant do that here at A F F, So, for now, at this stage of the lessons, just type a letter or something so there is something in the cell, I will explain tricks latter if you need to have a empty cell, like at the end of a calender, as these lessons progress,

    For the curious now, a letter changed to the bgcolor will work or you also can use, I use a ".", a period.

    And it appears, & nbsp; like this example; [td width="20" height="50"]& nbsp;[td] which means, (a non breakable space btw), cannot be used here at A F F, usually works for holding a cell open, but the previewer sometimes recognizes it, sometimes not, after its sent, it wont show if it worked until after the post is approved, and at times, it wont work that way either, so it is unstable here, (and now, I cant get it not to work to show you the code correctly, LOL, go figure huh?)

    So anyway... I'm using a colored period from my keyboard instead, besides, I always feal more comfortable being able to actually see something inside of the cell when I highlight a finished table, this way, I know all is going to work., but to each his own there

Need some coffee, see ya soon...



Lesson 2, Most would think it would be building a calender, Not the way I teach tables, you want to get creative don't you? You want to do cool things with tables right? You now see how easy it is to make a table with one row, with more then one cell, well, why stop with the basics now, lets go for it, while the basic code is in your head, and easy to see above, lets play and see what the above can do.

Now, getting back to basics, lets start manipulating what we already have, lets start with more basics of making the cells a different size inside. What is important here, is to get your math correct,
    The 3 main ways are,
      1-The width command with percentage,
      2-the width command with pixels,
      3-and finally a chain of letters on your keyboard.

With the width command in percentage, is the most rubbery in being defined, the cells become the percentage of the main table, so, to simply make the [td] cell you want a different width, it will look like this if you want the middle cell 50% of the table;
    [table border="3" bordercolor="green" width="355" bgcolor="lightblue"]
    [tr]
    [td align="center" valign="middle"]Im Hot,[/td]
    [td align="center" valign="middle" width="50%"]Sweet,[/td]
    [td align="center" valign="middle"]& Sticky[/td]
    [/tr]
    [/table]
    Im Hot,Sweet,& Sticky
    Or, the 2 outer cells changed to 40% each
    [table border="3" bordercolor="green" width="355" bgcolor="lightblue"]
    [tr]
    [td align="center" valign="middle" width="40%"]Im Hot,[/td]
    [td align="center" valign="middle"]Sweet,[/td]
    [td align="center" valign="middle" width="40%"]& Sticky[/td]
    [/tr]
    [/table]
    Im Hot,Sweet,& Sticky
With pixel defined width, this becomes alot more defined and solid
    [table border="3" bordercolor="green" width="355" bgcolor="lightblue"]
    [tr]
    [td align="center" valign="middle" width="140"]Im Hot,[/td]
    [td align="center" valign="middle"]Sweet,[/td]
    [td align="center" valign="middle" width="140"]& Sticky[/td]
    [/tr]
    [/table]
    Im Hot,Sweet,& Sticky
And now, the string of letters on your keyboard, this has no rubber effect, and will force the widths without question, this is what most creative webpage designers use, (they also use a clear gif explained later) (note, for the most part, they use a string as the final tuning on a major table cell, after all is built, and something just has to be moved to look right, this will be used, and most of the time, it is in 2 parts, first the move with the string, second, change the color of the text to match the bgcolor so the text appears to vanish.) All a string of letters are is this, ggggggg, or ........... or 222222222, anything in a row with no breaks, and also, in very large tables, for real advanced work in very large code, gives a reference as to where to fix the code if they see something wrong.
    [table border="3" bordercolor="green" width="355" bgcolor="lightblue"]
    [tr]
    [td align="center" valign="middle"]Im Hot,[/td]
    [td align="center" valign="middle"]..........Sweet,..........[/td]
    [td align="center" valign="middle"]& Sticky[/td]
    [/tr]
    [/table]
    Im Hot,..........Sweet,..........& Sticky

    And now with the strings of .......... color changed so it appears to vanish, lightblue bgcolor, well, of course, lightblue font color, Highlight sweet and you will see the chain of ........
      [table border="3" bordercolor="green" width="355" bgcolor="lightblue"]
      [tr]
      [td align="center" valign="middle"]Im Hot,[/td]
      [td align="center" valign="middle"][font color="lightblue"]..........[font]Sweet,[font color="lightblue"]..........[/font][/td]
      [td align="center" valign="middle"]& Sticky[/td]
      [/tr]
      [/table]
      Im Hot,...........Sweet,..........& Sticky

Now is a good of time as any to explain this type of Chain letters to move a object or a word over to fine tune where you want it to finally be, the align command do major moves, the string moves it just exactally where you want it, let me demostrate, here I changed the align command.
    [table border="3" bordercolor="green" width="355" bgcolor="lightblue"]
    [tr]
    [td align="right" valign="middle"]Im Hot,[/td]
    [td align="center" valign="middle"]Sweet,[/td]
    [td align="left" valign="middle"]& Sticky[/td]
    [/tr]
    [/table]
    Im Hot,Sweet,& Sticky

    And here I move the Im Hot, & Sticky just a bit to where I wanted it.
      [table border="3" bordercolor="green" width="355" bgcolor="lightblue"]
      [tr]
      [td align="right" valign="middle"]Im Hot,.....[/td]
      [td align="center" valign="middle"]Sweet,[/td]
      [td align="left" valign="middle"].....& Sticky[/td]
      [/tr]
      [/table]
      Im Hot,.....Sweet,.....& Sticky

    Refer to the changing color lesson prior to this lesson to make the string vanish

Now, one more Basic Code for moving the cells, and aligning everything up, adding the cellpadding code also moves things away from the sides of a cell, it is like an invisable border inside of a cell, like this example, Note also I change the align codes for a better idea of what is going to happen how for your visual and I also added a height code to better see the difference of the combination of codes.
    [table border="3" bordercolor="green" width="355" height="100" bgcolor="lightblue" cellpadding="20"]
    [tr]
    [td align="left" valign="top"]Im Hot,[/td]
    [td align="center" valign="middle"]Sweet,[/td]
    [td align="right" valign="bottom"]& Sticky[/td]
    [/tr]
    [/table]
    Im Hot,Sweet,& Sticky
Another way of moving something up and down in a Cell is by the [br] code, but that is real basic code, and to get this far, I am sure you already know how to use the [br] do do things like this.
    Here is a break [br] and now[br] another, and now [br][br]2 in a row all good for height adjustment in a cell

    which translastes to this
      Here is a break
      and now
      another, and now

      2 in a row, all good for height adjustment in a cell

And now for some more coffee before lesson 3 of which, I will show a use of the line break code [br] in use with the next example.



Lesson 3, Here is a short lesson on adding a Image Photo here at A F F, and then some info on advanced image use outside of this site.

Well, to see who is Hot Sweet & sticky, here is the code for adding a image out of your profile, along with what we learned above, and I'll even show a use for the [br] code in this next example., when looking at the image code below, you see a # with the word photo, (4 in this example) that is the photo # in your file, I used align for the text and also adding some cellpadding, and a wingding font of the star and moon, to move the wingding image UP because the align tags moved everything down and to the left, you will see the [br] break code in use.
    [table border="3" bordercolor="green" width="355" bgcolor="lightblue" cellpadding="4"]
    [tr]
    [td align="right" valign="top"]Do you think I am,[/td]
    [td align="center" valign="middle"][photo4 dsws999][/td]
    [td align="left" valign="bottom"][SIZE 7][font face=WingDings]Z[/font][/SIZE][br][br][br]Hot Sweet & Sticky?[/td]
    [/tr]
    [/table]
    Do you think I am,dsws999Z


    Hot, Sweet & Sticky?
Ok, now a important word about Images, in Table manipulation, they are a very imporant part of a bunch of tricks, but since A F F doesnt allow outside images, we can not use them to do that here, so I will explain briefly on how advanced use is for others doing work on pages outside of this site and thier use.
    The reason a image file is so important, is because of the height and width atributes, it makes a rock solid size in a cell, the code looks like this.

      img src="location" width="135" height="32" alt="textdescription"

    And another use besides a rock solid size adjustment and for backgrounds, a clear 1x1 pixel gif, image of nothing, it's transparent. It is used for couple of reasons, it is the swiss army knife of a table maker.

      1-it can be used as a spacer between objects, and because it is clear, it becomes invisable because the bgcolors show right through it, some call it a shim, but it is alot more then just a shim.

      2-because it is clear and can be sized to ANYTHING, you can make colored strips, breaks, lines, very fast and perfect, it is like having a zillion images any color and any size you want all with one simple clear gif image

      3-and because it can be sized to anything, it can force cells to the exact size you need if installed correctly,

      4-It will prevent a cell from collapsing, not used, a cell will collapse across differnt browsers, you need something in a cell or a cell will collapse and destroy your table, (you can use, & nbsp; (a non breakable space), or with a 1-pixel transparent GIF.

      5-In a nut shell, it is the swis army knife of a table maker

But, since we dont have that to use, I do have all kinds of other ways to do the same thing in future lessons, a simple letter from your keyboard will fix the cell collapsing problem, just match the color of the cell with your letter or period, "." and it will appear to vanish, you could also use, & n b s p ; (a non breakable space) off of the A F F site in the code to hold a cell open, but appears not here at A F F due to it being unstable. (LOL, lets see if the space code fucks with me again, LOL, wouldnt work before, now, It just wants to work even when it shouldn't, LOL, if it works now, I just give up, it wins!!!!, lol)

Now a short break before continuing, Yes, That means I need more coffee, lol, see ya soon....



Lesson 4, Called, Some more basic codes needed before going any farther!, some title aint? Well, it is what it is, Onward..

Back to this basic table first with some wingdings, so adding the new codes are easier to see in the examples;

    [table border="3" bordercolor="green" width="355" bgcolor="lightblue"]
    [tr]
    [td align="center" valign="middle"][SIZE 7][font face=WingDings]z[/font][/SIZE][/td]
    [td align="center" valign="middle" width="50%"][SIZE 7][font face=WingDings]Z[/font][/SIZE][/td]
    [td align="center" valign="middle"][SIZE 7][font face=WingDings]z[/font][/SIZE][/td]
    [/tr]
    [/table]
    zZz
Now lets change the cell colors, lets start by adding the bgcolor code to the center cell, [td bgcolor="yellow"] and making it, hmm? Yellow...

    [table border="3" bordercolor="green" width="355" bgcolor="lightblue"]
    [tr]
    [td align="center" valign="middle"][SIZE 7][font face=WingDings]z[/font][/SIZE][/td]
    [td align="center" valign="middle" width="50%" bgcolor="yellow"][SIZE 7][font face=WingDings]Z[/font][/SIZE][/td]
    [td align="center" valign="middle"][SIZE 7][font face=WingDings]z[/font][/SIZE][/td]
    [/tr]
    [/table]
    zZz
Easy enough huh? well lets make the 2 outside cells orange. Same code, just adding to the other cells, [td bgcolor="orange"]

    [table border="3" bordercolor="green" width="355" bgcolor="lightblue"]
    [tr]
    [td align="center" valign="middle" bgcolor="orange"][SIZE 7][font face=WingDings]z[/font][/SIZE][/td]
    [td align="center" valign="middle" width="50%" bgcolor="yellow"][SIZE 7][font face=WingDings]Z[/font][/SIZE][/td]
    [td align="center" valign="middle" bgcolor="orange"][SIZE 7][font face=WingDings]z[/font][/SIZE][/td]
    [/tr]
    [/table]
    zZz
Now you say, well, the background color of lightblue does really nothing, just a little bit, well, here is the next manipulation code that changes That, as we had cellpadding for stuff inside of a cell to move away from the sides of the cell, we have cellspacing that gives space between the cells & moves them apart, the cellspacing tag goes in the [Table] tag like [table cellspacing=15] here is the code.

    [table border="3" bordercolor="green" width="355" bgcolor="lightblue" cellspacing="15"]
    [tr]
    [td align="center" valign="middle" bgcolor="orange"][SIZE 7][font face=WingDings]z[/font][/SIZE][/td]
    [td align="center" valign="middle" width="50%" bgcolor="yellow"][SIZE 7][font face=WingDings]Z[/font][/SIZE][/td]
    [td align="center" valign="middle" bgcolor="orange"][SIZE 7][font face=WingDings]z[/font][/SIZE][/td]
    [/tr]
    [/table]
    zZz
Nice huh? well also, you can put the bgcolor tag in the Row, [tr] tag instead of the [td] cell tag and take care of the color across one row with one code, note that you should use either the TD tag defined color or the TR tag defined color seperate, either or, for the most part, kinda unstable together, (so I removed the [td bgcolor] in the next example and just used the Row, [tr bgcolor=red] tag. This wont get used much, but I thought Id teach it anyway, as you are decorating cell by cell. Also, The previewer here will show a strange red strip above the table, it vanishes when sent, but none the less, I played with it and got it to stay if I typed a word after the TR code, hmmm?

    [table border="3" bordercolor="green" width="355" bgcolor="lightblue" cellspacing="15"]
    [tr bgcolor="red"]
    [td align="center" valign="middle"][SIZE 7][font face=WingDings]z[/font][/SIZE][/td]
    [td align="center" valign="middle" width="50%"][SIZE 7][font face=WingDings]Z[/font][/SIZE][/td]
    [td align="center" valign="middle"][SIZE 7][font face=WingDings]z[/font][/SIZE][/td]
    [/tr]
    [/table]
    zZz
Now back to the basic table with each TD cell colored, (I removed the Row bgcolor tag also) and now, besides just cellspacing, lets add some cellpadding also and watch the table manipulate in size,

    [table border="3" bordercolor="green" width="355" bgcolor="lightblue" cellspacing="15" cellpadding="15"]
    [tr]
    [td align="center" valign="middle" bgcolor="orange"][SIZE 7][font face=WingDings]z[/font][/SIZE][/td]
    [td align="center" valign="middle" width="50%" bgcolor="yellow"][SIZE 7][font face=WingDings]Z[/font][/SIZE][/td]
    [td align="center" valign="middle" bgcolor="orange"][SIZE 7][font face=WingDings]z[/font][/SIZE][/td]
    [/tr]
    [/table]
    zZz
So, Now you see, a few more ways to manipulate the size and spacing of things in a cell, in a row, in a table, and this is only one row of a table, but think about this, each cell is the same all through a table, so you master how to really play with a cell, and you master a entire Webpage, remember, a good webpage is just one very large cell called a table, that has tables, inside of tables with cells apon cells.

So, Now do you see why I didn't teach you how to make a calender Yet? That is coming, but think of this, instead of just a calender, how about a real cool calender with each cell decked out with your creative mind, hmmm? could be a real cool webpage, after these lessons, you will be able to put anything anywhere on a webpage, full control.

Another Important note about CELLPADDING, CELLSPACING, and also the BORDER TAG, ALWAYS use them in the table tag, Yes, ALWAYS even if you make the value 0, as in, cellpadding="0" and cellspacing="0", border="0", here are the reasons behind this madness, lol

    1-it is the only way to totally remove any cellpadding or cellspacing, as the default is 1 pixel and 2 pixels, to over come this, a value of zero has to be used

    2-They will always be in the code so you can manipulate these values later if need be, just a plain time saver

    3-The cellpadding, cellspacing and border attributes should all be in the TABLE tag to guarantee compliance between the two main browsers., if not all browsers....

Simple enough huh? ALWAYS USE THEM, even if you make the value 0.

Yes, More coffee...



Lesson 5, Metamorphosis, A Inspiring word of HippieChicks Post is fueling my brain for this lesson, also, The Hot, Sweet and Sticky is getting old, as my Montrose Album is not here, so, Lets Rock On with creating something with what we have now...

To start with, let go back to the basic 3 celled table with everything at center, good starting point, and then we can move things as the preview button shows before sending it in, But I will make the center cell a width of 50%, why you ask? because I feel like it, really doesn't matter, but I know what is in my head is going to need some room there, because, I am planning on a Metamorphosis of where my picture is above, to the hippie colored table in its place, you can see the table now at Basic Table Making of which, has tons of things to put in tables.

So we have this table;
    [table border="3" bordercolor="green" width="355" bgcolor="lightblue"]
    [tr]
    [td align="center" valign="middle"]Im Hot,[/td]
    [td align="center" valign="middle" width="50%"]Sweet,[/td]
    [td align="center" valign="middle"]& Sticky[/td]
    [/tr]
    [/table]
    Im Hot,Sweet,& Sticky
Before going on, Note how tables work, look at the front page of any blog, look at all the cells, they are all over the place, large one on top, each post is a cell, the photo is in a cell, the calender is a bunch of cells inside of cells, in a sense, the whole page is one big cell, called a table, and has cells, within cells, within cells, and so on, you could even say tables, insides of tables also... each has a place to put things in, like drawing a rectangle on a piece of paper and then drawing all kinds of rectangles inside of it.

So here is the code for the Hippie table turned off, you can go to this link and see it along with other goodies, well, its big, but just 4 basic colored basic bg tables inside of each other.
    [center][bg width=80% border=20 bgcolor=blue bordercolor=black cellpadding=20]
    [center][bg width=80% border=15 bgcolor=deeppink bordercolor=orange cellpadding=20]
    [center][bg width=80% border=10 bgcolor=lime bordercolor=purple cellpadding=20]
    [center][bg width=90% border=5 bgcolor=yellow bordercolor=purple cellpadding=20]

    and now, total hippie'd out

    [/bg][/center]
    [/bg][/center]
    [/bg][/center]
    [/bg][/center]

Now lets plop it in the center cell in place of the word Sweet, I already can see, the cellpadding and width and all will not work right, but after it is in, we can adjust the numbers, it is all percentage width now, so it is like a rubber band, except for the 355 width, which of course, wont work right until the hippie table is modified to fit.
    [table border="3" bordercolor="green" width="355" bgcolor="lightblue"]
    [tr]
    [td align="center" valign="middle"]Im Hot,[/td]
    [td align="center" valign="middle" width="50%"][center][bg width=80% border=20 bgcolor=blue bordercolor=black cellpadding=20]
    [center][bg width=80% border=15 bgcolor=deeppink bordercolor=orange cellpadding=20]
    [center][bg width=80% border=10 bgcolor=lime bordercolor=purple cellpadding=20]
    [center][bg width=90% border=5 bgcolor=yellow bordercolor=purple cellpadding=20]

    and now, total hippie'd out

    [/bg][/center]
    [/bg][/center]
    [/bg][/center]
    [/bg][/center][/td]
    [td align="center" valign="middle"]& Sticky[/td]
    [/tr]
    [/table]
    Im Hot,

    and now, total hippie'd out




    & Sticky
YIKES!!!!, lol, just kidding, no problem really, of course it was going to be to big, look at the cellpadding #'s, and the border sizes, and the text of, (and now, total hippie'd out) is making the table streach down, as the in all the lessons above taught above, so lets start reducing things,
    1-First, I am going to remove the text and add a wingding, how about a YinYang symbol, which is [SIZE 6][font face=WingDings][[/font]

    2-lets add some wingdings to the outer cells to push them out, in my mind, I think Ill use a design, [SIZE 7][font face=WingDings]z[/font][/SIZE] in place of Im Hot and also Sticky

    3-Im just going to guess at some border and cellpadding #'s that are low, like 3's and 5's as the borders have color in them, I will use some higher numbers for them

    4-and then, for your next lesson in sizing, I will be removing spaces in the code to make the tables smaller, as alot of spaces make like line breaks and makes the table grow tall, but I will show the table next before I remove most if not all spaces in the code. So you can see both effects.

      [table border="3" bordercolor="green" width="355" bgcolor="lightblue"]
      [tr]
      [td align="center" valign="middle"][SIZE 7][font face=WingDings]z[/font][/SIZE][/td]
      [td align="center" valign="middle" width="50%"][center][bg width=80% border=10 bgcolor=blue bordercolor=black cellpadding=5]
      [center][bg width=80% border=15 bgcolor=deeppink bordercolor=orange cellpadding=5]
      [center][bg width=80% border=10 bgcolor=lime bordercolor=purple cellpadding=3]
      [center][bg width=90% border=5 bgcolor=yellow bordercolor=purple cellpadding=3]

      [SIZE 6][font face=WingDings][[/font][/SIZE]

      [/bg][/center]
      [/bg][/center]
      [/bg][/center]
      [/bg][/center][/td]
      [td align="center" valign="middle"][SIZE 7][font face=WingDings]z[/font][/SIZE][/td]
      [/tr]
      [/table]
      z

      [




      z


    And Now the code with all the spaces removed, when doing this, it gets hard to see the diffent tables in the code as it all become one paragraph, but luckly, once you got it, you move on to working on another row or cell, but this is actually the exact same code as above, so you can see what it looks like easy there. Just an example of height manipulation.

      [table border="3" bordercolor="green" width="355" bgcolor="lightblue"][tr][td align="center" valign="middle"][SIZE 7][font face=WingDings]z[/font][/SIZE][/td][td align="center" valign="middle" width="50%"][center][bg width=80% border=10 bgcolor=blue bordercolor=black cellpadding=5][center][bg width=80% border=15 bgcolor=deeppink bordercolor=orange cellpadding=5][center][bg width=80% border=10 bgcolor=lime bordercolor=purple cellpadding=3][center][bg width=90% border=5 bgcolor=yellow bordercolor=purple cellpadding=3][SIZE 6][font face=WingDings][[/font][/SIZE] [/bg][/center] [/bg][/center] [/bg][/center] [/bg][/center] [/td][td align="center" valign="middle"][SIZE 7][font face=WingDings]z[/font][/SIZE] [/td][/tr][/table]
      z
      [
      z
WOOOOOHOOOOO!!!!

Well, now, what is the actual size? hmmm? right? well, next lesson after some coffee of course, is making a sizing template for what your working on, At the same time, I will show you how to stack tables, and then you can fine tune the finalize heights and widths for your tables, The last example, I can see it is close to the 355 width, but it most likly is not, if it is, that was just luck, lol,

But coffee awaits before part 2 of This lesson on Metamorphisis and the mesuring and stacking of tables....



Lesson 6, Called, Back to the lessons, lol, yep, again, it is what it is, And will be about stacking the tables on top of each other


Lets see, First to explain what happens here, is tables stack on top of each other, and looks like it is all one table, (as long as the width sizes are the same, it will blend right together and look like one unit.

With that, lets make a measuring stick real quick, and then, lets turn that same stick into a fancy cell to put on top of a table. So what we need is a very basic one celled table at the width of 355 with a small border or bgcolor to see the table, (The border grows inside of the table so it will not effect the width of 355), the code will look like this,
    [table border=1 width="355" bgcolor="indigo"]
    [tr]
    [td][color white]width of 355[/color][/td]
    [/tr]
    [/table]
    width of 355
There you go, simple enough huh? And yea, made it indigo to give it some color, Reason it always works for the width, there is not enough stuff in the cell to force it to a different size, as well as, it is not inside of another table, that is preventing it from expanding either, now, next is, I will show you how tables stack right on top of each other; lets use this example from earlier without a border and some color changes;
    zZz
And now, lets put the 2 codes on top of each other, Note, the previewer will show them apart on A F F, but when submitted, they will be together, Just always have the closing [/table] tag and the next [table] together, and it should always work for you, and actually, the only way to be sure that they will be apart if you want them separated, is you must use the [br] tag between them to make sure they stay apart,

    [table border=0 width="355" bgcolor="indigo"]
    [tr]
    [td][color white]width of 355[/color][/td]
    [/tr]
    [/table][table border="0" width="355" bgcolor="green" cellspacing="15"]
    [tr]
    [td align="center" valign="middle" bgcolor="orange"][SIZE 7][font face=WingDings]z[/font][/SIZE][/td]
    [td align="center" valign="middle" width="50%" bgcolor="orangered"][SIZE 7][font face=WingDings]Z[/font][/SIZE][/td]
    [td align="center" valign="middle" bgcolor="orange"][SIZE 7][font face=WingDings]z[/font][/SIZE][/td]
    [/tr]
    [/table]

    width of 355
    zZz
With this method, of tables on top of tables, some very simple and basic tables can turn into entire fancy websites, very easily, as long as the widths are the same, (as in a bunch of templates of the widths you want, you can mix and match to your hearts content, adding and removing and modify very simply by just stacking what you want on top of each other.

For example, here at A F F, the default size of 355 width can used as a template width, and you can have a txt file on your desktop, just full of basic tables set to 355, and just do minor modifications to the templates you have, and create entirely different looking tables, by, colors, wingdings, blings, and Text as in Titles and also different fonts, and all can be stacked on top of each other if you like.

In turn, do something like this with what you already learned. I colored the code of each table for you see in the next example, in this example, as you see, it is only 3 tables of what we already learned. (the top table, I removed all bgcolors and borders so the contents of that table just float above the other 2 tables, if I added a border or color to the first table, it would be seamless with the other 2 tables. in effect, all one table.
    [table border="0" width="355" cellpadding="4"]
    [tr][td align="right" valign="top"][B]Do you think I am,[/B][/td]
    [td align="center" valign="middle"][photo4 dsws999][/td]
    [td align="left" valign="bottom"][SIZE 7][font face=WingDings]Z[/font][/SIZE][br][br][br][b]Hot Sweet & Sticky?[/b][/td][/tr][/table]
    [table border=0 width="355" bgcolor="indigo"]
    [tr][td align="center"]][color yellow][SIZE 6][font face=WingDings][[/font][/SIZE].....[SIZE 4][font face=WingDings]zzzzzzzzzzzzzz[/font][/SIZE].....[SIZE 6][font face=WingDings][[/font][/SIZE][/color]
    [/td][/tr][/table]
    [table border="0" width="355" bgcolor="green" cellspacing="15"]
    [tr][td align="center" valign="middle" bgcolor="orange"][SIZE 7][font face=WingDings]z[/font][/SIZE][/td]
    [td align="center" valign="middle" width="50%" bgcolor="orangered"][SIZE 7][font face=WingDings]Z[/font][/SIZE][/td]
    [td align="center" valign="middle" bgcolor="orange"][SIZE 7][font face=WingDings]z[/font][/SIZE][/td]
    [/tr][/table]


    Do you think I am,dsws999Z


    Hot Sweet & Sticky?
    ][.....zzzzzzzzzzzzzz.....[
    zZz
Well, as you see, how basic these 3 tables are, and now combined, doesn't look so much basic anymore, but, the fact it, it is just 3 real basic tables, put on top of each other, and wala, a whole new dimension to what tables are all about, putting things, right where you want them.