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: 17 - Adding the graphics
    Prev: Glad you liked it Kallistos
    16 - Nesting the tables
    Sankira.gif
    Author: * Sankira Qin - 18 Posts on this thread out of 1,340 Posts sitewide.
    Date: Nov 10, 2008 - 18:06

    Making room for the graphics

    Now we need a way to add the graphics around the outside of the table we've just created. To do this we are going to put the graphics into table cells. So we need to create those cells. Since the graphics will completely surround the table we've already created, we are going to nest the existing table inside a new table. To get an idea of what I mean, see this document. The blue cells are the existing table. The red cells are the table we must create now.

    As you can see, the new table needs to be three columns wide. The first column will allow us to insert the graphic border on the left. The second column will allow us to place the main graphic in the center cell of the first row with the existing table in the center cell of the second row. And the third column will allow us to insert the graphic border on the right. We start above our existing table by opening the new table and adding the first row of cells: .
    1. Open your test document and put the cursor on the line immediately above the table tag.


    2. Begin by creating the new table with:



    3. As you see, I have temporarily added the border and bordercolor attributes, so we can see what the table looks like when we get around to viewing the saved page. Now, we have to open the second row, including the opening and closing tags for the first cell and the opening tag for the second cell:



    4. This takes us right up to the beginning of the existing table. Now, we have to drop to the bottom of the page and add the closing cells. First, we close the cell that contains our existing table. Then we add the last cell for the right border. Last, we close the row and then the table.




    Now, if you save and view your document, it should look something like this: Tree of Life Garden.


    NEXT: 17 - Adding the graphics
    PREV: Glad you liked it Kallistos
Rome - Rome, Season 1 - The Stolen Eagle


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