Course Technology logoCourse Technology
Tutorial 4

*
Online 
 Companion 
 Home 

directory folder
Documents 
 Tutorial 1 
 Tutorial 2 
 Tutorial 3 
 Tutorial 4 
 Tutorial 5 


directory folder
Gallery 

directory folder
Software 

directory folder
Data Files 

directory folder
Reference 
 HTML Tags 




Web Pages and HTML icon

Designing  a  Web  Page
with  Tables
Creating a Products Page

Additional Topics

*Using a Background Image
*Column Groups


Using a Background Image

----
Internet Explorer version 3.0 and above supports an additional property for the <TABLE> tag, the BACKGROUND property. If you're using IE3.0 or higher, you might consider using the BACKGROUND property in your Web tables. For example, the following HTML code:

<TABLE BORDER BORDER=2 CELLSPACING=2 CELLPADDING=5 BACKGROUND="Aqua.jpg">
<TR><TH COLSPAN=2>
<FONT COLOR=WHITE>BACKGROUND Property Example</FONT>
</TH></TR>
<TR><TD>
<FONT COLOR=WHITE><B>This is</B></FONT>
</TD><TD>
<FONT COLOR=WHITE><B>an example</B></FONT>
</TD></TR>
<TR><TD>
<FONT COLOR=WHITE><B>of the</B></FONT>
</TD><TD>
<FONT COLOR=WHITE><B>BACKGROUND Table property</B>
</FONT></TD></TR>
</TABLE>

Creates the following table:
BACKGROUND Property Example
This isan example
of theBACKGROUND Table property

Note that the background image will appear only if you're using IE3.0 or higher.

To the top

Column Groups

----
HTML 4.0 supports a new tag for the creating and control of column groups. These tags allow the Web author to control the alignment of text within whole columns.

The syntax for the <COL> tag is as follows:

<COL ALIGN=Alignment SPAN=Value VALIGN=Valignment>

where Alignment is the horizontal alignment of text in the column(s) and can be either CENTER, JUSTIFY, LEFT or RIGHT, Value is the number of columns affected by the <COL> tag, and Valignment is the vertical alignment of text in the column(s) and can be either TOP, MIDDLE or BOTTOM.

The <COLGROUP> tag can as a container for <COL> tags, or you can use it on individual columns. The syntax for the <COL> tag is similar to the <COL> tag, i.e.

<COLGROUP ALIGN=Alignment SPAN=Value VALIGN=Valignment>

Here is an example of the <COLGROUP> tag used to align the text in the three columns of the table to the LEFT, CENTER and RIGHT respectively. The HTML code is as follows:

<TABLE BORDER WIDTH=250>
<TR><TH>A</TH><TH>B</TH><TH>C</TH></TR>
<COLGROUP ALIGN=LEFT></COLGROUP>
<COLGROUP ALIGN=CENTER></COLGROUP>
<COLGROUP ALIGN=RIGHT></COLGROUP>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
<TR><TD>7</TD><TD>8</TD><TD>9</TD></TR>
</TABLE>

which results in the following table (alignment is only visible in IE3.0 or higher.)

ABC
123
456
789

If you wish to center the last two columns of these table, you can do so using the <COL> tag along with the SPAN property. Here is some sample HTML code:

<TABLE BORDER WIDTH=250>
<TR><TH>A</TH><TH>B</TH><TH>C</TH></TR>
<COLGROUP ALIGN=LEFT></COLGROUP>
<COLGROUP><COL ALIGN=CENTER SPAN=2></COLGROUP>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
<TR><TD>7</TD><TD>8</TD><TD>9</TD></TR>
</TABLE>

which results in the following table:

ABC
123
456
789


As with all new HTML specifications, you should be made aware that the tables created with the <COL> and <COLGROUP> tags will not appear the same in browsers that don't support those tags. At present, Internet Explorer 4.0 and above supports these tags. Netscape does not. You can learn more about the <COLGROUP> and <COL> tags at Microsoft's HTML Table Reference or Microsoft's HTML General Tag Reference.


To the top

*
Website design by SKDesigns.Course Technology © 2000*
*