the <<>table>, <<>tr> and <<>td> tags above. We can use background="URL of pattern" if we wish, the same as in the <<>body> tag of a web page or e-mail. You can play with that attribute yourselves -- it is straight forward, no tricks at all!
Step 19 Colspan:
Step 20: Rowspan
Step 21: <<>caption> tag
You can also have the caption at the bottom of the table by using align="bottom" inside the <<>caption> tag and you can change the font size:
This is the code for the last table:
<<>center>
And we are finished with that table -- you now know all the tags and attributes for any type of table. It is just a matter of combining them in different ways. Try changing some of the codes using the testbed or the notebed and see what you get -- it's fun and educational!
The <<>th> tag is a specialized tag used for headings of table columns and rows. It has the same attributes of the <<>td> tag, but centers text and makes it bold. I will just demonstrate its use here by making a 3x3 table:
Now for one last basic skill with tables:
Step 23: Nested Tables
The inner frame is the background image: sort of a rainbow effect. There are four tables used, each with a single <<>td> cell. The inner table has a frame (border) and the picture is in its <<>td> cell. All the other tables have a table in their <<>td> cells. Here is the code with the code for each of the tables in a different color:
Once you understand the concept, it is a simple way of framing a picture and when you use the background image, you can come up with some strikingly beautiful, unusual effects.
There is one other thing I should mention: gradcolors or gradtables. Gradcolor may be used as background colors on web pages. It is a WebTV (MSNTV) effect only -- it cannot be viewed by people with a computer, but it is being used to make some strikingly different images with table tags.
This is a recapitulation of what we have covered in this class:
Ready for something more difficult? Here goes:
There's one here to start us on a new, higher level, table adventure.
Please send comments or recommendations for improving this lesson to Farmer-Dave. Thanks for your interest and
"Colspan" and "Rowspan" are the next two attributes we will demonstrate. Each can be used only in the <<>td> tag.
First, colspan. Using the code at the top of this page, make the top cell span both columns of the table:
Action: Enter colspan="2" in the <<>td> tag for Row 1 Cell 1, and delete Row 1 Cell 2
Row 1
Cell 1
Row 2
Cell 1Row 2
Cell 2
Using the code at the top of the page (no colspan), make the left hand cell span both rows of the table:
Action: Enter rowspan="2" in the <<>td> tag for Row 1 Cell 1 and delete Row 2 Cell 1
Row 1
Cell 1Row 1
Cell 2
Row 2
Cell 2
Okay, nearly done with Basic Tables -- just one more fairly new tag, <<>caption>, one specialized tag, <<>th> and one effect, nested tables.
Place the title Basic 2x2 Table above our table:
Action: Enter <<>caption>Basic 2x2 Table<<>/caption> after the <<>table> tag
Row 1
Cell 1Row 1
Cell 2
Row 2
Cell 2
Row 1
Cell 1Row 1
Cell 2
Row 2
Cell 2
<<>table border="1" cellspacing="10"
bgcolor="springgreen" width="90%">
<<>caption align="bottom"><<>font size="6">Basic
2x2 Table<<>/font><<>/caption>
<<>tr bgcolor="pink" align="center">
<<>td height="100" valign="top"
rowspan="2">Row 1<<>br>Cell 1<<>/td>
<<>td height="100" valign="bottom">
Row 1<<>br>Cell 2<<>/td><<>/tr>
<<>tr align="center" valign="bottom">
<<>td bgcolor="orange" height="100">
Row 2<<>br>Cell 2<<>/td>
<<>/tr><<>/table><<>/center>
Step 22: <<>th> tag
Col 1 Col 2
Row 1
Row 1
Cell 1Row 1
Cell 2
Row 2
Row 2
Cell 1Row 2
Cell 2
By placing one table inside another, we can make a frame for a picture. We can use either a background color or a background image for the frames. For example, here is one with 3 colors and one background image all surrounding a jpg image:
<<>table border="10" bgcolor="blue">
<<>tr><<>td><<>table border="5" bgcolor="gold">
<<>tr><<>td><<>table border="10" bgcolor="red">
<<>tr><<>td><<>table border="15" background="rbow2back.gif">
<<>tr><<>td><<>img width="331" height="241"
src="mtn120.jpg" alt="mountains">
<<>/td><<>/tr><<>/table>
<<>/td><<>/tr><<>/table>
<<>/td><<>/tr><<>/table>
<<>/td><<>/tr><<>/table>
For example,
you can view many talented artists here.
And this is a tutorial for the basics.
(Click on any item you want to read again)
<<>table> tag:
<<>td> tag:
<<>th> tag:
Make a 7 row, 7 cells per row table.