hitmill.com
link to hitmill.com home page

 

 

HTML Table Tutorials


 

 

 

Lesson #1:

Introduction to Tables


Tables give you some additional control over layout but not as much control as you will gain utilizing the more advanced technologies of cascading style sheets (CSS) and positioning elements with style sheets (CSS-P), XHTML, or XML/XSL technology... If you do not already use the most recent browser releases for Windows users or Mac users, now would be a good time for you to download a recent release of one of these browsers:
Opera Browser
Firefox
Amaya  (editor/browser from W3C.org has distributions for Windows NT/2000/XP, Debian-Ubuntu, Redhat-Mandrake-SUSE, Mac OS X Power PC-PowerBook, Mac OS X Intel- PowerBook). There is an older release of Amaya available for downloading to Windows 98 computers.
Internet Explorer Maxthon
=============
Optimized Firefox 2.0 for G4, G5, and Intel Macs
Mac OS X Browser Comparison
Safari
Camino v1.0.4 for OS X 10.2 or later.

Author's Note: "Deprecated"
This tutorial about simple tables covers the elements and attributes of the HTML 3.2 specification. Where possible, I have indicated the HTML elements and attributes which were deprecated with the HTML 4 specification. Briefly, deprecated means that a particular element or atrribute is in the process of being "phased out", to be supplanted by attributes of style sheets, an advanced topic and part of the planned DHTML section of this website. Deprecated means that future versions of browsers may no longer support a currently deprecated element or attribute, that it shall become obsolete. If you are a new student to HTML, you should focus on learning the table topics presented in this tutorial and know that as you gain skill in coding HTML, that a new technology coming into rapid acceptance is the topic of cascading style sheets (CSS) which you will want to learn about, later.

Layout with tables has become the most commonly used means of creating Web page layouts. This will change quickly as more HTML authors begin using style sheet positioning.

HTML tables are coded in the <BODY> section of the Web document. Some authors call this the <BODY> "container". Tables, out of necessity, are rectangular in shape. There are the same number of columns in each row and you cannot code a table having a shape other than a square or a rectangle. You may make a table cell that goes across one or more columns horizontally. As you study tables you will learn how to do this in Lesson #2 when you read about the COLSPAN attribute of the <TABLE> element. In the same lesson, as you read about the ROWSPAN attribute of the <TABLE> element you will be learning to make a cell that crosses two or more rows. The table shape, will still be rectangular or square even if some cells span across rows or columns. Let's begin making a table.

The table element in HTML is <TABLE> </TABLE>. Everything within a table is enclosed between these two "tags" which are both required.

<TABLE>
 
</TABLE>

<TR> is the table row element which begins each new row. </TR> must end each row. It will be easier for you to edit your tables if you follow a format of indenting the <TR> and the </TR> "tags" inward from <TABLE> and </TABLE> as follows:

<TABLE>
    <TR>
 
    </TR>
</TABLE>

This indentation format enables you to view your code and clearly see where each table row begins and ends. A row needs one or more others tags (a heading tag or a data cell tag) before you can put something into a table.

Data, images, and other elements are placed into the table by using either the table heading <TH> element or the table data <TD> element. Remember to use the row tags to tell the browser where the row begins (<TR>) and where the row ends (</TR>).

A centered heading in a table is made using the table heading <TH> element inside a row. </TH> closes the heading. If a heading for an additional column in the same row is desired, simply use another <TH> element and close with the </TH> for each additional column needed before closing the row with <TR>. The following code illustrates a row with headings in three columns. The default text alignment for the table heading element is centered text and by default, the text is bold.

<TABLE>
  <TR>
    <TH>Heading 1</TH>
    <TH>Heading 2</TH>
    <TH>Heading 3</TH>
  </TR>
</TABLE>

Note that I have indented the table heading elements inward from the table row elements. This is for clarity and for ease of editing later. In the above example, if you had needed five columns you simply would have used your table heading elements five times before closing your table row.

If you would like to add a border to this table you would have to add the BORDER attribute to the table element. Leave a space after the word TABLE and type BORDER="1" to make a border that is one pixel wide.

<TABLE BORDER="1">
  <TR>
    <TH>Heading 1</TH>
    <TH>Heading 2</TH>
    <TH>Heading 3</TH>
  </TR>
</TABLE>

The table now looks like this:
 

Heading 1Heading 2Heading 3

I see a problem with the table: the transparent background of this table is the same color as my page and if you were to make the same table coding that I have, you would also get a table with your page background showing through. Many of you with dark backgrounds would have a table very difficult, if not impossible to read. To get around this problem, use the BGCOLOR attribute in the table element to change the background color. We have already coded BORDER="1" so leave a space after that and type BGCOLOR="white" for now. This will give the table a white background. You will be learning more about the table element attributes in lesson #2.

<TABLE BORDER="1" BGCOLOR="white">
  <TR>
    <TH>Heading 1</TH>
    <TH>Heading 2</TH>
    <TH>Heading 3</TH>
  </TR>
</TABLE>

The new table with the background now white:
 

Heading 1Heading 2Heading 3

Table data cells are formed using the table data element <TD>. </TD> must be used to close each table data cell. If omitted, the table will not format correctly. You will be using the same number of table data elements in each table row as the number of columns in the table. Do not worry about advanced topics like nested tables for now. I shall be discussing advanced topics in later lessons. For purposes of this tutorial you are to assume that we are working on "simple" tables. Since my examples above have shown tables using three headings I will show you a new table row having three data cells.

<TABLE BORDER="1" BGCOLOR="white">
  <TR>
    <TH>Heading 1</TH>
    <TH>Heading 2</TH>
    <TH>Heading 3</TH>
  </TR>
  <TR>
    <TD>Column 1 data</TD>
    <TD>Column 2 data</TD>
    <TD>Column 3 data</TD>
  </TR>
</TABLE>

The table now has two rows and looks like this:
 

Heading 1Heading 2Heading 3
Column 1 dataColumn 2 dataColumn 3 data

Table data cells do not have to contain data. You can create a blank cell by coding <TD>&nbsp;</TD>. The code &nbsp; is an HTML special character entity for non-breaking space. Use &nbsp; in place of data when the cell is to be empty.

Before moving on to lesson two, a want to show you how to add images to table cells. To use something useful for this example, I am going to place an active link for Netscape Navigator into a third row in the first column and then an active link for Microsoft Internet Explorer into the third row in column three. I will use images for the links instead of using text links. This is how it is done. I go back to my previous table and before the </TABLE> I will add <TR>, three table data elements similar in coding to row 2 but without the row 2 text, and close the third row with the </TR>. So far, before adding any image links, the code looks like this:

<TABLE BORDER="1" BGCOLOR="white">
  <TR>
    <TH>Heading 1</TH>
    <TH>Heading 2</TH>
    <TH>Heading 3</TH>
  </TR>
  <TR>
    <TD>Column 1 data</TD>
    <TD>Column 2 data</TD>
    <TD>Column 3 data</TD>
  </TR>
  <TR>
    <TD></TD>
    <TD></TD>
    <TD></TD>
  </TR>
</TABLE>

I now make some code for the active image links so I can "park-my-code" inside each cell before adding each image SRC and each A HREF. The code I paste into each data cell of the third row is:
 

<A HREF="" TARGET="_new"><IMG SRC="" ALT="" BORDER="0"></A>

I highlight my line of code, then I use Edit, Copy to copy it. Each time I paste it I use Edit, Paste (Using Windows). Here is the table ready now to simply insert the linking information and the image information:

<TABLE BORDER="1" BGCOLOR="white">
  <TR>
    <TH>Heading 1</TH>
    <TH>Heading 2</TH>
    <TH>Heading 3</TH>
  </TR>
  <TR>
    <TD>Column 1 data</TD>
    <TD>Column 2 data</TD>
    <TD>Column 3 data</TD>
  </TR>
  <TR>
    <TD><A HREF="" TARGET="_new"><IMG SRC="" ALT=""          BORDER="0"></A></TD>
    <TD>&nbsp;</TD>
    <TD><A HREF="" TARGET="_new"><IMG SRC="" ALT=""          BORDER="0"></A></TD>
  </TR>
</TABLE>

The information for the Netscape Navigator link URL will be
http://home.netscape.com/computing/download/index.html?cp=dmg451top. The information for the Microsoft site is currently
http://www.microsoft.com/msdownload/iebuild/msnie5/EN/msn.asp
For my Netscape link I will use a file named netscape.gif and I will be using a file named msie.gif for the Microsoft link. The completed table after entering the linking information looks like this:

Heading 1Heading 2Heading 3
Column 1 dataColumn 2 dataColumn 3 data
Netscape Navigator link   Microsoft Internet Explorer link

These are copyrighted images owned by the two companies and may not be used without their express permission. This concludes the short lesson #1 tables tutorial. You may proceed to Tables Lesson #2. Lesson #2 is about the <TABLE> attributes.
 


 
 

 

 
Contact
 
Updated 27 March 2007
© hitmill.com
All Rights Reserved