By Professor Nibble ã Nibble University 2000-2007

HyperJump to Captions, Borders, Spanning, Align/Valign, Cell Color, Background Image, No Wrap, Width & Height, Assignments

TABLES - Lesson 9

<TABLE>
<TR>
<TD>Row 1 Column 1</TD>
<TD>Row 1 Column 2</TD>
</TR>
<TR>
<TD>Row 2 Column 1</TD>
<TD>Row 2 Column 2</TD>
</TR>
<TR>
<TD>Row 3 Column 1</TD>
<TD>Row 3 Column 2</TD>
</TR>
</TABLE>

This is the result:

Row 1 Column 1

Row 1 Column 2

Row 2 Column 1

Row 2 Column 2

Row 3 Column 1

Row 3 Column 2

Now, let's break this little guy down. First, notice the table begins and ends with the <TABLE> </TABLE> tags.

You use <TR> </TR> to define each row. Notice there are three sets of these tags - so, three rows.

For every <TD> </TD> set nested inside a <TR> </TR> set, you have a column created. In our example, we have two <TD> </TD> sets within each <TR> </TR> set. Therefore, each row has two columns defined. Now, that wasn't too bad was it?

But, what is the <TH> </TH> tag I mentioned earlier? So good of you to ask. The <TH> </TH> tag is for a heading. Any <TD> </TD> tag set can be replaced by a <TH> </TH> tag set and become a BOLD style heading. Watch me change the columns in row one into headings:

<TABLE>
<TR>
<TH>Row 1 Column 1</TH>
<TH>Row 1 Column 2</TH>
</TR>
<TR>
<TD>Row 2 Column 1</TD>
<TD>Row 2 Column 2</TD>
</TR>
<TR>
<TD>Row 3 Column 1</TD>
<TD>Row 3 Column 2</TD>
</TR>
</TABLE>

Headings Result:

Row 1 Column 1

Row 1 Column 2

Row 2 Column 1

Row 2 Column 2

Row 3 Column 1

Row 3 Column 2

OK. Challenge question - What would you do to make all the data in column one a heading?

Creating more complicated tables can be a real challenge and great fun. I have some fantastic exercises planned for you at the end of this lesson.

top

Captions 

tag right after the starting <TABLE> tag and before row one.

<CAPTION> has an attribute to help you have a little more control over the placement of the caption.

You'll have to experiment with the 4 different align choices. Browsers may treat them differently. If you don't use right or left the caption will be centered. I think the two most useful attributes are "top" and "bottom".

Example:

<TABLE>
<CAPTION ALIGN=BOTTOM>This is a caption for the table.</CAPTION>
<TR>
<TH>Row 1 Column 1</TH>
<TH>Row 1 Column 2</TH>
</TR>
<TR>
<TD>Row 2 Column 1</TD>
<TD>Row 2 Column 2</TD>
</TR>
<TR>
<TD>Row 3 Column 1</TD>
<TD>Row 3 Column 2</TD>
</TR>
</TABLE>

Row 1 Column 1

Row 1 Column 2

Row 2 Column 1

Row 2 Column 2

Row 3 Column 1

Row 3 Column 2

This is a caption for the table.

top

Borders 

If you wish to include borders around all your cells, you will need to add the BORDER attribute to the <TABLE> tag. It is quite simple:

<TABLE BORDER=5>

<TABLE BORDER=1>
<CAPTION ALIGN=BOTTOM>This is a caption for the table.</CAPTION>
<TR>
<TH>Row 1 Column 1</TH>
<TH>Row 1 Column 2</TH>
</TR>
<TR>
<TD>Row 2 Column 1</TD>
<TD>Row 2 Column 2</TD>
</TR>
<TR>
<TD>Row 3 Column 1</TD>
<TD>Row 3 Column 2</TD>
</TR>
</TABLE>

top

Spanning Columns

Tip: More advanced tables can be a bit of a challenge when creating them from scratch. I think it helps to create your table on paper before attempting to code it.

top

ALIGN & VALIGN  

VALIGN is used in the <TR> <TD> <TH> tags. It may be used along with an ALIGN attribute. Its job is to vertically align the cell data. Your most common choices are top, middle or bottom. If you don't use VALIGN, the default is MIDDLE. When you use VALIGN in the <TR> tag all the columns in that row will be affected. Study this example:

<TABLE BORDER ALIGN=CENTER>
<CAPTION>Align Example</CAPTION>
<TR>
<TD ROWSPAN=2 COLSPAN=2></TD><BR>
<TH COLSPAN=3>HORIZONTAL</TH>
</TR>
<TR>
<TH ALIGN="CENTER">Left</TH>
<TH>Center</TH>
<TH>Right</TH>
</TR>
<TR>
<TH ROWSPAN=4>V</TH>
<TH>Top</TH>
<TD VALIGN=TOP ALIGN=LEFT>Top Left</TD>
<TD VALIGN=TOP ALIGN=CENTER>Top Center</TD>
<TD VALIGN=TOP ALIGN=RIGHT>Top Right</TD>
</TR>
<TR>
<TH>Middle</TH>
<TD VALIGN=MIDDLE ALIGN=LEFT>Middle Left</TD>
<TD VALIGN=MIDDLE ALIGN=CENTER>Middle Center</TD>
<TD VALIGN=MIDDLE ALIGN=RIGHT>Middle Right</TD>
</TR>
<TR VALIGN=BOTTOM>
<TH VALIGN=MIDDLE>Bottom</TH>
<TD ALIGN=LEFT>Bottom Left</TD>
<TD ALIGN=CENTER>Bottom Center</TD>
<TD ALIGN=RIGHT>Bottom Right</TD>
</TR>
</TABLE>

top

Cell Color  

You can add a BGCOLOR attribute to a table or to individual cells. The attribute goes in the <TR> <TD> <TH> or <TABLE> tags. Use one of the 16 predefined color names or hexadecimal numbers. The sixteen color names that most browsers recognize are: silver, gray, white, black, maroon, red, green, lime, navy, blue, purple, magenta, olive, yellow, teal, and cyan.

To make a row have a background color, put the BGCOLOR attribute in the <TR> tag. To place color in column cells put the attribute in <TH> or <TD> tags. Here are some examples. Study them carefully.

top

Background Image  

You can add a background GIF or JPG image to a table or individual cells, but the outcome may be difficult to read. Also, Microsoft and Netscape may handle the tag differently. You will have to play around with this attribute to see just how useful it may be. The attribute is included inside the <TABLE> tag or the <TH> <TD> tag. It looks like this:

<TABLE BORDER ALIGN="CENTER" BACKGROUND="fuji.jpg" WIDTH=400 HEIGHT=200>
<CAPTION><FONT COLOR="#FFFFFF">Points for Read A Thon Contest</FONT></CAPTION>
<TR>
<TD ROWSPAN="3">Data</TD>
<TH COLSPAN="3">9TH GRADERS</TH>
<TH COLSPAN="3">10TH GRADERS<TH>
</TR>
<TR ALIGN=CENTER>
<TD>Mon</TD>
<TD>Tue</TD>
<TD>Total</TD>
<TD>Mon</TD>
<TD>Tue</TD>
<TD>Total</TD>
</TR>
<TR ALIGN=CENTER>
<TD>6</TD>
<TD>4</TD>
<TD>10</TD>
<TD>7</TD>
<TD>2</TD>
<TD>9</TD>
</TR>
</TABLE>

top

No Wrap  

This attribute prevents a browser from placing the contents of a cell on more than one line. The attribute is placed in the <TH> <TD> tags. You could also use & n b s p ; between words - the code for a non-breaking space. Don't put any spaces between the six letters/symbols. I had to put them here so they would show up. If you want to force a line break in a cell, use <BR> just like you would outside a table. These two examples would give you identical results:

<TD NOWRAP>Evergreen College</TD>

<TD>Evergreen& n b s p ;College</TD>

Again, I put spaces between the non-breaking space code so it would show up in your browser. Be sure not to include the spaces. I don't think I'll give you an example of NOWRAP. It's a pretty simple attribute. I'm ready for this lesson to be over, and I still have one biggy to tell you about. I bet you're anxious to get to the assignments I promised. So, here's the last section about tables.

top

Table & Cell Width & Height  

I saved this attribute for last because we are going to use it two ways. The first is to take control of a table's size. Later, we will use these attributes to control our page layout. The attributes go inside the <TABLE> <TH> <TD> tags and look like this:

WIDTH=X
HEIGHT=X

The X can be size in pixels or the % of full window size. Should you design a table that is too small for the included data, the browser will ignore your stupidity and create more room for its occupants. Go back up to the table with the background of MT. Fuji. Above it you will notice in the code that I placed a WIDTH and HEIGHT attribute in the <TABLE> tag. I gave the width a value of 400 and the height a value of 200. By doing this all the cells were made wider and higher and allowed the entire image background to be displayed. Here is an example of using WIDTH and HEIGHT in a cell tag. Notice what happens to the other cells in the row. Also, the cell that spans three rows is affected. I suppose there are some rare occasions when you would want to do this sort of thing, like possibly including small pictures in a table and adjusting rows to fit the pictures. However, I personally find these attributes more useful when used on the entire table - like the Mt. Fuji table you previously studied.

<TABLE BORDER ALIGN="CENTER"> <CAPTION><FONT COLOR=#FFFFFF SIZE=2>BGCOLOR COMBOS</FONT></CAPTION> <TR> <TD ROWSPAN="3"><FONT COLOR=#FFFFFF>Data</FONT></TD> <TH COLSPAN="3" BGCOLOR=GREEN><FONT COLOR=#FFFFFF>9TH GRADERS</FONT></TH> <TH COLSPAN="3" BGCOLOR="#FFFF00"><FONT COLOR=#000000>10TH GRADERS</FONT><TH> </TR> <TR BGCOLOR="#00A5C6"> <TD WIDTH=100 HEIGHT=50><FONT COLOR=#FFFFFF>Mon</FONT></TD> <TD><FONT COLOR=#FFFFFF>Tue</FONT></TD> <tTD><FONT COLOR=#FFFFFF>Total</FONT></TD> <TD><FONT COLOR=#FFFFFF>Mon</FONT></TD> <TD><FONT COLOR=#FFFFFF>Tue</FONT></TD> <TD><FONT COLOR=#FFFFFF>Total</FONT></TD> </TR> <TR> <TD BGCOLOR=PURPLE><FONT COLOR=#FFFFFF>6</FONT></TD> <TD BGCOLOR=PURPLE><FONT COLOR=#FFFFFF>4</FONT></TD> <TD BGCOLOR=PURPLE><FONT COLOR=#FFFFFF>10</FONT></TD> <TD BGCOLOR="#FF8429"><FONT COLOR=#FFFFFF>7</FONT></TD> <TD BGCOLOR="#FF8429"><FONT COLOR=#FFFFFF>2</FONT></TD> <TD BGCOLOR="#FF8429"><FONT COLOR=#FFFFFF>9</FONT></TD> </TR> </TABLE> BGCOLOR COMBOS Data 9TH GRADERS 10TH GRADERS Mon Tue Total Mon Tue Total 6 4 10 7 2 9 Well, the more I think about this, the more I'm convinced I should include the TABLES AS PAGE LAYOUT in its own chapter. I've never seen a lesson like I intend to bless you with anywhere on the net. That doesn't mean it is no where to be found. I've hardly been everywhere on the Internet. I want to give you lots of examples and plenty of practice, so lets end this lesson on TABLES and get on with the practice assignments. top Assignment 1 - Lesson 9 For your first assignment you are to create a simple table from the following data. The actual data for the table will be in yellow. The red heading should not be typed. Include a border of size two. Besides Row 1, make each last name a heading as well. Center your table on the page. Print out your table and source code to hand in. TOP CENTERED CAPTION: 1998 Seattle Mariners Statistics Heading Row 1: Batting, AB, R, H, HR, RBI, SB, AVG Row 2: Martinez, 556, 86, 179, 29, 102, 1, .322 Row 3: Rodriquez, 686, 123, 213, 42, 124, 46, .310 Row 4: Segui, 522, 79, 159, 19, 84, 3, .305 Row 5: Hill, 259, 37, 75, 12, 33, 1, .290 Row 6: Griffey, 633, 120, 180, 56, 146, 20, .284 Row 7: Bell, 420, 48, 115, 10, 49, 0, .274 Row 8: Davis, 502, 68, 130, 20, 82, 4, .259 Row 9: Wilson, 325, 39, 82, 9, 44, 2, .252 Row 10: Buhner, 244, 33, 59, 15, 45, 0, .242 Row 11: Monohan, 211, 17, 51, 4, 28, 1, .242 Row 12: Ducey, 217, 30, 52, 5, 23, 4, .240 Row 13: Oliver, 240, 20, 54, 6, 32, 1, .225   Assignment 2 - Lesson 9 Create the following table exactly as shown. The top row of table cells are headings. Three cells have links. The link can be to tomato.htm, carrot.htm and lettuce.htm. Three cells have images. Three cells have lists. You will be graded on how well you make a table that looks like the one shown. Print out your table and source code to hand in.   Assignment 3 - Lesson 9 Create the following table exactly as shown. Notice that 6 of the table cells are headings. You will be graded on how well you make a table that looks like the one shown. Print out your table and source code to hand in.   Assignment 4 - Lesson 9 Create the following table exactly as shown. The first column, last column, first row and caption should all be bolded. You will be graded on how well you make a table that looks like the one shown. Print out your table and source code to hand in. top Table of Contents Lesson 10