|
Goto Lesson:
Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6 Lesson 7 Lesson 8 Lesson 9 Lesson 10 Lesson 11 |
Thus far the only way you have of laying things out is with returns and div's, but this greatly limits your options. This is where table come into play allowing for more advanced layouts. A table is one of the most advanced features of html and it will take some time and understanding to grasp how it works. Tables have rows which run horizontal, columns that run vertical, and then there are the cells which are caused by the intersecting rows and columns, this is where the data is displayed. When describing tables in HTML you only talk about rows and cells. Once the browser knows the number of rows and cells the columns are automatically formed. The first thing we are going to do is tell the browser we are putting a table here. Then we must put in our rows, cells, and data. Try the example code below to see how it works, an explanation will follow.
<html> <head> <title>Table example</title> </head> <body> <table> <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> Now let's go over the example above. first we use the <b>table</b> command to tell the browser we are putting in a table so that it is prepared to comprehend the commands. Next use the tr command to declare the start of a new row. Then we used the td command to delcare ourselves a new cell. We put are data in the cell and then when we are done end it with /td. Then we start our next cell and continue until it is time to start a new row and end the row with /tr and then start a new one. You must have an equal number of cells in each row. There are ways around it which we will discuss in the following lesson. When you are done with the whole table you use /table to end it. You must remember all data goes between the td and /td tags or it will not show and may mess up the table. You may now proceed to the next lesson and we will go over some advanced table options. |