Welcome
Arachne's Web
A group focused on serving the AW community by providing help and discussion on topics such as HTML, CSS, web design, homesite decorating, netiquette and issues important to web artists.

Arachne's Web Academy (- threads, 696 posts)
    Tutorials - HTML/XHTML (320 posts)
    Social Thread

    Expand your own skills and aid others in learning HTML to XHTML by offering us a tutorial of your own! ...
    26 Members have made 110 Posts here to date.
    Google
    AncientWorlds.net Web
    Next: Awesome Tutorial's!!
    Prev: 14 - Tables, Part Three
    15 - Adding our table
    Sankira.gif
    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.
    1. Open your test document and put the cursor on the line immediately after the basefont tag.


    2. Begin the table creation with:



    3. 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.



    4. 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


    5. Now, we need to open the cell for the second column, so press return and add another tag to begin the second cell.


    6. 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



    7. 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.


    8. 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.



    9. 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.


    NEXT: Awesome Tutorial's!!
    PREV: 14 - Tables, Part Three
Rome - Rome, Season 1 - The Stolen Eagle


Copyright 2002-2011 AncientWorlds LLC | Code of Conduct and Terms of Service | Contact Us! | The AncientWorlds Staff