|
|
Author: * Sankira Qin -
18 Posts
on this thread out of
1,340 Posts
sitewide.
Date: Jun 18, 2005 - 09:40
Adding the Table
Bearing our design plan in mind, I think we're ready now to tackle our document. Remember, we want (a) the main body of the text in the first cell of the first row; (b) our list of links, which are at the bottom of our page right now, in the second cell of the first row; and finally, (c) our copyright information in the second row spanned across both columns. Now ordinarily speaking, you would create the document text inside the table as you create it. But since our table is fairly simple, it shouldn't be too difficult to add the tags we need to the text we have. The default for tables is to have no borders showing, so temporarily, we'll add the border= attribute with a value of "1" and the bordercolor= attribute with a value of "blue". This is just so we can see what the table looks like to start. We will be removing these values later.
- Open your test document and put the cursor on the line immediately after the basefont tag.
- Begin the table creation with:
- Temporarily add the border and bordercolor attributes, so we can see what the table looks like when we get around to viewing the saved page.
- This opens the table, the first row, and the first cell. Scan down the document until you reach the end of the main body of text ("Many thanks to Ancientworlds and...") and the beginning of the source links list (Academy Lessons). Between these two lines is where our first cell ends, so close the first cell by inserting
- Now, we need to open the cell for the second column, so press return and add another tag to begin the second cell.
- Scan down the document until you reach the end of the links list (after the HTML Writer's Guild and before the copyright line). Close both the cell and the row using
- Almost there! We only have the spanned cell left. But we have to begin the row it's going to be on. So, press return to begin a new line immediately after your closing tag. On this new line, insert
to begin the new row and the first cell of it.
- Since we want this cell to take up the space of two columns, add the colspan= attribute with a value of "2" to the tag.
- Since this cell takes up both columns, there's no need to add a second column cell on this row. So we're ready to close the cell, the row, AND the table. Scan down to the very end of the document, immediately before the closing body and html tags, close the cell, row, and table. Like this:
Warning: It is particulary important to close your table cell and row tags in the correct order (last open; first closed) when creating tables. Your table can become hopelessly confused if you close the tags improperly. So it's always a good idea anytime you create a tag to create both the opening and closing tags at the same time. When building your table around existing text as we're doing, be sure you have a clear picture of what the table looks like and don't forget the tag order!
Now, if you save and view your document, it should look somethink like this: Tree of Life Garden.
|
|