Tables Web Authoring

This kind of a table THISIs aTABLE THISIs aTABLE THISIs aTABLE THISIs aTABLE

html tables  Do you really want to create a table? Here’s the tag and attribute to use......contents of table

html code  The tag begins the table  you place what you want inside, and end the table with the tag.  To begin adding contents to your table, you will need the tag. The "TD" stands for table data, which is what you will place after this tag. You end a table data section with the tag.  Here is a basic table with just one cell: This is my table!  Let’s go type this into a new html document, save it as tables and see what we get!

What? You want a border…  To get the border we just add the border command to the tag, like this: This is my table!  Go ahead try it!  You can set the border to be as big or small as you like by changing the number inside the quote marks. If you set it to border="0", you will have a table with no border around it.

More then one cell  Of course, you probably want the table to have more than one cell in it.  To add another cell on the same line, just use the tags again, like this: This is a cell This is a cell  Try it and see what you get! Please type Your html code in lowercase!!

How do I get…  More rows with cells on the next line?  To do this, use the table row tags, and : This is a cell This is a cell This is the new row I'm on the new row, too!  Try it! Please type Your html code in lowercase!!

Everything is too close and bunched up  There are a couple of commands you can add to the tag to get more spacing between cells. Here they are:  cellspacing=" “” Use this command to add more space around each cell. Place a number inside the quote marks.  cellpadding=" “ Use this command to add more space inside each cell. Place a number inside the quote marks.

Cellpadding and cellspacing in action  Add the above to your table in html What do you get? Now, remove the cellspacing Change the tag to include cellpadding, like this:  What do you get?

Can I use both at the same time?  Of course! Type this in and check it out!

What about hyperlinks?  To use a link inside a cell, just place the link tag inside your tags, like this: My Favorite Web Site!  Try it out!

What about images?  To place an image inside a cell, you do the same thing with the image tag:  Try it!  Remember …you must have the image already saved to your h: drive  And it must be in the same folder as the website you are creating!

What else?  What else can you add?  You can add links, images, headings, paragraphs and more. Just imagine

Assignment #1  Create a 3 row and 3 column table  Save it as fruit.html  List pieces of fruit in each cell Do not duplicate any piece of fruit  Let me see your work when you are finished

Assignment #2  Open your fruit.html  Under each row listing the fruit add another row  Go to Google and save 9 pictures of each of the fruit you listed yesterday  Insert the images under the corresponding fruit  Save it with the same name  Make sure I see it when you are finished!  Happy Halloween!

Table dimensions  to define the width of your table … add the width=" " command to your tag.  Place the number of pixels wide you would like the table to be between the quote marks.  So, if you wanted a table 600 pixels long, you would do this: This table really long!  This table has just a little text, but stretches all the way to 600 pixels, because we told it to!

Alignment  What if you wanted your contents to be aligned to the center or to the right? To do this, you add the align=" " command to your tag. You can use the command three ways: align="left" Aligns your cell contents to the left. align="center" Aligns your contents to the center. align="right" Aligns your cell contents to the right.

Let’s try it I'm in the center! I'm aligned to the right!

valign  You can also use another alignment command for your cells, the vertical alignment command.  It looks like this: valign=" ". Here's what it can do: valign="top" Aligns contents to the top of the cell. valign="middle" Aligins contents halfway between the top and bottom of the cell. valign="bottom" Aligns contents to the bottom of the cell.

Try it  Here is a sample table using the vertical alignment commands: I'm on top! So I start on top! I'm in the middle I start at the bottom.  Check it out in the browser…….

Some more about v. alignment  The vertical alignment commands only come in useful if your table cells don't have the same number of lines inside each cell.  If there are 2 lines of text in the first cell while the others had one line, the vertical alignment will make a difference in how the table looks. If I had only used one line of text in each cell, the vertical alignment commands wouldn't make any difference.  So, how about stretching out the rows and columns? Well, now you get two more commands for the tag, rowspan and colspan.  rowspan=" " Defines the number of vertical table rows the cell should take up. Place your number inside the quote marks.  colspan=" " Defines the number of horizontal columns the cell should take up.

You want your table to look like this Nice, right? This too!

Just do it...  How many rows do you want?  How many columns are there?  Use the rowspan command in your table cell containing the image. You set rowspan="2" and the cell with the picture takes up 2 table rows. Here is the code: Nice, right? This too!

What about this look? Some text hereNav bar here

Just do it…  This time you use the colspan command and set colspan="3".  You get the first cell to stretch across the other three on the second row below it. Here is the table code for this: Some text here Nav bar here

But…can we add color?  Yes, Toto…you’re not in Kansas anymore!  Color can be added to the text in a cell or to the actual cell itself

Here you go  This makes the entire table the same color  Now the whole table has a red background!

To change the color or each cell…  Add the bgcolor command to each tag you want to change: red blue  Now the two cells are different colors

To change the row color  Add the bgcolor command to the tag: red red again... blue blue again!

Assignment #3  Create a table that looks like this:  Save as tv.html  Have the rows alternate between two colors  Make the text a color that is easy to read  List the names of the following main characters for the TV show listed: House (last season) in one row Friends in one row The Flinstones in one row Family Guy in one row TV Show Characters All of the main characters may not fit….that’s ok! Some rows may be longer than others! House characters Friends characters The Flintstones characters Family Guy characters Remember to re-size your images!

How about this crazy idea  Can I put a table inside of another tables?  Yes, it’s called a nested table!

Let’s try it  Make a new html document That means open your shell and save as:  Save it as nestedtable.html  Let’s add the nested table tags…

A nested table I'm inside the small table!

let’s try it I'm inside the small table!

More nested tables  Nested tables can get a bit confusing at times.  Try to keep track of which table you are in while you are writing the code, those td tags get confusing.  Let’s try to have two tables side by side a, nested in one big table The border can be on the nested tables The border on the main (big) table can set to 0.

Nested tables I'm in the first small table! Ha! I'm in the second small table! Ha, ha!

Nested table assignment #4  In the table listing the words: I’m in the first small table do the following: List all of the Brady Bunch main characters, name only Each character should be in its own row and each cell must be a different color  In the table listing the words: I’m in the second small table do the following: List all of the Gilligan’s Island main characters, name only Each character should be in its own row and each cell must be a different color  Save this as nestedtable2.html