Post on 04-Jan-2016
Tables
Web Authoring
This kind of a table
THIS Is a TABLE
THIS Is a TABLE
THIS Is a TABLE
THIS Is a TABLE
html tables
Do you really want to create a table? Here’s the tag and attribute to use
<table> ......contents of table....... </table>
html code
The <table> tag begins the table you place what you want inside, and end the table with the </table> tag. To begin adding contents to your table, you will need the <td> tag.
The "TD" stands for table data, which is what you will place after this tag. You end a table data section with the </td> tag.
Here is a basic table with just one cell: <table> <td> This is my table! </td> </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 <table> tag, like this:
<table border="2"> <td> This is my table! </td> </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 <TD> tags again, like this:
<TABLE border="2"> <TD> This is a cell </TD> <TD> This is a cell </TD> </TABLE>
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, <TR> and </TR>:
<TABLE border="2"> <TD> This is a cell </TD> <TD> This is a cell </TD>
<TR> <TD> This is the new row </TD> <TD> I'm on the new row, too! </TD> </TR> </TABLE>
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 <table> 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 <table border="2" cellspacing="12">
Add the above to your table in html What do you get? Now, remove the cellspacing Change the tag to include cellpadding, like this:
<table border="2" cellpadding="12">
What do you get?
Can I use both at the same time?
Of course! Type this in and check it out!
<table border="2" cellspacing="15" cellpadding="15">
What about hyperlinks?
To use a link inside a cell, just place the link tag inside your <td> tags, like this:
<td> <a href="http://www.mainlandregional.net">
My Favorite Web Site!</a> </td>
Try it out!
What about images?
To place an image inside a cell, you do the same thing with the image tag:
<td> <img src=“mrhs.jpg"> </td>
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 <TABLE> 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:
<TABLE width="600" border="2"> <TD> This table really long! </TD> </TABLE>
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 <TD> 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
<TABLE width="450" border="2" cellspacing="7" cellpadding="7"> <TD align="center"> I'm in the center! </TD> <TD align="right"> I'm aligned to the right! </TD> </TABLE>
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:
<TABLE width="550" border="2" cellspacing="7" cellpadding="0"> <TD align="center" valign="top"> I'm on top! <br>So I start on top! </TD> <TD align="center" valign="middle"> I'm in the middle </TD> <TD align="center" valign="bottom"> I start at the bottom. </TD> </TABLE>
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 <TD> 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:
<TABLE border="2"> <TD align="center"> Nice, right?</TD> <TD rowspan="2" align="center"> <IMG SRC=“face.jpg"> </TD>
<TR> <TD align="center"> This too! </TD> </TR> </TABLE>
What about this look?
Some text here Nav 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:
<TABLE border="2" cellpadding="5"> <TD colspan="3" align="center"> <Banner here</B> </TD>
<TR> <TD align="center"> <img src=“face.jpg”> </TD> <TD align="center"> Some text here </TD> <TD align="center"> Nav bar here </TD> </TR> </TABLE>
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
<TABLE border="5" bgcolor="red">
Now the whole table has a red background!
To change the color or each cell… Add the bgcolor command to each <TD> tag
you want to change:
<TABLE width="75" border="2"> <TD bgcolor="red"> red </TD> <TD bgcolor="blue"> blue </TD> </TABLE>
Now the two cells are different colors
To change the row color
Add the bgcolor command to the <TR> tag:
<TABLE width="200" border="2" > <TR bgcolor="red"> <TD> red </TD> <TD> red again... </TD> </TR> <TR bgcolor="blue"> <TD> blue </TD> <TD> blue again! </TD> </TR> </TABLE>
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
<TABLE width="400" border="6"> <TD align="center">
<TABLE width="300" border="2"> <TD align="center">
I'm inside the small table!
</TD>
</TABLE> </TD> </TABLE>
let’s try it
<TABLE width="400" border="6"> <TD align="center">
<TABLE width="300" border="2"> <TD align="center">
I'm inside the small table!
</TD> </TABLE> </TD> </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
<TABLE width="600" border="0"> <TD align="center"> <TABLE width="275" border="4"> <TD align="center"> I'm in the first small table! Ha! </TD> </TABLE> </TD> </TD align="center"> <TABLE width="275" border="4"> <TD align="center"> I'm in the second small table! Ha, ha! </TD> </TABLE> </TD> </TABLE>
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