Mister Hungerford's Web Page

MESA

Web Page Design Competition

Lesson #6

MESA

Web Page Creation Activity #6 (Table)

The purpose of this activity is to continue your introduction of a few simple commands of HyperText Markup Language (HTML). You will experiment with web page creation using a simple text word processor and HTML coding.

During previous activities we have learned the basic HTML document format.

<HTML>
<HEAD>
<TITLE> The name of your page.

</TITLE>
</HEAD>

<BODY> All the stuff in your page goes here.

</BODY>

</HTML>

Ø The HTML tag defines the document as a web page. All other tags are nested within it.

Ø The head contains information not displayed as part of the web page.

Ø The body contains the displayed portion of the page.

Tables . . .

The use of HTML tables in Web pages goes beyond the tabulating of data, as in the case of traditional tables. They are frequently used to format Web pages and control their layout. All table tags operate in pairs, so each item will have a starting and ending tag. The entire table is enclosed between <TABLE> and </TABLE> tags. Tables are divided into rows and columns. The intersection of a row and a column is called a "cell". Each table row is defined by the Table Row tags <TR> and </TR>. Each cell is defined by the Table Data tags, <TD> </TD>.

Attributes for tables will be discussed later. Let us look at an example of Basic Table Coding:

<HTML>
<HEAD>
<TITLE> THE NAME OF YOUR PAGE.

</TITLE>
</HEAD>

<BODY>

<TABLE>

<TR>

<TD> ITEM IN 1^ST CELL, 1^ST ROW</TD>

<TD>ITEM IN 2^ND CELL, 1^ST ROW</TD>

</TR>

<TR>

<TD> ITEM IN 1^ST CELL, 2^ND ROW</TD>

<TD>ITEM IN 2^ND CELL, 2^ND ROW</TD>

</TR>

<TR>

<TD> ITEM IN 1^ST CELL, 3^RD ROW</TD>

<TD>ITEM IN 2^ND CELL, 3^RD ROW</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Table Attributes:

<TABLE> . . . </TABLE> The table caption labels the entire table. This tells the person viewing the page or table why it was created or what it is intended to show.

<TH> . . . </TH> The table header code labels just the column or row. It can be used instead of the ordinary Table Data (<TD> and </TD>) tags in the first cell of the row or column.

BORDER=x Table border, adds border around the entire table.

BORDERCOLOR="#FF0000" Specifies the color of the border.

WIDTH=xx% Controls the width in a table, either for the entire table or just for a column.

ALIGN="LEFT" aligns the entire table to the left margin of the page.

ALIGN="CENTER" aligns the entire table in the center of the page.

ALIGN="RIGHT" aligns the entire table to the right margin of the page.

CELLPADDING=x controls the white space between the edge of the cell and its contents.

Spanning: (row or column attributes)

COLSPAN=x particular cell's contents to span several columns.

ROWSPAN=x particular cell's contents to span several rows.

For more information on HTML check the following sites:

Digital's HTML Starter Page