Tables
Tables are used in almost every commercial web site and most of the time you would not know that there are table in the page until you see the html source. Table are so universally applicable and very useful. I measure a web designer's command over HTML with his usage of table.
Look at the table below and its HTML code on the right:
|
<table background="backMain.jpg"> <caption> Table1 </caption> <tr> <td> row # 1, column # 1 </td> <td> row # 1, column # 2 </td> </tr> <tr> <td> row # 2, column # 2 </td> <td> row # 2, column # 2 </td> </tr> </table> |
Every table starts with a <table> and ends with a </table>. Do you notice a familiar attribute inside <table>? In the previous lesson, you saw how an image can be placed in the background. The same syntax applies for <table>. You can also use bgcolor attribute as in the table below the original one.
As you can see, <caption> is table's version of heading. I strongly recommend that you use <caption> instead of <h1>...<h6> tags. I do so because <caption> is table's version of heading. To prove my point, I would like to mention that the line below the second table which says "Table2" is also a caption. Why did I suggest that <caption> is table's version of heading and then contradict myself with a proof? <caption> is very often considered to be the same as <h1>..<h6>, even though it is different. <caption> is a label for the table. A table can have its label on the top, bottom or may not have a label. I wanted to present this fact in a way that all readers will remember. You can't blame me for trying!
Below are the HTML codes for the two table above:
| |
|
| <table background="images/backMain.jpg"> <caption> Table </caption> <tr> <td> row # 1, column # 1 </td> <td> row # 1, column # 2 </td> </tr> <tr> <td> row # 2, column # 2 </td> <td> row # 2, column # 2 </td> </tr> </table> |
<table bgcolor="666666"> <tr> <td> row # 1, column # 1 </td> <td> row # 1, column # 2 </td> </tr> <tr> <td> row # 2, column # 2 </td> <td> row # 2, column # 2 </td> </tr> <caption align=bottom> Table2 </caption> </table> |
Notice that the the align attribute is used in Table2 and <caption> is located just above </table>. The codes above are in table. This table does not have a caption, background image or color. If you do not specify something for the background, then background of the page is the default. In this table <font> tag is used to change color and <b> is used on "Table1" and "Table2". All the tricks you learned about can be used in the table. Can all the tricks you learned about images be also used? Yes.
|
If you look closely you will see some very interesting things on the table to the left, besides the image. The pidulcture on the top left is picture posted on a black background. The picture on its right is the same sized picture but posted on a white background. The box below (these boxes are called cells) has the picture posted with the same picture as the background. Now why did I do that? Note: The top two cells of the table on the left would not show a background if you are using Internet Explorer. |
||||
| <table> <tr> <td bgcolor="#000000"> <center> <img src="headache.gif"> </center> </td> <td bgcolor="#FFFFFF"> <center> <img src="headache.gif"> </center> </td> </tr> <tr> <td colspan="2" background="headache.gif"> <img src="headache.gif"> </td> </tr> </table> |
|||||
Are you wondering how I got this green background in the middle of the page. Very simple, the green colored thing above is a table and in the top right cell, is another table. But where the frame of the table? Do you see a thin line of the background between the green background. Well, that is the frame of the table. You see the table1 and table2 that we talked about at the top of the page. They are also inside a table! Only this time the thin line is invisible because the background of the table and the web page is the same. Wait a minute! I see a frame around the table just above the green table and this one also shares the same background image! You got me this time. Here is how it is done.
<table border="0">
This border attribute defines the thickness of the border. 0 means a thickness of zero, in other words no border. Now how about a thick border example.
|
<table> <tr><td><table border=2> <tr><td><table border=3> <tr><td><table border=4> <tr><td><table border=5> <tr><td><table border=6> <tr><td><table border=7> <tr><td><table border=8> <tr><td><img src="cool.gif"></td></tr> <caption align=bottom> Cool ain't it! </caption> </table> </td></tr></table> </td></tr></table> </td></tr></table> </td></tr></table> </td></tr></table> </td></tr></table> </td></tr></table> |
Let's backtrack to the table with 3 images. The top row of that table has two cell, but the bottom has only one cell. This is accomplished by the colspan attribute. The assigned to the attribute tells how many columns you want to cover. What do you think a rowspan attribute would do.? Try it.
Hint: Same syntax