HTML - Advanced Features: Table and Hyperlink

PrevNextBack

HTML - Advanced Features: Table and Hyperlink

Choose the correct option

Question 1

Which of the following tags is used to create tables in HTML documents?

  1. <Tab> .......... </Tab>
  2. <Table> .......... </Table>
  3. <TD> .......... </TD>
  4. <TR> .......... </TR>

Answer

<Table> .......... </Table>

Reason — An HTML table consists of the beginning table tag <Table> and the ending table tag </Table>.

Question 2

Which of the following attributes merges two or more rows of a table into a single row?

  1. Rowspan
  2. Rmerge
  3. Rowmerge
  4. Mergerow

Answer

Rowspan

Reason — Rowspan attribute merges two or more rows of a table.

Question 3

Which of the following attributes merges two or more columns of a table into a single column?

  1. Cspan
  2. Columnspan
  3. Colspan
  4. Span

Answer

Colspan

Reason — Colspan attribute merges two or more columns of a table.

Question 4

Which of the following tags is used to display a title of the table in an HTML document?

  1. Heading
  2. Caption
  3. Title
  4. CapTitle

Answer

Caption

Reason — The Table caption tag serves as a title or explanation for the table.

Question 5

Which tag is used to create a hyperlink in the HTML document?

  1. Link
  2. Connect
  3. Hyper
  4. Anchor

Answer

Anchor

Reason — The anchor tag <a> and </a> are used to create a hyperlink in the HTML document

Fill in the blanks

Question 1

Every row in an HTML table starts with row tag <TR> and ends with row tag </TR>.

Question 2

An HTML table begins with a table tag <TABLE> and ends with table tag </TABLE>.

Question 3

The table heading is defined with <TH> tag in an HTML.

Question 4

In an HTML table, each cell in a row is created with <TD> tag to store data.

Question 5

The attribute href is used to create a hyperlink between two or more HTML codes.

Question 6

An HTML table sets the height and width in terms of pixels or percentage.

Execute the given HTML code in the Web Browser

Question 1

<html>
<head>
<Title>Prize Winners</Title>
</head>
<body>
<Table Border="4" Bordercolor="Red" >
<Caption><Marquee><font color="Blue" >Prize Winners</Marquee></Caption> 
<tr>
<th>Name</th>
<th>Marks</th>
<th>Rank</th>
</tr> 
<tr> 
<td>Piyali Mittal</td>
<td>994</td>
<td>First</td>
</tr> 
<tr> 
<td>Kaushik Gupta</td>
<td>991</td>
<td>Second</td>
</tr>
<tr>
<td>Mayank Sinha</td>
<td>984</td>
<td>Third</td>
</tr>
</Table>
</body>
</html>

Answer

Execute the given HTML code in the Web Browser. HTML Table and Hyperlink. Class 7 ICSE Understanding Computer Studies.

Case-Study Based Questions

Question 1

In HTML, form is a systematic collection of information provided by the user. We fill various types of information in forms related to our everyday life such as name, father's name, contact number, gender, etc. While creating such forms using HTML codes, we use <input> tag and its various attributes to enter information in different forms. Identify the attributes whose descriptions are given below:

(a) These are square boxes which are clicked to select one or more options in a form.

(b) It is used to select only one of the given options.

(c) It is used to create a button for the user to submit a form.

(d) It is a field that allows the user to enter a password in a form.

Answer

(a) Checkbox
     Example — <input type = "checkbox" name = "Physics">

(b) Radio
     Example — <input type = "radio" name = "Religion">

(c) Submit
     Example — <input type = "submit" name = "Enter">

(d) Password
     Example — <input type = "password" name = "computer">

Define the following

Question 1

Table Heading

Answer

The table heading can be defined using <TH> tag. It is used to replace <TD> tag that represents actual data cell. Normally, the top row is the table heading. We can use <TH> element in any row.

Question 2

Table Border

Answer

Table border sets the width of border around the table. It can be set by using the attribute border with the table tag.

Syntax:

<TABLE BORDER = "Width of the border">

Example:

<TABLE BORDER = "2">

Question 3

Table Background

Answer

We can also set a background color of the table. By default, the table background color is white. We can use the attribute bgcolor. It sets the background color of the table or just one cell.

Syntax:

<TABLE BGCOLOR = "COLOR">

Example:

<TABLE BGCOLOR = "PINK">

Question 4

Table Caption

Answer

The caption tag serves as a title or explanation for the table. It is a container element. This tag is placed just after the <TABLE> tag and is optional to use it in a table. It is used only once in a table.

Syntax:

<CAPTION> string of text </CAPTION>

Question 5

Hyperlink

Answer

Hyperlink is a reference to data/a piece of text/an image that is linked to another webpage. It can be accessed by clicking on the link. It points to a whole document or to a specific element within a document.

The hyperlink appears underlined on a webpage. When the mouse pointer is brought to a hyperlink, the link changes to a different color indicating hyperlink.

Example:

<a href = "mywebpage.html"> Click here to open My Web Page </a>

Question 6

Anchor Tag

Answer

A hyperlink has an anchor that is located within the document. Through the anchor, the hyperlink can be followed.

We use <a> and </a> tags to produce hyperlinks. The <a> tag defines a hyperlink that is used to link one page to another and </a> indicates the end of link. The most important attribute of <a> element is the href attribute that indicates the destination of link.

Example:

<a href = "mywebpage.html"> Click here to open My Web Page </a>

Question 7

Forms in HTML

Answer

Form is a systematic collection of information provided by the user. To create forms in HTML, <form> tag is used. It is a container tag and includes various elements like text fields, radio buttons, check boxes etc. This information is provided to serve different purposes of the user.

Syntax:

<form>
    body of the form with form elements
</form>

Define these tags with reference to HTML form

Question 1

Input tag

Answer

Input tag is an element of the <form> tag. It allows us to create a field to enter data of our choice. The data entry can be done under 'Type' attribute of the <input> tag. The different components under type are text, check box, radio, submit, password etc.

Example:

<input type = "text">

Question 2

Check box

Answer

The check box is used to select a number of options in a given list of options on the form.

Syntax:

<input type = "checkbox" name = "Physics">

Question 3

Radio buttons

Answer

The radio button is used to select one out of many options in the form.

Syntax:

<input type = "radio" name = "Gender">

Question 4

Password

Answer

The password field is similar to the text field except that the entered text is visualized in terms of symbol. This protects our password from being viewed by others.

Syntax:

<input type = "password" name = "computer>

Question 5

Submit button

Answer

This is a special button created that allows our form to be submitted to the website. It is done just by clicking once on the submit button and confirms the task.

Syntax:

<input type = "submit">

Distinguish between

Question 1

Cell Padding and Cell Spacing

Answer

Cell PaddingCell Spacing
It represents the distance between cell borders.It defines the width of the border within a cell.

Question 2

Colspan and Rowspan

Answer

ColspanRowspan
Colspan attribute merges two or more columns into a single column.Rowspan attribute merges two or more rows into a single row.

Question 3

<TR> and <TD> tags

Answer

<TR> tag<TD> tag
This tag is used to create rows in a table.This tag is used to create cells and add data to that cell.
This tag is used once in a row.This tag is used multiple times in a row to create cells.

Write HTML codes

Question 1

Write down HTML codes to create a table with table headings and other details as given below

RankMedal
FirstGold
SecondSilver
ThirdBronze

Answer

<HTML>
<HEAD> 
<TITLE> Question 3 </TITLE>
</HEAD>
<BODY>
<TABLE BORDERCOLOR = "ORANGE" BGCOLOR = "BEIGE">
	<TR BGCOLOR = "ORANGE">
	<TH> Rank </TH>
	<TH> Medal </TH>
	</TR>
	<TR>
	<TD> First </TD> <TD> Gold </TD>
	</TR>
	<TR>
	<TD> Second </TD> <TD> Silver </TD>
	</TR>
	<TR>
	<TD> Third </TD> <TD> Bronze </TD>
	</TR>
</TABLE>
</BODY>
</HTML>

Question 2

Create a webpage to display your marks of First Terminal Examination by using table tags. Create 3 columns viz. Sl. No., Subject and Marks. Also make 5 rows to enter marks for 5 subjects viz. English, Hindi, Science, Social Science and Computer Science. Set the border size to 2 and border color to blue.

Answer

<HTML>
<HEAD> 
<TITLE> Question 4 </TITLE>
</HEAD>
<BODY>
<TABLE BORDERCOLOR = "BLUE" BORDER = "2">
<CAPTION Align = "Center"> Marks of First Terminal Examination </CAPTION>
	<TR>
	<TH> Sl. No. </TH>
	<TH> Subject </TH>
	<TH> Marks </TH>
	</TR>
	<TR>
	<TD> 1 </TD> <TD> English </TD> <TD> 95 </TD>
	</TR>
	<TR>
	<TD> 2 </TD> <TD> Hindi </TD> <TD> 93 </TD>
	</TR>
	<TR>
	<TD> 3 </TD> <TD> Science </TD> <TD> 92 </TD>
	</TR>
	<TR>
	<TD> 4 </TD> <TD> Social Science </TD> <TD> 97 </TD>
	</TR>
	<TR>
	<TD> 5 </TD> <TD> Computer Science </TD> <TD> 99 </TD>
	</TR>
</TABLE>
</BODY>
</HTML>

Question 3

Design a table using HTML codes with the table headings viz. Landmark, City, and Country. Create 3 columns and 4 rows to enter all the details given below. Set the border size to 2, border color to red and table background color to yellow.

LandmarkCityCountry
Taj MahalAgraIndia
Leaning TowerPisaItaly
Eiffel TowerParisFrance

Answer

<HTML>
<HEAD> 
<TITLE> Question 5 </TITLE>
</HEAD>
<BODY>
<TABLE BORDERCOLOR = "RED" BORDER = "2" BGCOLOR = "YELLOW">
	<TR>
	<TH> Landmark </TH>
	<TH> City </TH>
	<TH> Country </TH>
	</TR>
	<TR>
	<TD> Taj Mahal </TD> <TD> Agra </TD> <TD> India </TD>
	</TR>
	<TR>
	<TD> Leaning Tower </TD> <TD> Pisa </TD> <TD> Italy </TD>
	</TR>
	<TR>
	<TD> Eiffel Tower </TD> <TD> Paris </TD> <TD> France </TD>
	</TR>
</TABLE>
</BODY>
</HTML>

Question 4

Create a Webpage by using HTML codes with the details given below

Caption: TV channels

TV Channels
ZEEZee News
Zee Cinema
STARStar Sports
Star Plus

The other details are: Body Bgcolor="Pink", Table Border="2", Bordercolor="Red" Bgcolor="Green".

Answer

<HTML>
<HEAD> 
<TITLE> Question 6 </TITLE>
</HEAD>
<BODY BGCOLOR = "PINK">
<TABLE BORDERCOLOR = "RED" BORDER = "2" BGCOLOR = "GREEN">
	<TR>
	<TH COLSPAN = "2"> TV Channels </TH>
	</TR>
	<TR>
	<TD ROWSPAN = "2"> ZEE </TD> <TD> Zee News </TD>
	</TR>
	<TR>
	<TD> Zee Cinema </TD> 
	</TR>
	<TR >
	<TD ROWSPAN = "2"> STAR </TD> <TD> Star Sports </TD> 
	</TR>
	<TR> 
	<TD> Star Plus </TD>
	</TR>
</TABLE>
</BODY>
</HTML>

Question 5

Design a table using HTML codes with the table headings viz. Subject, Paper and Marks. Create 3 columns and 4 rows to enter marks obtained in different exams in English, Hindi and Science.

SubjectPaperMarks
EnglishLanguage93
Literature91
HindiLanguage89
Literature92
SciencePhysics93
Chemistry90
Biology88

Set the border size to 2, border color to green, table background color to yellow and body background color to pink.

Answer

<HTML>
<HEAD> 
<TITLE> Question 7 </TITLE>
</HEAD>
<BODY BGCOLOR = "PINK">
<TABLE BORDERCOLOR = "GREEN" BORDER = "2" BGCOLOR = "YELLOW">
	<TR>
	<TH> Subject </TH>
	<TH> Paper </TH>
	<TH> Marks </TH>
	</TR>
	<TR>
	<TD ROWSPAN = "2"> English </TD> <TD> Language </TD> <TD> 93 </TD>
	</TR>
	<TR>
	<TD> Literature </TD> <TD> 91 </TD> 
	</TR>
	<TR>
	<TD ROWSPAN = "2"> Hindi </TD> <TD> Language </TD> <TD> 89 </TD>
	</TR>
	<TR>
	<TD> Literature </TD> <TD> 92 </TD> 
	</TR>
	<TR>
	<TD ROWSPAN = "3"> Science </TD> <TD> Physics </TD> <TD> 93 </TD>
	</TR>
	<TR>
	<TD> Chemistry </TD> <TD> 90 </TD> 
	</TR>
	<TR>
	<TD> Biology </TD> <TD> 88 </TD> 
	</TR>
</TABLE>
</BODY>
</HTML>

Question 6

United club of Jamshedpur wants to create a form for online registration for membership. The particulars are as mentioned below:

United club of Jamshedpur wants to create a form for online registration for membership. Write an HTML program to create form as shown above to help the club. Class 7 ICSE Understanding Computer Studies

Write an HTML program to create form as shown above to help the club.

Answer

<HTML>
<HEAD> 
<TITLE> Question 8 </TITLE>
</HEAD>
<BODY>
<TABLE ALIGN = "CENTER">
<FORM>
	<TR> 
	<TD COLSPAN = "2" ALIGN = "CENTER"> Membership Form </TD> 
	</TR>
	<TR> 
	<TD> Name of the Candidate: </TD> 
	<TD> <INPUT TYPE = "TEXT" NAME = "CANDIDATE NAME" SIZE = "30"> </TD> 
	</TR>
	<TR> 
	<TD> Address : </TD> 
	<TD> <INPUT TYPE = "TEXT" NAME = "ADDRESS" SIZE = "30"> </TD> 
	</TR>
	<TR> 
	<TD> Contact No.: </TD> 
	<TD> <INPUT TYPE = "TEXT" NAME = "ADDRESS" SIZE = "30"> </TD> 
	</TR>
	<TR> 
	<TD COLSPAN = "2"> Gender: </TD> 
	</TR>
	<TR> 
	<TD> <INPUT TYPE = "RADIO" NAME = "GENDER" VALUE = "MALE"> Male </TD> 
	<TD> <INPUT TYPE = "RADIO" NAME = "GENDER" VALUE = "FEMALE"> Female </TD> 
	</TR>
	<TR> 
	<TD COLSPAN = "2"> Facilities Opted: </TD> 
	</TR>
	<TR> 
	<TD COLSPAN = "2">
	<INPUT TYPE = "CHECKBOX" NAME = "FACILITIES" VALUE = "Restaurant">Restaurant 
	<INPUT TYPE = "CHECKBOX" NAME = "FACILITIES" VALUE = "Gym">Gym 
	<INPUT TYPE = "CHECKBOX" NAME = "FACILITIES" VALUE = "Library">Library 
	<INPUT TYPE = "CHECKBOX" NAME = "FACILITIES" VALUE = "Sports">Sports 
	</TD> 
	</TR>
	<TR> 
	<TD COLSPAN = "2" ALIGN = "CENTER"> <INPUT TYPE = "SUBMIT" NAME = "ENTER"> </TD> 
	</TR>	
</FORM>
</TABLE>
</BODY>
</HTML>