Tables

1
Tables

• Web Authoring

2
(No Transcript)
3
This kind of a table
4
html tables

• Do you really want to create a table? Heres the
  tag and attribute to use
• ......contents of table.......
  

5
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!
  
• Lets go type this into a new html document, save
  it as tables and see what we get!

6
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.

7
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!!
8
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!!
9
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.

10
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?

11
Can I use both at the same time?

• Of course!
• Type this in and check it out!
• cellpadding"15"

12
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!

13
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!

14
What else?

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

15
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

16
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!

17
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!

18
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.

19
Lets try it

• cellpadding"7" I'm in the
  center! I'm aligned
  to the right!

20
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.

21
Try it

• Here is a sample table using the vertical
  alignment commands
• cellpadding"0" valign"top" I'm on top!
  So I start on
  top!
  I'm in the middle valign"bottom" I start at the bottom.
  
• Check it out in the browser.

22
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.

23
You want your table to look like this
24
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?
• SRCface.jpg" align"center" This too!
  

25
What about this look?
Banner here
26
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
• colspan"3" align"center"
  srcface.jpg
  Some text here
  Nav bar here

27
Butcan we add color?

• Yes, Totoyoure not in Kansas anymore!
• Color can be added to the text in a cell or to
  the actual cell itself

28
Here you go

• This makes the entire table the same color
• Now the whole table has a red background!

29
To change the color or each cell

• Add the bgcolor command to each tag you want
  to change
• bgcolor"red" red bgcolor"blue" blue
• Now the two cells are different colors

30
To change the row color

• Add the bgcolor command to the tag
• bgcolor"red" red red
  again...
  blue blue again!
  

31
Assignment 3
Remember to re-size your images! ?

• 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

All of the main characters may not fit.thats
ok! Some rows may be longer than others!
House characters
Friends characters
The Flintstones characters
Family Guy characters
32
How about this crazy idea

• Can I put a table inside of another tables?
• Yes, its called a nested table!

33
Lets try it

• Make a new html document
• That means open your shell and save as
• Save it as nestedtable.html
• Lets add the nested table tags

34
A nested table

• align"center" border"2" I'm inside
  the small table!
  

35
lets try it

• align"center" border"2" I'm inside
  the small table!
  

36
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.
• Lets 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.

37
Nested tables

• align"center"       border"4"              I'm
  in the first small table! Ha!       
        
               align"center"       I'm in the second small
  table! Ha, ha!              
  

38
Nested table assignment 4

• In the table listing the words Im 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 Im in the second
  small table do the following
• List all of the Gilligans 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