Creating Tables and

Hyperlinks in HTML

In the previous chapter. you learnt about

serting lists and images in a
webpage. Your OBJECTIVES
knowledge ot tTM18 ncomplete without
After having studied this lesson,
learningabout tables and hyperlinks. Tables you will be able to:
help vou organise data structured manner
in a
create tables in HTML.
in a webpage whereas hyperlinks enable you B create hyperlinks in HTML.
to connect different webpages. Look at the
webpage shown in
Fig. 51. It contains tables and hyperlinks.

Royal Orchid
A leading name in the Hospitality Industry Hyperlinks

The Royal Orchid founded in 1934,

SIESS HOTELS LIESURE HOTELS GRUTSES SPECTAL OFFEES
operates 28 hotels and three cruisers in five countries. The
aiport estauranta, travel and tour serices, car rentals, project management and corporafe airGroup
is also
engoged
chartera. Royal
In
Orchid flight
oTelscatering.
a
Resorts a r e synonymous the world over with
Tor ai-reund xceilence and
providing the right blend of service,
lunury and quiet efficiency Internaticnally recognised
uparalieled levels of service, Royal Orchid Hotels & Resorts have received innumerable awards and
odes
-coa

Tariff Plans

Deluxe Room Single/Double 2950

Sperior Room Sirgle/Double
Table Sunte Single/Double
2550
3500

Fig 5.1 A webpage showinga table and hyperlinks

In this chapter. you will learn about creating tables and hyperlinks in HTML.

CREATING TABLES IN HTML

Tables let you present data in a row and column format. You can use tables to format
and organise information systematically in a webpage.
The basic structure of table consists of the
a
following tags:
TABLE>...</TABLE> tags
TR and </TR> tags
3. <TD> and
</TD> tags
The <TABLE> and </TABLE> tags mark the beginning and the end of a table in an
iML document. A table is divided into rows using the <TR> tag. Each row is divided
into data cells using the <TD> tag.
65
 You can include text, images, lists, form elements or a hyperlink in a data
cell. Tho
number of pairs of <TR> and </TR> determines the number of rows in a table.
The
given HTML code uses the basic table tags to display a table without borders.
TABLE
TR TD>Count ry</TD> E cAUsersadminlDeP CXCAUe
TD>Capital</TD> </TR> Eile Edit View Favorites Iools Help
T R TD>I ndia</TD>
Country Capital
TD> Delhis/TD> </TR> India Delhi
TR> TD>Germany</TD> Germany Berlin
TD>Berlin</TD> </TR>
TABLE>
To specify the border for a table, you need to
use the border attribute of the <TABLE> tag.
Fig 5.2 Output (table without borders)
You can include the heading for a table using the <CAPTION> tag. You can also
specify
the row headings using the <TH> and </TH> tags. The text enclosed within the
tag is aligned centrally inside the cell and is displayed in a bolder font. The given
<TEs
HTML code shows the usage of these tags:
<TABLE border="5">
<CAPTION> List of Countries and Capitals </CAPTION>
<TR> <TH>Country</TH> <TH>Capital</TH> </TR>
<TR><TD> India</TD> <TD>Delhi
/TD> s/TR>
<TR> <TD>Germany</TD> CAUsersiadmin De P Cx@ CAUseriadn
Eile gdit iew Favorites Jools Help
<TD>Berlin</TD> </TR>
</TABLE> Caption List of Countries
and Capitals
Let us now learn about
Table headings Country Capital
Some more attributes of the
created using
<TABLE> tag to enhance the the TH> tag
India Delhi
appearance of a table. Germany Berlin
Table border
Fig 5.3 Output (table with border
caption and row headings)
66
A t

ibutes of
<TABLE Tag
f the other attributes of <TABLE> tag include bordercolor, bgcolor, background,
of t h e
other
Some
Soheight, cellspacingand cellpadding. Table
width, h e i g 5.1 on about
provides a brief description a
t h e s e a t t r i b u t e s ,
Table 5.1 Attributes of
<TABLE> tag
Attributes Description Example
border
This attribute specifies the thickness of the <TABLE border="3">
border around the table. The value is
in pixels.
specified
b o r d e r c o l o r
This attribute specifies the colour of the <TABLE
border of a table. bordercolor="blue"
This attribute specifies the <TABLE
bgcolor background colour
of a table. bgcolor="pink">
hackground This attribute specifies the URL of an image <TABLE
file to be displayed as the background of a background="C: \ r o s e s .
table. Jpg">
width=100%
width, These attributes specify the width and height <TABLE
height of a table. The value is specified in pixels or in height=200>
percentage.
This attr1bute specifies the space between two <TABLE cellspacing3
cellspacing
adjacent cells. The value is specified in pixels.
cellpadding This attribute specifies the space between the <TABLE cellpadding=3>
edge of a cell (cell wall) and the contents of the
cell. The value is specified in pixels.
The following HTML code uses different attributes of the <TABLE> tag to display the
output as shown in Fig. ).4.
CADriadmini DeP XCAUaedmar Dest
<TABLE border="3" bordercolor="blue" E [d ye Iportes Ioels Hep
bgcolor="yellow" width=50s
cellspacing=3 cellpadding=3> Cellpadding Country Capital
TR> <TH>Country</TH> <TH>Capital
Delhi
</TH> </TR> Cellspacing9 India
<TR> <TD>India</TD> <TD>Delhi </TD> </TR>
Gemany Berlin
KTR> <TD>Germany</TD> <TD>Berlin </TD> </TR>
</TABLE>
Fig 5.4 Output of a table using
cellspacing and cellpadding
attributes
67
 CHECK YOUR PROGRESss
1. Global International Company wants to display
information in a tabular format on their website.
b0ok-relate
Design a
webpage that displays a table listing the names of the books
the names of the authors and the price list of five
books,

Attributes of <TR>/<TD>/<TH> Tags

You can use attributes of <TR>, <TD> or <TH> tag to control aspects like
and
alignment
background colourthe row or cell level. Table
at 5.2 lists some
of the important
attributes of the <TR>, <TD> and <TH> tags.

Table 5.2 Attributes of TR>, <TD> and «TH> tags

Attributes Description Example

align This attribute specifies the horizontal alignment <TR align="right"s
of the text within a cell. The values can be left
right, or centre.

bgcolor This attribute specifies the background colour of <TR bgcolor="red">

a row or a data
cel1
rowspan This attribute specifies the number of rows a <TD rowspan="2">
data cell should span. This attribute is used
with the <TD> tag or the <TH> tag.

colspan This attribute specifies the number of columns

a data cell should span. This attribute is used
<TD colspan=2">

with the <TD> tag or the <TH> tag.

Using the Bgcolor Attribute of the <TR> and <TD> Tags

The following HTML code uses the bgcolor attribute of the <TR> and <TD> tags
TABLE border="6" bordercolor="blue" width=508>

<TR bgcolor="lightblue">

<TH>Country</TH>
<TH>Capital</TH>
</TR>
<TR>

<TD bgcolor="lightpink"> Indi a</TD>

68
 Lrolor="mistYrose">Delhi </TD>>
the
All the cells in
<TD b g c o l

Cells having of the

a r e
first r o w
</TR> different
background colours same background
colour because the
<TR> as the bgcolor bgcolor attribute is
TD color="yellow">
>Germany</TD> attribute is used at
level.
the data cell level. used at the row

T D
or="yel
b g c o l o r
llowgreen">Berlin

ECAUsersiadminDe -OX CAUsersadmin Deskto

< / T D >

E l Edit ew Favorites Iools H p

TR>

Couitry Capital
TABLE India Delhi
Germany Berlin
the Align
Attribute of the
Using
and
<TD> fags
TR>
5.6, the
contents of the header row are 5.5 Output of using bgcolor a table
In Fig.
Fig and cell level
by lefault. To change the attribute at the row
centrally aligned
a l i g n m e n i of the text in the other
hhorizontal
or
c a n m a k e use of the align attribute.
ows, you
bordercolor="blue" width=50%>
TABLE border="6"
<TR bgcolor=lightblue">>
Right alignment at
Center alignment
at the row level the data cell level
<TH>COuntryK/TH>

<TH>Capital</TH>

CAUsersadmin De x CAUsesladmin Deakt

</TR> Eile Yiew Favonites Ioo Help

<TR align="center"> Carital

Country
<TD bgcolor="lightpink">India </TD>
India Delhi
Germany Berlin
<TD b g c o l o r = " m i s t y r o s e " >
Delhi </TD>

</TR> table row/cell

Fig 5.6 Output of a using
<TR level align attribute
TD bgcolor="yellow">Germany </TD>
<TD bgcolor="yellowgreen" align="right">Berlin</TD>

</TR>
</TABLE>

Quick Tip
To include an image or a list item inside a data cell, you can enclose the <IMG> tag or fthe
OL tag inside the <TD> or the <TH> tag.
rorexample: <TD><IMG src ="£lowers.jPg"></TD>

69
 Using the
Rowspan and
You can make use of the Colspan
Attributes of the <TD>
rowspan and colspan Tag
merge the data cells (Fig attributes when there is a
or
row-wise. The HTML codes5.7 and
Fig. 5.8). The data cells can be
need to
merged
rowspan and colspan column-w
in Table 5.3 the
the <TD> tag. use
attributes e
Table 5 3 HTML code using the
rowspan and colspan attributes
Using the Rowspan Attribute
<TABLE border-2 cellpadding-4> Using the Colspan Attribute
<CAPTION> <TABLE border-2 cellpadding=4>
Region Wise Sales Report <CAPTION>
/CAPTION> Region Wise Sales
Report
KTR> </CAPTION>
<TR>
<TH>Region</TH> <TH Colspan=2
<TH>States</TH>
<TH>Units Sold</TH>>
K/TR>
bgcolor="#99CCFF">North</TH> </TR>
<TR>
<TR> <TD>Jammu arnd Kashmir</TD>
<TH rowspan=2 <TD>1493</TD>
</TR>
bgcolor="#99cCFF">North</TH>
<TD>Jammu and Kashmir</TD> <TR>
<TD>1493</TD <TD>Haryana</TD>
<TD>Karnataka</TD>
</TR> <TD>3829</TD>
<TR> </TR>
<TD>Haryana</TD> <TR>
<TD>3829</TD> <TD>Uttar Pradesh</TD>
</TR <TD>0283</TD>
<TR>
</TR>
<TH rowspan2 <TR>
<TH colspan=2
bgcolor="#99cCFF">South</TH>
<TD>Kerala</TD> bgcolor="#99cCFF">South</TH> </TR>
<TD>4827</TD> <TR>
</TR>
<TD>Kerala</TD>
<TR <TD>4827</TD>>
<TD>Tamil Nadu</TD> </TR>
<TD>7246</TD> <TR>
</TR <TD>Tamil Nadu</TD>
</TABILE> <TD>7246</TD>
</TR
<TR>
<TD>5689</TD>
</TR
</TABLE>
70
 DAerri Dr P CX cAUertadnsDesn CAUer edmDe P-CxCAVeradririDeskt
Ed ew Favorites oos Heip Frvortes Iools Heldp

Rcgion Wisc Sales Report Region Wise Sales Report

North
States Units Sold
Reglon Jammu and Kashnir 1493
Jammu and Kashmir 1493 3829
Haryana
North
Haryana 3829 Utar Pradesh 0283

Kerala 4827 South

South Kerala 4827
Tamil Nadu 7246
Tamil Nadu 7246
Karnataka 5689

Fig 57 Output (using the rowspan attribute) Fig 5.8 Output (using the colspan attribute)

CHECK YoUR PROGRESS

2. Design a webpage that displays a list of some of the best

tourist places in India in a tabular format. You may consider

the following layout for the page.

List of Best Tourist Places in India

Tourist Places Hotels

Hotel Apple Country
Manal Mapple River Crescent Resort
Eastboume Resort & Spa
Shimla Shingar Hotel
Hotel Hillock
Mount Abu
Palanpur Palace

QUICK QUESTION
1. State whether the following statements are True or False.

<TR and </TR> determines the number of

(a) The number of pairs of
rows in a table.
of <TD> and <TH> tags.
(b) Only text values can be displayed as a part
between the edge of a cell and the
(c) The cellpadding attribute specifies the spacing
contents of a cell.
the rowspan and colspan attributes of the <TD> taag.
d) You can merge the cells using
attribute only with the <TABLE> tag.
e) You can use the bgcolor

71
 CREATING HYPERLINKS IN HTML
While surfing the Internet, you come across several text
strings or images which wh
clicked, open a different webpage. These text
strings images
or are called
hyperlinks
when
Hyperlinks interconnect the webpages over the World Wide Web.

Anchor (SA>) Tag

The Anchor (<A>) tag is used to create hyperlinks in a webpage. It 1s a container
tag
Any text or image enclosed within the <A> and </A> tags is displayed as a
Table 54 illustrates some of the hyperlink
important attributes of the <A> tag.
Table 5.4 Attributes of <A> tag

Attribute Description
href This attribute indicates the destination of the link.

name This attribute is used for linking sections on the same

webpage. It
indicates the name of the section within a webpage.

Types of Linking in HTML

There
are:
are three types of linking in HTMIL. They Quick Tip
You can use the target attribute
1. External linking of the <A> tag to specify the
of a window where the linked
name
2. Internal linking
should be displayed. For
paqe
3. Email linking example
setting the target attribute to
_blank opens the linked
information in a new window.

External Linking
The external linking involves connecting two different webpages. When click
a
hyperlink, a new webpage to which the hyperlink is linked gets displayedyouin the
browser window. You can link pages within the same
over the Internet. Table 5.5 illustrates
directory or to any other page
some of the
examples of external linking.
Table 5.5 Examples of external linking
Linking pages within the same directory Linking pages to the
first.html links to.> second.html
pages over
Internet
first.html links. to.> Google Web Page
HTML source code in first.html
HTML source code in first.html
<A href="second.html"> Click to A href="http://www.google.com
open Second file</A>
Click here to visit Google Web
Page</A>

72
 following H T HTML code illustrates the of first.html to lnk to
wing use <A> tag in the file
he
i f t e r e n t w e b p a g e s .

HTML

A href=",
second.html"> Click to open Second file </A><BR><BR>

A href=")
http:\\www.google. com"> click here to visit Google Web
Page </A>

HTML

output
of the above HT code is shown in Fig. 5.9.
The

Cenadnbe

Che to open
9 CX

Sacond tile
CAUsers ad

cAUsersladmin\ Deskt
YouTube S Google

This is thesecond file

csECOND PAGE
Suggested Sites Google
Google Web Page.
Chek hereto 1sit Googe Searc Fee Lucky

(a) (b) (c)

Fig 5.9 Output of clicking different

a r e displayed
first link, the contents of the webpage 'second.html'
When you click the of Google gets
window. When you click the second link, the home page
in the browser
window.
displayed in the browser

Internal Linking
the same webpage. This type of
Internal linking involves linking various sections of
It lets the u s e r view the desired section
linking is useful when a webpage is very long.
bookmark to go to a particular segment
of a page quickly. Internal linking s e r v e s a s a
to the information he/she is looking
of the webpage. This helps the u s e r to quickly jump
is a n example of internal
for. For example, Go to top of the page link in webpages
linking (Fig. 5.10).
Internal linking is a two-step process.
Use the attribute of the <A> tag to give a name to the section that has to be
name

linked to.
Dxample: <a name="xyz"> You will be linked here</A>

2 Use the href attribute of the <A> tag to refer to the named section preceded by
the # symbol.
AAmple: <a href=" #xyz"> You w i l be taken to the linked section</A>

73
 The following HTML code demonstrates the use of name and href attributes of
<a
tag to lik the text 'Go to top of the page' to the top of the page. A>
<A name=" top"><H1>Introduction</H1></A>
<FONT face=comic sans ms" size="5"
Multimedia is any combination of
text, graphic art, sound, animation ciUserladminlDe P-CxSCAUsersadma
Ete Fdit yiew Favorites Jools telp Deiz.x
and video delivered to the user
it improves information retention.
by means of a computer or other This makes multimedia a very effective
communication tool in a variety ofarcas such
electronic media. An effective as
in business as a presentation and sales tool, in
multimedia presentation not only home for entertainment and games, in education
forteaching and training, in public places for
presents information in a dazzling
information and advertising, etc.
and entertaining manner, but is also
more effective in holding attention
and interest of the viewer and it
lmproves information retention. Go to top ofthepage
<BR>This makes multimedia a very
etfective communication tool in a
Fig 5.10 Page with an internal link
variety of areas such as in business
as a presentation and sales tool, in
home for entertainment and games,
education for teaching and training,
in
Quick Tip
in public places for information and The title attribute of the <A> taq
can be used for displaying a
advertising, etc. tooltip
that pops up when the mouse is
/font> moved over a hyperlink.
BR><BR><BR><BR><BR>
<A href="#top"> Go to top of the page
</A>
Email Linking (Linking to an Email Address)
To link text to an email address, you use the mailto: keyword before the email addres
in the href attribute of the <A> tag. For example, to link the text 'Send an
email address mariajoseph@ gmail.com, you can write the
Email to th
following HTMIL. code
<A href="mailto: maria_joseph@ gmail.com">Send an Email</A>
Quick Tip
You may use the link attribute of <BODY> tag to specify a different colour for the links in a
webpage. Also, you can use the vlink attribute of the <BODY> tag to specify a colour for the visited
links.
74
CHECK YOUR PROGRESSs

3. Design a webpage that provides

information about our solar system. Our Solar System

The list of planets should be

nov
n Te cun sits n the middle wtale he planc
In our solr ryulem, eigu planets move arvund the
displayed as hyperlinks. Clicking on in circular paths called orbits around if

Click on the following links to lem more about the planet

the planet name should display the
.
Mern
information about the planet stored . Iarth
MaT
upiter
SnluD
in a separate html file. You may .
Uramus
consider the layout given alongside .
Nepunc
for designing the webpage.

QUICK QUESTION

2. Give one word for the following.

(a) The attribute of <A> tag that identifies a section in a webpage
(b) The keyword that should be used before the address in the href attribute of the
<A> tag for linking text to an email address.
(c) The attribute of the <A> tag for specifying the location of the file to be displayed
when you click a hyperlink.

Recap Time
Tables are defined using the <TABLE> tag in an HTML document.
is divided into rows using the <TR> tag and each row is divided into
A table
data cells using the <TD> ta
E A table heading can be inserted using the <CAPTION> tag.
B The attributes of the <TABLE> tag include border, bordercolor, background, width,
height, cellspacing, and cellpadding.
The attributes of <TR>, <TD>, and <TH> tags include align, bgcolor, rowspan and
colspan.
are the text strings or the images in a webpage which when clicked,
link
Hyperlinks
to a different webpage or another section of the same webpage.
T h e <A> tag can be used to create hyperlinks in a webpage.
The three types of linking in HTML are external, internal and email.
The two important attributes of <A> tag are href and name.

75
 ANSWERs TO QUICK QUESTIONS
1. (a) True (b) False (c) True (d) True (e) False
2. (a) name (b) mailto: (c) href
Assessment Time
Choose the correct answer.
(a) Which of the
following is not an attribute of the <TABLE> tag?
(i) border (ii) bgcolor
(ii) background
(b)
rowspan
Which one of the following attributes of the
two adjacent cells?
<TABLE tag specifies the space
betwes
een
i) colspan i) cellpadding
i) cellspacing (iv) border
(c) Which of the following tags is used to add columns to a table?
i) <colspan <TD
ii) <TR (iv)<A>
d) Which of the following is the correct code for creating a
hyperlink?
(1) r.ame=http://www.google.co.in> Google Home Page</A>
(11) url=http://www.google.co.in> Google Home Page</A>
) href=http://www.google.co.in> Google Home Page</A>
(iv) http://www.google.co.in</A>
2 Fill in the blanks using the words given in the box.
TR Hyperlink Table <CAPTION> href name
(a) A grid ofrows and columns is known as a le
b) The T R ) tag is used to add rows to the table.
(c) The tag usedfor inserting a table heading is AP TION
(d) A HyPJKeonneete
connectseone webpage to another.
(e) and OMA are the two attributes of the
tag
8Write the HTML commands for the following.
(a) To create a table with four pixels thick border of blue colour
(b) To create a table with background colour as yellow
(C) To set the background colour of a row as yellow
(d) To centre align the contents of a cell
(e) To set the image flower.jpg as a hyperlink to the file "Garden.html
76
 A n s w e e r the following questions.
(a)
(:)
Which tags are Used to define the basic structure of a table in H'TM?
() Ditferentiate between cellspacing and cellpadding attributesof TABLE tag.
(c)
Give the use of Anchor (A>) tag.
Ditferentiate between internal linking and external linking.
()
How is internal linking done in a webpage?
Explain with the help of an example how to link any text to an email address
(

Activity Time
You are the activity incharge of your school.
Summerville Heritage School
You have been assigned the responsibility of
Activities being conducted during summer vacations

putting up the schedule tor various activities

to be conducted during the summer vacations
Activity Picture Timings
in your school on the school portal. Design a 9:00 a.m. to
Swimming 10:00 .m.
webpage for this task. You may consider the
layout given alongside for the page.
9:30 a.m. to
Robotics 10:30 a.m.
e Kala Natya Samiti wants to put up some
information about various dance forms like
Ballet. Jazz. Hip Hop and Classical. Design a 10:00a.m. to
Instrumental
website for the organisation. You can consider Music 11:00 a.m.

having separate pages for each dance form.

8 Your class teacher has observed

that a lot of students in the class Nutrients Guide
We need lot of utrients to lead a healthy life These utrients inchade proteins, fat, carbchydrates. vitomins and
eat junk food regularly. She wants minerels. These nutrients ere chemical subastances which are present in the foed we eet daily. The foeds containing
these nutrients ahich me ceraume daily are clossified as cereals. legmes (pases), ruts arncf oilsmeds, vegetables,
fruts, milk and mulk products and flesh foods (tish, mect and poultry) The functiors of these attributes ere discunsed
to highlight the importance of a in the following table.

Fwtonsol rtrient
balanced diet. She wants you to Reguate Body funcT
Carbelydntes tens etcihe
Preteins Lpeds
design a webpage that brings out Lpide (Fats end oile) Vitenins
Minerel Mneruls
Water Wutar
the importance of various nutrients cl M foleg to more tormas
.Carbobydote
in our diet and their functions.
oteins

You may consider the layout given ienerstr

alongside.
Link the list items to the following pages.
Carbohydrates to carbo.html Fats to fats.html
Proteins to pro.html Vitamins to vit.html
Minerals to mi.html

77