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

Tables

You should now know everything you need to make a standard linear page. But most pages have columns for navigation and rows of data. For this you're going to need tables. Unless you decide to move onto XHTML, tables will be the most important design feature of any web page you create.

Table Structure

This is how your standard HTML table is set up. Within the table you have table rows, . The table row is then subdivided into division, . You can have as many table divisions, or columns, as you want per table row, but each row needs the same number of divisions if it's within the same table (there are ways to get around this, we'll cover it later).

Here's a picture of your standard table.

Click Here To View The Image

I'll show you how this is coded in a minute, first let's dive a little deeper into the table options.

Table Options

When you create the table, you'll need to specify a few things. Namely the cellspacing, cellpadding, and border.

Your standard HTML table like to put extra room so not everything is squished together, but if you're trying to piece two images together, that space will be a big hassle. Here's an image of the 3 components.

Click Here To View The Image

I greatly exaggerated these so you can see each piece. The cellpadding is the area that around the text from each . This is what I usually use to add space between my table elements.

Cellspacing is between the inside border and the outside border. I've never used this, but it creates a neat little window frame effect.

Border creates depth to it looks like the table is protruding from the page. It's pretty ugly for the most part. With style sheets you can set the border to a solid line and set a color, and then it actually serves a purpose.

A couple other settings I use within the HTML table tag are align, valign, and width. Align can be set to left, right, or center, and is the starting position on a page for the table. Valign can be set to top, middle, or bottom. If the table divisions aren't the same length then you have to tell them how to line up. You'll typically see top being used.

 width="600" cellpadding="0" cellspacing="10" border="0" align="center" valign="top">
 
 width="90%" cellpadding="0" cellspacing="10" border="0" align="center" valign="top">

There are two ways to set the width of a table, fixed (static) and liquid (dynamic). Liquid tables change the width based on the size of the browser window and are expressed in a percentage. Fixed tables are set by a pixel quantity. One thing to keep in mind is if you have a large image that is wider than the set width, the table will grow to accommodate. Here's how the two would look.

Next >>