HTML Tables, bring order to chaos, Part 1

Note: this tutorial will display oddly on some browsers/screen resolutions because of the combination of "pre" tags and tables. You might try a smaller font and/or a higher screen resolution. We will also offer much of the code and the tables as free standing files you can view via links in the tutorials.

After you get the basic web page concepts like a couple of pages that link back and forth, maybe insert an image or two, you are ready to turn your eye to the appearance and layout of your page. Tables are one of the most basic methods of forcing page content to present in a controlled format. Today Cascading Style Sheets (CSS), divisions and layers may offer more advanced coders options, tables are still one of the easiest and most versatile layout tools. Let's dig in and see why.

A table will divide to conquer:

A table will break a page into rows and columns. This will allow you to create an orderly layout of certain types of data. As you get better, you can use them to create margins, generate columnar pages, or just to make nice rows with alternating colors. The uses are endless.

The first of three containers, the table tag:

Tables can only go in the body of your HTML document. Where you wish to place your table, put a set of table tags:

	<table border='0' cellspacing='0' cellpadding='0' width='100%'>
	  containers two and three will go here
	</table>

The tag could simply be <table></table>, but using the other attributes, border='*' cellspacing='*' cellpadding='*', and width='*' with appropriate values will result in more controlled results. We will discuss attributes in more detail in later parts of this tutorial.

The second of three containers, the row tag:

Inside the table tags you place the next container, the row tags. You can have successive rows of data by repeating the row tags. These tags might look something like this:

	<tr align='left' valign='top' bgcolor='#00FFFF'>
	container three goes here
	</tr>

Again you could get by with just <tr></tr>, but you will get better results by adding appropriate values in the attributes, align='*' valign='*' bgcolor='*' as you get better at using tables.

The third of three containers, the column tag:

Inside the row tags you place the next container, the table data tags (commonly called column tags). You can have successive columns of data in one row by repeating the table data tags. These tags might look something like this:

	<td align='left' valign='top' colspan='1' rowspan='1' bgcolor='#0000FF'>
	container three goes here
	</td>

These are commonly called column tags, but "td" comes from Table Data. Once again you can use the attributes, align='*', valign='*', colspan='*', rowspan='*', and bgcolor='*', to enhance the presentation of your table data as you learn more.

One simple table before we move on:

Using these tags:

        <table border='1' border='2' cellspacing='2'>
          <tr>
            <td>
            Row1 Cell1
            </td>
            <td>
            Row1 Cell2
            </td>
          </tr>
          <tr>
            <td>
            Row2 Cell1
            </td>
            <td>
            Row2 Cell2
            </td>
          </tr>
        </table>

Renders this:

Row1 Cell1	Row1 Cell2
Row2 Cell1	Row2 Cell2

Links for this table: html view of this table :: text view of this table's code

You should be able to duplicate this first simple table on your computer and view it in your browser. Either cut and paste it, or type it manually, into your plain text editor. If you do it right and save it with the extension ".html" you should be able to view it in your browser by typing the location of the file into the address bar of your browser (for example: c:\desktop\htmlfiles\table1.html). Be sure that your editor isn't adding the ".txt" extension at the end of the file (fix by typing your filename in quotes "filename.html"). Also be sure that your copy doesn't have a tag at the top which reads <plaintext> because that will prevent the file from displaying as html (fix by deleting that line if it is present). If you are having troubles getting it to display, visit us in live chat where we can talk you through it. As soon as you can view it in your browser, you are ready to move on.

Tables Tutorial: part 1 :: part 2 :: part 3