|
Goto Lesson:
Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6 Lesson 7 Lesson 8 Lesson 9 Lesson 10 Lesson 11 |
Ok first lets deal with just the table tag and all the options it has. I will use the example from the last lesson and show you all the available options and follow with an explanation of each.
<html> <head> <title>Table example</title> </head> <body> <table width="75%" height="500" border="2" bordercolor="red" cellpadding="4" cellspacing="4" bgcolor="yellow"> <tr> <td> This table has two rows and three columns (or is three cells wide). This is cell 1. </td> <td> This is cell 2 </td> <td> This is cell 3 </td> </tr> <tr> <td> This is row 2. This is cell 4 </td> <td> This is cell 5 </td> <td> This is cell 6 </td> </tr> </table> </body> </html> You can see the effects this had on our original table, it now has color and different sizes and spacing. Width and height obviously set the width and height of a table either in percent or pixels or both. border sets the width of a border around the cells and table(note: this can be set to zero for no borders). The border color can be changed with the bordercolor command and the table background can be set with bgcolor. Cellpadding and cellspacing set how much are should be placed around the cell and will allow you to space out your data. Now lets move on to the td tag (the tr does not have many useful options). Try and replace a td tag with the one below and see the results. <td width="75" height="150" bgcolor="blue" valign="top"> <br><br> The width and height set the height of only that cell. The bgcolor will set the background color of just that cell. The valign tag is a new one, it sets the vertical alignment of the text inside. We set our vertical alignment to top, but it can also be center or bottom. The final td command is the colspan command. This is how you put less cells in one row than another there is also a rowspan which goes in the tr tag. You would just put colspan="x" in the td tag where x is the number of cells you want to span. Now you know all about tables and this is the exent of these HTML lessons. There is several more features associated with HTML, but they are not gone over in this lesson. Proceed to the next page to see where you can find more about HTML. |