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: 14 - Tables, Part Three
    Prev: 12 - Tables, Part One
    13 - Tables, Part Two
    Sankira.gif
    Author: * Sankira Qin - 18 Posts on this thread out of 1,340 Posts sitewide.
    Date: Jun 18, 2005 - 09:28

    Tables, Part Two

    Now we have our two rows, two column table set up, let's see if we can tackle a little bit more complicated idea.

    I envision our webpage like this: we have the main body of the text in the first cell of the first row. Then we have the list of links (that are at the bottom of our page right now), in the second cell of the first row. Finally, we put the copyright information in the second row. But that's only one sentence and we have two cells. So, what if we center it across BOTH cells? How can we do that?

    It's not as difficult as it sounds, but it can be a little complicated when you start working on larger tables. So...good thing we have a simple little table to start, right?

    The first thing we need to do is look at our table and our code from Part One...so I'll bring it over. Here's our table:

    Main text

    Links list


    And here's the code we used to create it:













    What we need to do is join the two cells on the bottom row, so it looks like there's only one cell there. In HMTL, you can join together cells in the same row this way by using the colspan= attribute. This simply means you want one cell to span the width of two adjoining columns. So, we add this attribute to the first tag on the second row. Like this:


    Now here's where it can get confusing and tricky in a large table: now that your first cell is taking the place of TWO cells, you need to delete the second set of on the second row. Sounds simple...and it is. It's just in a large table you can get lost on which cells you delete and which you don't. So, now your code will look like this:












    which gives us:

    Main text

    Links list

    Copyright text



    If we had wanted to join together two columns, it gets a little more complicated. You use the rowspan= attribute for that. If we want the first column joined, we add it to the first set of tags on the first row. Like this:












    Notice there's only one set of tags on the second row. That's because the first one has been joined to the cell directly above it, making that cell span two rows, which gives us:



    If, instead of the first two, you wanted to second two cells combined, you would have put the rowspan attribute in the second cell of the first row, like this:












    Again, there's only one set of tags on the second row. And, again, it's because the second cell has been joined to the cell directly above it, making that cell span two rows. Like this:

    which gives us:



    Thoroughly confused yet?


    NEXT: 14 - Tables, Part Three
    PREV: 12 - Tables, Part One
Rome - Rome, Season 1 - The Stolen Eagle


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