Beginners Guide to HTML Part 2

Written By: Kevin Jordan

- 30 Mar 2006 -

Description: This tutorial is designed for beginners who are just starting on the path to learning web programming. We'll start by describing the parts that every HTML document has and then move all the way through tables and forms.

  1. Intro to Tables
  2. Table Rows and Columns
  3. Forms

Row Options

Rows aren't too complicated. The main feature is height. Height sets a fixed height for each row, once again if the row needs to grow it will, but this is more like a minimum height. I also set valign here from time to time.

Division Options

You can set the width and alignment from a division, but you also have the ability to span from the <td> tag. You can span rows with rowspan and columns with colspan, makes sense.

<table cellspacing="10" cellpadding="15" border="5">
        <tr>
                <td  rowspan="2">Box 1</td>
                <td>Box 2</td>
        </tr>
        <tr>
                <td>Box 4</td>
        </tr>
</table>

Here's what the HTML code for a rowspan would look like. Notice that the number of table divisions is not the same for each row. That's because the td with rowspan=2 is actually in both rows.

Colspan is very similar. To illustrate this, I'm going to show you the code for the layout I presented earlier.

<table width="600" cellspacing="0" cellpadding="0" border="0">
        <tr>
                <td colspan="3">This is the header</td>
        </tr>
        <tr>
                <td colspan="3">This is the navigation under the header</td>
        </tr>
        <tr>
                <td>Left navigation</td>
                <td>Document body</td>
                <td>Right navigation</td>
        </tr>
        <tr>
                <td colspan="3">Here's the footer</td>
        </tr>
</table>

Now you have a layout that you can program a prize winning site with. Add some colors, some pictures, and a lot of original content and you'll be getting visitors to your site in no time.

<< Previous

Next >>