a tables and frame guide for html

Lesson 3 The Table and Frame Unit II

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.

KEYWORDS


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

HTML Program 1

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


Below is the Program Output of the HTML Program 1.

Program Output 1


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 Values Description

CELLPADDING “#pixels” “cell spacing” – represents the space

between cells and is specified by

pixels

CELLSPACING “#pixels” “cell padding” – represents the space

between the cell border and the

cell contents and is specified in

pixels

BGCOLOR “#RRGGBB”

Or “Color Name”

“background color” – specifies the

background color of a specific cell

BACKGROUND “image file name” “background” – specifies the relative

location of an image which is

loaded as background.

ALIGN “(Left/Center/

Right)”

“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

%.

BORDER “#pixels” “border” – Define the line that form the

boundary of each table cell.

BORDERCOLOR “#RRGGBB”

Or “Color Name”

“border color” – specifies the border

color around the cell.

BORDERCOLORLIGH

T

“#RRGGBB”

Or “Color Name”

“border color light” Light color used to

form 3D bordersaroundthecell.

BORDERCOLORDAR

K

“#RRGGBB”

Or “Color Name”

“border color dark” - Dark color used to

form 3D borders around the cell.


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

HTML Program 2


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


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


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


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 Values Description

HEIGHT “#pixels” or “%” “Height” – specifies the height in pixels or % of

the document height

WIDTH “#pixels” or “%” “width” – specifies the horizontal dimension of

the cell in pixels or %.

COLSPAN “#pixels” “Column Span” – Specifies the no. of cell

column that should span on a table cell.

ROWSPAN “#pixels” “Row Span” – Specifies the no. of cell row that

should span on a table cell.

CHAR “Character” “Character” –Specifies the cell content

character alignment, ALIGN=”CHAR”

ALIGN “(Left/Center/

Right/

Justify/Char)”

“alignment” – Specifies how text within the cell

will line up.

VALIGN “(Top/Middle/

Bottom)”

BACKGROUN

D

“Image file name” “background” – specifies the relative location of

an image which is loaded as

background.

BGCOLOR “#RRGGBB”

Or “Color Name”

“background color” – specifies the background

color of a specific cell


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

previous table.

HTML Program 4


Below is the Program Output of the HTML Program 4 that shows two

different Tables that used different Table attributes.]

PROGRAM OUTPUT:


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


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


The following are the AsianCountry.html and History.html programs which are

called in HTML Program 5.

AsianCountry.html Program


Below is the Program Output of the AsianCountry.html.

Program Output (AsianCountry.html)


Below is the History.html program invoked by the SRC attribute used in

HTML Program 5.

History.html Program


Below is the Program Output of the History.html.

Program Output (History.html)


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 = GreenColumn for Currencies = GrayColumn for Presidents = Red

KEYPOINTS

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.

a tables and frame guide for html

Documents

Transcript of a tables and frame guide for html