Having Fun With Tables

Believe it or not, you really can't spend too much time discussing the use of TABLES in web design. Tables give the webmaster a very powerful tool for organizing and displaying information. If you can master tables, you will find that your pages will become very friendly to the viewer as well as giving you the ability to make a page look visually appealing without a long wait for graphics to download.

At the end of this assignment you should be able to...

• INTRODUCTION
• (1) Play with the look of tables
• (2) Put tables within tables

Up until now you have been able to create a basic table with rows and columns. Now it is time for you to go beyond the boundaries of normal man, time for you to take on your calling as a super hero, to fight injustices and.... (ooops, sorry wrong class).

(now we return you to your previous class on earth)
Tables allow you to alter the look in ways that the same information/images can take on different looks depending on the message you are trying to get across to your viewer. The following is the most basic table:

Blue Bellied Snort Blaster

Code Used <table border=1> <tr> <td>Blue Bellied Snort Blaster</td> </tr> </table>

The first thing you should notice is that the cells in a table will have a background color of the page behind the table. If you created a web page with a blue background, then all the cells in any tables you create on that page will also have blue in the cells.

This however is not always what you want. In the case of the table above, I want the table to stand out from the rest of the page and let the viewer know that it is a TITLE to something. To do this, I instruct the cell inside the table to have a different background color. This is achieved by applying the attribute bgcolor to the <td> command. The following is the same table but with a different color:

Blue Bellied Snort Blaster

Code Used <table border=1> <tr> <td bgcolor="tan">Blue Bellied Snort Blaster</td> </tr> </table>

---

Go to your page #3 (the one listing likes and dislikes) and put those lists inside a table. All the lists should be placed in a single cell. After you have created a table around the lists, I want you to change the background color of the cell to something that grabs the viewers eyes! (Remember: The viewer may have just finished eating a 7 layer burrito so be nice on the color..grin)

[ Click Here For My Updated Page #3 ]


---

There are two attributes you can add to a table to tell how much space to put between the lines and the information, and how wide you want the lines. These two attributes are called cellpadding and cellspacing. The larger the number you assign to cellpadding the more space will be cushioned between the information and the lines (note: I usually use a cellpadding of 3). The larger the number you use on cellspacing the larger the lines will be.

Here are some examples of playing with these attributes:

AFFECT	Code Used
The Butterfly Notice how here is about 3 pixels between the border and the bug? And the border width is small?	<table border=1 cellpadding=3 cellspacing=1> <tr> <td> <img src="../pics/butterfly.gif"> <br>The Butterfly </td> </tr> </table>
The Butterfly Flys There is 10 pixels between the butterfly/text and the border and look how BIG that border is! (wohh!)	<table border=1 cellpadding=10 cellspacing=10> <tr> <td> <img src="../pics/butterfly.gif"> <br>The Butterfly Flys </td> </tr> </table>
The Butterfly Notice how the border is a pretty good size but there is no cushion between the graphic/text and the border? The text sits right up against the border (usually you don't want this).	<table border=1 cellpadding=0 cellspacing=5> <tr> <td> <img src="../pics/butterfly.gif"> <br>The Butterfly </td> </tr> </table>

---

Let's enhance the look of our lists even more. Go to page #3 again and put at least 3 pixels cushion bewteen the lists and the border. Also increase the border size to your liking.

[ Click Here For My Updated Page #3 ]


---

Each cell in a table can have its own color. I will now add a new row to the table with a snippit of information about my animal. This time I will use a different color to emphasize that it is different from the title:

Blue Bellied Snort Blaster A big lumpy thing that sits on the living room floor and play jokes.

Code Used <table border=1> <tr> <td bgcolor="tan">Blue Bellied Snort Blaster</td> </tr> <tr> <td bgcolor="silver">A big lumpy thing that sits on the living room floor and play jokes.</td> </tr> </table>

Notice how the title catches the viewer's eye as being different from the information?

We have arrived at a point where we need to learn about colors.

A Note About Colors Up til now you have applied basic colors to the <font> command and now with the <td> command. Though blue and red are okay sometimes, most of the time you really want to have a lot of control on what type of color is used. For instance you may want a darker red, a lighter blue, or one of the 16 million or so colors available to you (yes that's right, I said 16 million). To instruct the browser to use a specific color, you can either give names that is already understand, like blue, red, white, etc. Unfortunately there are only so many names the browser understands. Here is a full list of color names the browsers understand if you wish to use a name: Color Chart By Name By looking at the Color Chart By Name page, you can see there is a very good selection of colors to choose from. It does not give you all 16 million, but a sample from each sprectrum. For even more control and to really make the perfect color for your page, you need to learn how to access all 16 million colors. To access all the colors you need to give the browser the exact number of the color you want to use. Unfortunately the browser does not use the decimal numbering system as we do. The browser uses a numbering system called Hex Code. All this means is that each position in a number represents a value different than what we grew up learning. Here is a breakdown of how Hex Code works: Hex Code For Beginners First let's remember what we were taught as kids but take for granted today. When you were a kid, the teacher showed how a number represents values depending on which position the number is in. For instance, the number 28 represents 2 tens and 8 ones because the 2 is in the ten position and the eight is in the ones position, hence you have 2 tens + 8 ones. As a decimial number gets large you place more numbers to the left. With the number 1,346 - you have 1 thousand + 3 one hundreds + 4 tens + 6 ones. Remember those days? Now your ready to understand Hex Code. The Hex Code system uses places just like the decimal system but instead of 1's, 10's, 100's, etc.. it goes by 16's (1's, 16's, 256's, etc..). The first position in a hex code can have a value anywhere from 0 to 15 (the decimal first position can go from 0-9). Now the first question that should pop in to your head is..."how the heck can you represent a number above 9 while still using only one character?". And that is a great question. They do this by using the alphabet. The hex system uses numbers just like the decimal system up to the value 9, after that they start using the alphabet starting at 'A' (A = 10). Then if you need an 11, you use 'B' (B = 11). What if you need 12? I hope you are yelling 'C' (C = 12). So if I wanted to tell the browser I am using the value 14, I could tell it the letter 'E'. Now we move on to two positions. Remember the second position in hex does not equal 10's like decimal but 16's. So if I want the number 16 in hex, I could tell the computer '10' - why? Because I am telling it, I want one 16 and zero 1's. What if I want 23? I would use the value '17' - why? Because I am telling the browser, I want one 16 and seven 1's (16 + 7 = 23). If you wanted 23 in decimal you put 23 which actually means I want two 10's and three 1's (20 + 3 = 23). And that is the basics of Hex Code. The good news is that you only have to understand up to two positions to use all the 16 million colors available. Why you ask? Another good question! When you instruct the browser to use a specific color, you do this by telling it how much red, green and blue to mix together to produce the color (hence the abbreviation RGB). This is the same concept your television, computer monitor uses when producing colors. Each value of red or green or blue can be up to 255. Why again? Because if you used the hex code FF (highest letter used in hex is 'F'), you would end up with the decimal value of 255. In Hex, 'F' equals fifteen of whatever number value you are on. So in this case you have fifteen 16's and fifteen 1's which equals 255. Simple? No? Take a break for 10 minutes and reread this section if the concept seems hazey. It should click after a break. Now that you grasp the concept of Hex Code, let's move on to how we tell the browser what we want in a color. With the RGB concept, we tell the browser how much red and then how much green and then how much blue we want. To accomplish this, we put the values next to each other. So let's say we don't want any red, no blue and no green - we could tell the computer #000000 (which produces the color black). Or if you want as much red as possible, as much green as possible and as much blue as possible, you could use the number #FFFFFF (which produces the color white). Did you notice the '#' symbol? Whenever you want to use a number instead of a name for a color you need to put the '#' sign in front. This lets the browser know you are giving the specific number for the color instead of a name. The following is some examples of colors using Hex Code and their decimal values in each position: Position R G B Resulting Effect Code Used Hex Values FF FF FF Sample Text <font color="#FFFFFF">Sample Text</font> Note: #FFFFFF produces solid white Decimal Values 255 255 255 Hex Values 00 00 00 Sample Text <font color="#000000">Sample Text</font> Note: #000000 produces solid black Decimal Values 0 0 0 Hex Values FF 00 00 Sample Text <font color="#FF0000">Sample Text</font> Note: #FF0000 produces solid red Decimal Values 255 0 0 Hex Values 00 FF 00 Sample Text <font color="#00FF00">Sample Text</font> Note: #00FF00 produces solid green Decimal Values 0 255 0 Hex Values 00 00 FF Sample Text <font color="#0000FF">Sample Text</font> Note: #0000FF produces solid blue Decimal Values 0 0 255

Now that all that icky stuff is out of the way. I can show you a page I created to give you a sample of the 16 million colors. When you view this page you can click on the colored cells and the background of the page will turn to that color and it will display the Hex Code you need to use to have the browser use that color.

GoldBorder's Color Chart

[ Click Here For My Updated Page #3 ]

Now that you have mastered the creation of a table and placing colors within a table, we can discuss how to place tables within tables. Doing so will allow you to achieve any arrangment desires you wish for your information.

The only thing you have to realize is that a table is like any other information. Earlier in your lessons you were able to place text and graphics within a cell inside a table. Now you are simply going to tell the browser that you want a table within a cell of another table. Think of the table as a graphic or text, you can put it anywhere you wish, it conforms to the same rules as the text/graphics. (I know, bla bla bla)

Now for the juicy stuff...THE CODE! I am going to make a table and place graphic with some text. In my scenario I want to show a graphic with a nice border and some text to the right of the graphic describing my picture. The difference is that I do not want the text to show any borders (remember border=0?).

And here is the table with knowledge we had before this assignment:

Introducing GB He is plump, he is giggly, and he makes the best oatmeal cookies in the county!

Code Used <table border=1> <tr> <td> <img src="../pics/arnold/arnold02.jpg"> </td> <td> Introducing GB <p> He is plump and giggly! </td> </tr> </table>

Now we are going to enhance the look by making GB's picture look like it is a nice picture frame. We are also going to remove the border from around the text and give the text a different color:

Introducing GB He is plump, he is giggly, and he makes the best oatmeal cookies in the county! Notes On What I Did: (the graphical numbers are for reference only) I created table #2 in the same cell where GB's picture resides. I gave the cell in table #2 a burgondy color and told the table to (cellpadding=3) have a padding of 3 to give some width to the matting affect. I created table #3 inside table #2's cell and gave it a color of white with a padding of 3 also to give some cushion to the picture and the matting. I then placed GB's picture inside this cell. So in recap: GB's picture is inside table #3's cell, table #3 is inside table #2's cell and table #2 is inside table #1's first cell. You should also notice how I indented the code? This indenting technique will help you greatly when you work with tables and tables with tables. The concept is that if something is inside of something else, you indent that code 1 space to the right, hence: I indented <td>'s one space to the right of <tr>'s. I indented the information one space to the right inside a cell to let me know it is inside the cell. This makes understanding your code later on much easier. All you have to do is line up the <td>'s and </td>'s and you know everything between them is inside that cell.

Code Used <table border=0> <tr> <td> <table border=1 cellpadding=3> <tr> <td bgcolor="#960000"> <table border=0 cellpadding=3> <tr> <td bgcolor="white"> <img src="../pics/arnold/arnold02.jpg"> </td> </tr> </table> </td> </tr> </table> </td> <td bgcolor="#FFFFD9"> Introducing GB <p> He is plump and giggly! </td> </tr> </table>