Tables
Tables are one of web designs most used tags and can be used to align images, although this is not a opinion shared by all. In the next tutorial we will make a table and add some color to it. Open notepad and copy the example below.
Example 8
| <html> <head> <title>Tables</title> </head> <body> <table border="4" cellspacing="2" cellpadding="3" width="200"> <tr> <td bgcolor="#FF0000"> </td> </tr> <tr> <td bgcolor="#00FF00"> </td> </tr> </table> </body> </html> |
The result of this example will look like the one shown below.
What does that all mean?
We first need to use the table tag, within this tag we add some new properties, the first being border. A border is what is displayed in purple in this example it has a thickness of 4 pixels, we use the bordercolor property to display what color we want the border to be. We then add cellspacing and cellpadding respectively, the best way to describe these are to consider a painting for both of these, the gap from the frame to the actual painting is cellpading and cellspacing is the gap inbetween the two paintings. Lastly we declare how long the table is, in this example it is 200 pixels wide. We then add a table row by using the <tr> (table row) tag, within this table row we want a table data cell, defined with the <td> tag, finally we add the background color by using bgcolor we close each tag respectively.
In the next tutorial we are going to do some rowspan and colspan, open notepad and copy the example in.
Example10
| <table width="200" border="3" bordercolor="#FF6633" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td> </td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td> </td> <td rowspan="3"> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> |
The result of this example will look like the one shown below.
What does that all mean?
You have set the column span by using colspan and you have set the row span by using rowspan the dfference in the two is that column span means how man columns <td> table data cells does the current <td> need to span across, row span is the opposite in that it means how many rows <tr> table rows does the current <td> need to span across. The best way to remeber this is that colums are horizontal and rows are vertical.
 Images and Hyperlinks |
