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