J & D Graphics HTML Guide

Basic HTML Guide - Part Two: The Basic Tags

Tables

You've all seen them - web pages that look wonderfully formatted, neatly laid out. Well here's a little secret - it's not as complicated as it looks. Take the page you are reading, for example - The entire page is inside a table. Tables are very simple when you are used to them, but can appear to be complicated to start with. Examine the example below, and you should be able to understand how to create simple tables.

A table has rows, columns and borders, all of which are editable by you when you create them. One of the most common uses of tables is to constrain the width of a page so it will fit on most Internet Browsers, at most screen resolutions. The generally accepted screen resolution (at the moment, anyway) is 800x600, but you will find that most pages are designed to fit in the lowest possible Windows^® resolution, which is 640x480.

Here is a sample table, with the code and an explanation underneath.

<TABLE WIDTH="75%" BORDER="1" ALIGN="CENTER">
<TR>
<TD><B>Heading 1</B></TD>
<TD><B>Heading 2</B></TD>
<TD><B>Heading 3</B></TD>
</TR>
<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
<TD>Cell 3</TD>
</TR>
<TR>
<TD><I>Cell 4</I></TD>
<TD><I>Cell 5</I></TD>
<TD><I>Cell 6</I></TD>
</TR>
</TABLE>

The table starts and ends with the familiar opening and closing style tags: <TABLE> & </TABLE>. There are many options that can be set in the initial tag, such as the width of the table, as a percentage of the screen width or an actual pixel value, the width of the border around the cells and the alignment on the page (left, right or center). Two options that are not in the above table are the CELLPADDING and CELLSPACING tags. CELLPADDING allows you to set a distance, in pixels, that the data will appear from the edge of the cell, and CELLSPACING allows you to set the distance between the cells themselves. If these tags are not present, the table will use default padding and spacing, as seen in the table above.

[ - About - Gallery - HTML Guide - JavaScript - Subs - ]
[ - E-Mail - Disclaimer - ]