Sunteți pe pagina 1din 19

Lesson 3 The Table and Frame

Unit II

KEYWORD
S
Tables

Table Data

Tags
Table Header

The Table Elements

Tables consist of columns and rows. You can create tables in your webpage
when you want to display your data in row and column form. To create a table in
HTML, we use the <TABLE> </TABLE> tags. There are also Sub-element tags that
can be used for setting the Table Alignment.
Below are the tags that allow you to control on how text and images are
aligned without having to deal with the frustrating general tags that cannot place an
element, the way you prefer an image to appear. Sub-elements of Table are shown
below.

Tags

Description

<TR>

table row table row within a table

<TH>

table header table header cell

<TD>

table data table data element

<CAPTION>

caption caption name of a table

Lesson 3 The Table and Frame


Unit II
The following is an HTML Program that uses the Table element and its
attribute.
HTML Program 1

Lesson 3 The Table and Frame


Unit II
Below is the Program Output of the HTML Program 1.
Program Output 1

Lesson 3 The Table and Frame


Unit II
Table Attribute
Attributes that are within <TD> or <TH> cells overrides the default
alignment in a <TR>.
The Table shows the attributes, Values and Description of the element Table.
Table 1
Attributes
CELLPADDING

Values
#pixels

Description
cell spacing represents the space
between cells and is specified by

CELLSPACING

#pixels

pixels
cell padding represents the space
between the cell border and the
cell contents and is specified in

BGCOLOR

#RRGGBB

pixels
background color specifies the

BACKGROUND

Or Color Name
image file name

background color of a specific cell


background specifies the relative
location of an image which is

ALIGN

(Left/Center/Right
)

loaded as background.
alignment Specifies how text within
the cell will line up.

WIDTH

#pixels or % of
document

width specifies the horizontal


dimension of the cell in pixels or

#pixels

%.
border Define the line that form the

BORDERCOLOR

#RRGGBB

boundary of each table cell.


border color specifies the border

BORDERCOLORLIGH

Or Color Name
#RRGGBB

color around the cell.


border color light Light color used to

T
BORDERCOLORDAR

Or Color Name
#RRGGBB

form 3D bordersaroundthecell.
border color dark - Dark color used to

Or Color Name

form 3D borders around the cell.

BORDER

Lesson 3 The Table and Frame


Unit II

The following is an HTML Program that uses different attributes in Table.


HTML Program 2

Lesson 3 The Table and Frame


Unit II

Below is the Program output of the HTML Program 2. The output shows
the uses of the attributes Cellspacing, Cellpadding, BGColor, Background, etc.
Program Output 2

Lesson 3 The Table and Frame


Unit II
Table Caption
The Table caption specifies a line of text that will appear centered, above or
below. It is commonly used as the Table Title.

Caption has one attribute

ALIGN which can be TOP or BOTTOM. Below is an HTML Program that uses
Table caption.
HTML Program 3

Lesson 3 The Table and Frame


Unit II

The following is the Program Output of the HTML Program 3. It shows a


Table consisting of two rows and seven columns. Notice that all text in
between <TH></TH> tags are in bold letters while text that are in between
<TD> </TD> tags are in basic font style. It is the effect of the <B>tags in
between <CAPTION> Tag.
Program Output 3

Lesson 3 The Table and Frame


Unit II

Table Data and Table Header Attributes


Table Data
Commonly, cells are represented by TD (Table Data) element but they can
also be represented by TH (Table Header) elements.
Attributes
HEIGHT
WIDTH

Values
#pixels or %

Description
Height specifies the height in pixels or % of

#pixels or %

the document height


width specifies the horizontal dimension of
the cell in pixels or %.

COLSPAN
ROWSPAN
CHAR
ALIGN

#pixels

Column Span Specifies the no. of cell

#pixels

column that should span on a table cell.


Row Span Specifies the no. of cell row that

Character

should span on a table cell.


Character Specifies the cell content

character alignment, ALIGN=CHAR


(Left/Center/Right alignment Specifies how text within the cell
/

VALIGN

Justify/Char)
(Top/Middle/Botto

BACKGROUN

m)
Image file name

will line up.

background specifies the relative location of


an image which is loaded as

BGCOLOR

#RRGGBB
Or Color Name

background.
background color specifies the background
color of a specific cell

Lesson 3 The Table and Frame


Unit II

The following is an HTML Program that uses attributes presented in the


previous table.
HTML Program 4

Lesson 3 The Table and Frame


Unit II
Below is the Program Output of the HTML Program 4 that shows two
different Tables that used different Table attributes.]
PROGRAM OUTPUT:

Lesson 3 The Table and Frame


Unit II

Frames
Frames are used to display multiple HTML files. They act dynamic unlike in
table it is static. Website visitors find it appealing when the choices of information
are not pressed to one side of the page. Frames are well used when the main topics
are hyperlinked and placed at the left of the page. And all the content belonging to
a particular topic is placed at the right side of the page. Commonly, the left side
occupies only 20% of the page while the right side of the page takes the rest.

A Frame consists of at least 3 HTML documents. Frame elements are like


picture frames which can be divided horizontally, vertically, or even both. A sample
program is shown below.
HTML Program 5

Lesson 3 The Table and Frame


Unit II
Below is the Program Output of the HTML Program 5. You can notice that
the webpage is divided into 2 columns as set on the HTML Program. The output you
see on the left side of the page is the output of the AsianCountry.html which is
invoked by the SRC attribute. In the same way, History.html is the filename of the
program you see on the right side of the page.
Program Output 5

Lesson 3 The Table and Frame


Unit II
The following are the AsianCountry.html and History.html programs which are
called in HTML Program 5.
AsianCountry.html Program

Lesson 3 The Table and Frame


Unit II
Below is the Program Output of the AsianCountry.html.
Program Output (AsianCountry.html)

Lesson 3 The Table and Frame


Unit II
Below is the History.html program invoked by the SRC attribute used in
HTML Program 5.
History.html Program

Lesson 3 The Table and Frame


Unit II

Below is the Program Output of the History.html.


Program Output (History.html)

Lesson 3 The Table and Frame


Unit II

KEYPOINTS

Tables consist of columns and rows. You can create tables in your webpage
when you want to display your data in row and column form.

Table caption specifies a line of text that will appear.

Frames are used to display multiple HTML files.

Frames are well-used when the main topics are hyperlinked and place at
the left of the page.

HANDS-ON ACTIVITY:

ACTIVITY 1:
Create a program that will display a table containing 10 Asian countries,
their currency, and current president. The requirement is as follows:
Column for Countries = Green
Column for Currencies = Gray
Column for Presidents = Red
ACTIVITY 2:
Create a program that will display three frames from the three countries
enumerated in Activity 1. Include corresponding description to the said
countries.