Home HTML and CSS Tutorials The Basics of HTML

The Basics of HTML

Author: Selena Sol More by this author

Added: Oct 10, 2005 Rating:

Level: All levels Software: Dreamweaver

Basic Tables

Well, as I know you know by now, basic HTML does not actually give you much control over where things go on your page.
For the most part, the browser gets to determine placement and you are left simply communicating general layout instructions.
However with the introduction of HTML 2.0 in 1995 came the first really powerful tools for HTML layout: Tables.
Tables give you the ability to position elements in your page with much greater accuracy.
Of course, the original intent of HTML Tables was to provide a way to present tabular data in rows and columns.
Thus the first tables looked something like the following:

Column One Header	Column Two Header
Row One/Column One	Row One/Column Two
Row Two/Column One	Row Two/Column Two

A table is composed of several tags that are outlined in the table below:

<TABLE></TABLE>
Specifies an HTML table. (By default the table will have no borders)

<TH> </TH>
Specifies a Table Header Cell

<TR> </TR>
Specifies a Table Row Cell

<TD> </TD>
Specifies a Table Column Cell

Thus, the following code would create the very basic table that was shown previously:

<HTML>
<HEAD>
<TITLE>Table Example</TITLE>

</HEAD>
<BODY>
<TABLE>

<TR>
<TH>Column One Header</TH>
<TH>Column Two Header</TH>

</TR>

<TR>
<TD>Row One/Column One</TD>
<TD>Row One/Column Two</TD>
</TR>

<TR>

<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>
</TR>
</TABLE>
</BODY>
</HTML>

One thing to keep in mind about tables is that you may incorporate regular HTML formatting tags within a table. Thus you could make the contents of a cell bold with the following table cell definition:

Table Attributes

As you can see, the basic table is horridly bland.
Fortunately, the <TABLE> tag comes with several attributes to make it look nicer.
The attributes are shown in the table below:

ALIGN
Specifies how text will wrap around the table. This works the same as the ALIGN parameter for images. Valid values include RIGHT or LEFT

BGCOLOR
Colors the table background just as it would when used with the <BODY> tag.

BORDER
Specifies the pixel width of the border that divides table cells and the table itself. This table is set to BORDER = "1".

CELLPADDING
Specifies the amount of white space between the borders of a table and the actual data in the cell. The default is "1"

CELLSPACING
Specifies the amount of space inserted between table cells. The default is "2"

HEIGHT
Specifies the height of the table in absolute pixels or as a percentage of the available space.

WIDTH
Specifies the width of the table in absolute pixels or as a percentage of the available space

Tables by Example

Let's take a look at a few examples...
Here is a basic table with no border.

Column One Header	Column Two Header
Row One/Column One	Row One/Column Two
Row Two/Column One	Row Two/Column Two

Here is the code for that table:

<TABLE>

<TR>
<TH>Column One Header</TH>
<TH>Column Two Header</TH>
</TR>

<TR>
<TD>Row One/Column One</TD>

<TD>Row One/Column Two</TD>
</TR>

<TR>
<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>

</TR>
</TABLE>

Here is the same table with a border of 4.

Column One Header	Column Two Header
Row One/Column One	Row One/Column Two
Row Two/Column One	Row Two/Column Two

Here is the code for that table:

<TABLE BORDER = "4">

<TR>
<TH>Column One Header</TH>

<TH>Column Two Header</TH>
</TR>

<TR>
<TD>Row One/Column One</TD>
<TD>Row One/Column Two</TD>

</TR>

<TR>
<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>
</TR>
</TABLE>

Here is the same table with a border of 4 and a CELLPADDING of 10.

Column One Header	Column Two Header
Row One/Column One	Row One/Column Two
Row Two/Column One	Row Two/Column Two

Here is the code for that table:

<TABLE BORDER = "4" CELLPADDING = "10">

<TR>

<TH>Column One Header</TH>
<TH>Column Two Header</TH>
</TR>

<TR>
<TD>Row One/Column One</TD>

<TD>Row One/Column Two</TD>
</TR>

<TR>
<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>

</TR>
</TABLE>

Here is the same table with a border of 4, a CELLPADDING of 10, and a CELLSPACING of 10.

Column One Header	Column Two Header
Row One/Column One	Row One/Column Two
Row Two/Column One	Row Two/Column Two

Here is the code for that table:

<TABLE BORDER = "4" CELLPADDING = "10"
            CELLSPACING = "10">

<TR>

<TH>Column One Header</TH>
<TH>Column Two Header</TH>
</TR>

<TR>
<TD>Row One/Column One</TD>

<TD>Row One/Column Two</TD>
</TR>

<TR>
<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>

</TR>
</TABLE>

Here is the same table with a border of 4 and colored cells.

Column One Header	Column Two Header
Row One/Column One	Row One/Column Two
Row Two/Column One	Row Two/Column Two

Here is the code for that table:

<TABLE BORDER = "4" BGCOLOR = 'YELLOW">

<TR>

<TH>Column One Header</TH>
<TH>Column Two Header</TH>
</TR>

<TR>
<TD>Row One/Column One</TD>

<TD>Row One/Column Two</TD>
</TR>

<TR>
<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>

</TR>
</TABLE>

Here is the same table with a pixel width of 100.

Column One Header	Column Two Header
Row One/Column One	Row One/Column Two
Row Two/Column One	Row Two/Column Two

Here is the code for that table:

<TABLE BORDER = "4" WIDTH = "100">

<TR>
<TH>Column One Header</TH>

<TH>Column Two Header</TH>
</TR>

<TR>
<TD>Row One/Column One</TD>
<TD>Row One/Column Two</TD>

</TR>

<TR>
<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>
</TR>
</TABLE>

Here is the same table with a border of 4 and a pixel width of 80%.

Column One Header	Column Two Header
Row One/Column One	Row One/Column Two
Row Two/Column One	Row Two/Column Two

Here is the code for that table:

<TABLE BORDER = "4" WIDTH = "80%">

<TR>
<TH>Column One Header</TH>

<TH>Column Two Header</TH>
</TR>

<TR>
<TD>Row One/Column One</TD>
<TD>Row One/Column Two</TD>

</TR>

<TR>
<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>
</TR>
</TABLE>

Author's URL: Selena Sol