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

    Tables, Part One

    Okay, now hang in there with me, because tables can get complicated. I'll try to make this as clear as possible.

    In HTML the most common method of laying out a webpage is by using tables. In most cases, you don't see a border around them, so you don't realize the page is laid out in tables. You just see columns of text that magically appear side by side. But behind the scenes, you may be seeing one table, multiple tables, or even tables inside tables (nested tables). They're not overly complicated, once you get the hang of them. You just need to know the basics of their layout in order to manipulate them. There are a lot of tables at AW.

    Tables are made up of rows and cells (also called divisions). Like this:



    Once these rows get stacked on top of each other, the cells become columns. Like this:



    Using HTML commands (which we'll be learning), you can cause these rows and cells to join together in various ways. Like this:



    The simplest table, of course, would be one row with one column (or one cell). Like this:



    You'll find you actually have use for this 1/1 size table occasionally, but for our document, we're going to start with two rows; two columns (2/2). Like this:



    You begin creating a table by announcing to the browser that the following code is a table. You do this using the tag. It is much easier to keep track of your tables if you create the opening and closing tags at the same time and work between them to fill in the cells and rows. So type this:






    Next, you must tell the browser you want to create a table row. The tag for this is and, again, you should open and close the tags at the same time. Like this:








    And finally, you must tell the browser you want to create a cell. Each cell begins with an opening ( ) tag and ends with a closing ( ) tag. Since you want two, you need to insert twice. (If you wanted three columns, you would insert this three times and so on. Like this:








    BUT, we want two rows. So, after we close our first row with the tag, we must open a new row and add two new cells to it. Like this:













    If you wanted more rows you would insert one series of

    for each row you wanted.

    Everybody with me so far?


    NEXT: 13 - Tables, Part Two
    PREV: 11 - Colors
Rome - Rome, Season 1 - The Stolen Eagle


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