You are on page 1of 40

Submitted to GGS DAV College Jalalabad West for the

fulfillment of award of Degree of BCA Final

Submitted To

Submitted By

Daljit Singh Batra

Acknowledgement

I would like to express my special thanks of gratitude to


my teacher Mr. Daljit Singh Batra, Mrs. Inderjeet Kaur,
Sagar &

Mrs. Parminder Kaur

Mr.

as well as our principal J.S.

Bhullar who gave me the golden opportunity to do this wonderful


project , which also helped me in doing a lot of Research and I
came to know about so many new things I am really thankful to
them.

Secondly i would also like to thank my parents


and friends who helped me a lot in finalizing this project within
the limited time frame.

Signature

Certificate of Project Report

This

is

to

certify

that

the

project

entitled,

____________________________submitted by ___________________
in partial fulfillment of the requirements for the award of BCA in at the
GGSDAV COLLEGE JALALABAD WEST is an authentic work carried out by
him under my supervision and guidance.

To the best of my knowledge, the matter embodied in the project


has not been submitted to any other University / Institute for the award
of any Degree or Diploma.

Signature
External Project Guide

Date:

Signature
Internal Project Guide

Intel Pentium 1.2 with


1 GB RAM and 100 GB Hard Disk ,Mouse and
windwos xp or 7 , Latest Internet Explorer

Table of Contents

1. Acknowledgement
2. Certificate
3. Table of Content
4. System Requirement
5. Intro. HTML
6. Project Coding and Snapshot

What is HTML ?
HTML stands for Hyper Text Markup Language. HTML was developed by Tim Berners-Lee in
1990, HTML is a internet language developed to design websites. These websites can then be
viewed by anyone else connected to the Internet. It is easy to learn , When writing HTML, you just
add "tags" to the text in order to create the structure. These tags tell the browser how to display
the text or graphics in the document. HTML is a simplified subset of SGML (Standard Generalized
Markup language
In HTML each individual markup code is referred to as an element. Some elements come in pairs
that indicate when some display effect is to begin and when it is to end.
HTML is a formal Recommendation by the World Wide Web Consortium (W3C) and is support by
all major browsers like Microsoft's Internet Explorer and Netscape's Navigator, Chrome . The
current version of HTML is HTML 5.0 released in 2014
"HTML is a special formatting language that defines the appearance and contents of a
webpage"
The definition of HTML is HyperText Markup Language.

HyperText is the method by which you move around on the web by clicking on special
text called hyperlinks which bring you to the next page. The fact that it is hyper just means
it is not linear i.e. you can go to any place on the Internet whenever you want by clicking
on links there is no set order to do things in.
Markup is what HTML tags do to the text inside them. They mark it as a certain type of text
HTML is a Language, as it has code-words and syntax like any other language.

Q. explain the basic structure of an HTML document?


HTML is a simple and powerful language used to define the structure of HTML documents.
it allows you to format text, images and save it as text file that all the computers understand.
Every HTML document is logically organized into series of elements that are arranged
according to the rule of SGML. The basic structured HTML document is as follows :

1. <HTML> : The entire document is enclosed within <HTML> and </HTML> tags. it
actually tells the web browse where the page starts and where it ends. it consists of two parts
HEAD and BODY
2. Head Element <HEAD>
The head element is used to mark the position of the head section. The head section contains
element that define certain information about an HTML document, such as what its is, who
the author is, and reference information about the document. To create a head element , start
with<HEAD>tag , then include all of the element you want in your head section, then end
the head element with element with a <HEAD> tag.
Naming Documents with the Title Element

10

Titles are displayed by browsers on the top of the page, usually in the title bar. Efven HTML
document must have a title contained in a<TITLE> start tag and a </TITLE>
end tag. For example:
<HEAD>
<TITLE> A Hello world Example in HTML<TITLE>
</HEAD>
2. Body Element
The real content for any HTML document occurs in the body section, which is enclosed
between <BODY> and </BODY>tags.
There are two basic categories of HTML elements used in the body section:

Block-Level Elements

Text-Level Elements

Block level elements


Block level elements are used to define groups of text for a specific role. They include tags
that position text on the page, begin new paragraphs, set heading levels and create lists.Some
commonly used block-level element and their tags are:
Paragraph: <P>and </P>
Heading, level one:<H1>Heading, level two:<H2>and </H2>
Horizonatal rule:<HR> Centering:<CENTER>
Text level Elements
Text level elements are for mark up bits of text, including creating links, inserting things like
images or sounds, and changing the appearance of text Some commonly used text-level
elements are:
Bold :<B>and </B>Italic: <I>and</I>
Line-break: <BR>
Link anchor: <A HERF =URLand </A>
11

Image: <IMG SRC=URL>

<HTML>
<HEAD>
<TITLE>Welcome to my site </TITLE>
</HEAD>
<BODY>
<H1>Welcome </H1>
...............
...............
</BODY>
</HTML>

formatted text :
HTML uses a number of elements to format the text. you can change the heading styles, make
paragraphs, add lists, change font color and size etc. the are to type of formatting elements
inline elements
1. Inline elements
2. Block -level elements
1. Inline Elements : inline elements are those elements that are used to format some words, single
word or even a single character in a sentence on a webpage. they donot have a line break before
and after them.
<I>,<B>,<U>,<SUB>,<SUP>,<STRIKE>,,<TT><SMALL>,<BIG>,<FONT>,<CENTER>
2. Block level elements : block level elements render any applicable formatted and insert an
additional line break or carriage return before and after the block
<BR>,<H1> ,<H2>...<H6>,<P>,<HR>,<PRE>,<OL>,<UL>,<DL>

12

Bold Text
Anything that appears within <b>...</b> element, is displayed in bold
Italic Text
Anything that appears within <i>...</i> element is displayed in italicized
Underlined Text
Anything that appears within <u>...</u> element, is displayed with underline
Strike Text
Anything that appears within <strike>...</strike> element is displayed with
strikethrough, which is a thin line through the text
Monospaced Font
The content of a <tt>...</tt> element is written in monospaced font. Most of the
fonts are known as variable-width fonts because different letters are of different
widths (for example, the letter 'm' is wider than the letter 'i'). In a monospaced font,
however, each letter has the same width.

Superscript Text
The content of a <sup>...</sup> element is written in superscript; the font size
used is the same size as the characters surrounding it but is displayed half a
character's height above the other characters.
Subscript Text
The content of a <sub>...</sub> element is written in subscript; the font size
used is the same as the characters surrounding it, but is displayed half a character's
height beneath the other characters.
Larger Text
The content of the <big>...</big> element is displayed one font size larger than
the rest of the text surrounding it
Smaller Text
13

The content of the <small>...</small> element is displayed one font size smaller
than the rest of the text surrounding it
Emphasized Text
Anything that appears within <em>...</em> element is displayed as emphasized
text.
Marked Text
Anything that appears with-in <mark>...</mark> element, is displayed as marked
with yellow ink.
Strong Text
Anything that appears within <strong>...</strong> element is displayed as
important text or bold
Text Abbreviation
You can abbreviate a text by putting it inside opening <abbr> and
closing</abbr> tags. If present, the title attribute must contain this full description
and nothing else.
Acronym Element
The <acronym> element allows you to indicate that the text between <acronym>
and </acronym> tags is an acronym.
At present, the major browsers do not change the appearance of the content of the
<acronym> element.
<html>
<head>
<title>formatting tags</title>
</head>
<body>
THIS IS AN EXAMPLE OF <B>BOLD</B> <BR>
THIS IS AN EXAMPLE OF <I>ITALIC </I><BR>
THIS IS AN EXAMPLE OF <U>UNDERLINE</U> <BR>
THIS IS AN EXAMPLE OF <strike>STRIKE</strike> <BR>
THIS IS AN EXAMPLE OF <TT> Monospaced FONT </TT> <BR>
THIS IS AN EXAMPLE OF <SUP>SUPERSCRIPT</SUP> <BR>
THIS IS AN EXAMPLE OF <SUB>SUBSCRIPT </SUB><BR>

14

THIS IS AN EXAMPLE OF <BIG>LARGER </BIG><BR>


THIS IS AN EXAMPLE OF <SMALL>SMALLER </SMALL><BR>
THIS IS AN EXAMPLE OF <EM>Emphasized Text </EM><BR>
THIS IS AN EXAMPLE OF <MARK>MARK TEXT</MARK><BR>
THIS IS AN EXAMPLE OF <STRONG> STRONG TEXT</STRONG><BR>
THIS IS AN EXAMPLE OF <ABBR TITLE=Abbreviation> Abb.</ABBR><BR>
THIS IS AN EXAMPLE OF <acronym>ACRONYM</acronym>
</body>
</html>

IMAGE
Images are very important to beautify as well as to depict many complex concepts in
simple way on your web page. This tutorial will take you through simple steps to use
images in your web pages.

Insert Image
You can insert any image in your web page by using <img> tag. Following is the
simple syntax to use this tag.
<img src="Image URL" ... attributes-list/>

The <img> tag is an empty tag, which means that it can contain only list of
attributes and it has no closing tag.

15

Example
To try following example, let's keep our HTML file test.htm and image file test.png in
the same directory:
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src="/html/images/test.png" alt="Test Image" />
</body>
</html>

This will produce following result:


Simple Image Insert

You can use PNG, JPEG or GIF image file based on your comfort but make sure you
specify correct image file name in src attribute. Image name is always case
sensitive.
The alt attribute is a mandatory attribute which specifies an alternate text for an
image, if the image cannot be displayed.

Set Image Location


Usually we keep our all the images in a separate directory. So let's keep HTML file
test.htm in our home directory and create a subdirectory images inside the home
directory where we will keep our image test.png.

Example
Assuming our image location is "/html/image/test.png", try the following example:
<!DOCTYPE html>

16

<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src="/html/images/test.png" alt="Test Image" />
</body>
</html>

This will produce following result:


Simple Image Insert

Set Image Width/Height


You can set image width and height based on your requirement
using widthand height attributes. You can specify width and height of the image in
terms of either pixels or percentage of its actual size.

Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src="/html/images/test.png" alt="Test Image" width="150" height="100"/>
</body>
</html>

This will produce following result:


Setting image width and height

17

Set Image Border


By default image will have a border around it, you can specify border thickness in
terms of pixels using border attribute. A thickness of 0 means, no border around
the picture.

Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src="/html/images/test.png" alt="Test Image" border="3"/>
</body>
</html>

This will produce following result:


Setting image Border

Set Image Alignment


By default image will align at the left side
use alignattribute to set it in the center or right.

of

the

page,

but

you

can

Example
<!DOCTYPE html>
<html>
<head>

18

<title>Set Image Alignment</title>


</head>
<body>
<p>Setting image Alignment</p>
<img src="/html/images/test.png" alt="Test Image" border="3" align="right"/>
</body>
</html>

This will produce following result:


Setting image Alignment

HTML offers web authors three ways for specifying lists of information. All lists must
contain one or more list elements. Lists may contain:

<ul> - An unordered list. This will list items using plain bullets.

<ol> - An ordered list. This will use different schemes of numbers to list your items.

<dl> - A definition list. This arranges your items in the same way as they are arranged in
a dictionary.

HTML Unordered Lists


An unordered list is a collection of related items that have no special order or
sequence. This list is created by using HTML <ul> tag. Each item in the list is
marked with a bullet.

Example
<!DOCTYPE html>

19

<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

This will produce following result:

Beetroot

Ginger

Potato

Radish

The type Attribute


You can use type attribute for <ul> tag to specify the type of bullet you like. By
default it is a disc. Following are the possible options:
<ul type="square">
<ul type="disc">
<ul type="circle">

Example
Following is an example where we used <ul type="square">
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>

20

<ul type="square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

This will produce following result:

Beetroot

Ginger

Potato

Radish

Example
Following is an example where we used <ul type="disc"> :
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

This will produce following result:

Beetroot

Ginger

21

Potato

Radish

Example
Following is an example where we used <ul type="circle"> :
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

This will produce following result:


o

Beetroot

Ginger

Potato

Radish

HTML Ordered Lists


If you are required to put your items in a numbered list instead of bulleted then
HTML ordered list will be used. This list is created by using <ol> tag. The numbering
starts at one and is incremented by one for each successive ordered list element
tagged with <li>.

Example
<!DOCTYPE html>
<html>
<head>

22

<title>HTML Ordered List</title>


</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

This will produce following result:


1. Beetroot
2. Ginger
3. Potato
4. Radish

The type Attribute


You can use type attribute for <ol> tag to specify the type of numbering you like. By
default it is a number. Following are the possible options:
<ol type="1"> - Default-Case Numerals.
<ol type="I"> - Upper-Case Numerals.
<ol type="i"> - Lower-Case Numerals.
<ol type="a"> - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.

Example
Following is an example where we used <ol type="1">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>

23

<ol type="1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

This will produce following result:


1. Beetroot
2. Ginger
3. Potato
4. Radish

Example
Following is an example where we used <ol type="I">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

This will produce following result:


I.
II.

Beetroot
Ginger

24

III.

Potato

IV.

Radish

Example
Following is an example where we used <ol type="i">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

This will produce following result:


i.

Beetroot

ii.

Ginger

iii.

Potato

iv.

Radish

Example
Following is an example where we used <ol type="A">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="A">

25

<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

This will produce following result:


A. Beetroot
B. Ginger
C. Potato
D. Radish

Example
Following is an example where we used <ol type="a">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

This will produce following result:


a. Beetroot
b. Ginger
c. Potato

26

d. Radish

The start Attribute


You can use start attribute for <ol> tag to specify the starting point of numbering
you need. Following are the possible options:
<ol type="1" start="4">

- Numerals starts with 4.

<ol type="I" start="4">

- Numerals starts with IV.

<ol type="i" start="4">

- Numerals starts with iv.

<ol type="a" start="4">

- Letters starts with d.

<ol type="A" start="4">

- Letters starts with D.

Example
Following is an example where we used <ol type="i" start="4" >
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="i" start="4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

This will produce following result:


iv.

Beetroot

v.

Ginger

vi.

Potato

vii.

Radish

HTML Definition Lists


27

HTML and XHTML support a list style which is called definition lists where entries
are listed like in a dictionary or encyclopedia. The definition list is the ideal way to
present a glossary, list of terms, or other name/value list.
Definition List makes use of following three tags.

<dl> - Defines the start of the list

<dt> - A term

<dd> - Term definition

</dl> - Defines the end of the list

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>

This will produce following result:


HTML
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol

The HTML tables allow web authors to arrange data like text, images, links, other
tables, etc. into rows and columns of cells.

28

The HTML tables are created using the <table> tag in which the <tr> tag is used to
create table rows and <td> tag is used to create data cells.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

This will produce following result:


Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2
Here border is an attribute of <table> tag and it is used to put a border across all
the cells. If you do not need a border then you can use border="0".

Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace <td>
tag, which is used to represent actual data cell. Normally you will put your top row
as table heading as shown below, otherwise you can use <th> element in any row.

Example
<!DOCTYPE html>

29

<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

This will produce following result:


Name

Salary

Ramesh Raman 5000


Shabbir Hussein 7000

Cellpadding and Cellspacing Attributes


There are two attribiutes called cellpadding and cellspacing which you will use to
adjust the white space in your table cells. The cellspacing attribute defines the width
of the border, while cellpadding represents the distance between cell borders and the
content within a cell.

Example
<!DOCTYPE html>
<html>

30

<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

This will produce following result:


Name

Salary

Ramesh Raman 5000


Shabbir Hussein 7000

Colspan and Rowspan Attributes


You will use colspan attribute if you want to merge two or more columns into a
single column. Similar way you will use rowspan if you want to merge two or more
rows.

Example
<!DOCTYPE html>
<html>
<head>

31

<title>HTML Table Colspan/Rowspan</title>


</head>
<body>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>

This will produce following result:


Column 1
Row 1 Cell 1

Column 2

Column 3

Row 1 Cell 2 Row 1 Cell 3


Row 2 Cell 2 Row 2 Cell 3

Row 3 Cell 1

Tables Backgrounds
You can set table background using one of the following two ways:

bgcolor attribute - You can set background color for whole table or just for one cell.

background attribute - You can set background image for whole table or just for one cell.

You can also set border color also using bordercolor attribute.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>

32

<body>
<table border="1" bordercolor="green" bgcolor="yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>

This will produce following result:


Column 1
Row 1 Cell 1

Column 2

Column 3

Row 1 Cell 2 Row 1 Cell 3


Row 2 Cell 2 Row 2 Cell 3

Row 3 Cell 1
Here is an example of using background attribute. Here we will use an image
available in /images directory.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" background="/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>

33

<tr><td colspan="3">Row 3 Cell 1</td></tr>


</table>
</body>
</html>

This will produce following result. Here background image did not apply to table's
header.
Column 1
Row 1 Cell 1

Column 2

Column 3

Row 1 Cell 2 Row 1 Cell 3


Row 2 Cell 2 Row 2 Cell 3

Row 3 Cell 1

Table Height and Width


You can set a table width and height using width and height attrubutes. You can
specify table width or height in terms of pixels or in terms of percentage of available
screen area.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border="1" width="400" height="150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

34

This will produce following result:


Row 1, Column 1

Row 1, Column 2

Row 2, Column 1

Row 2, Column 2

Table Caption
The caption tag will serve as a title or explanation for the table and it shows up at
the top of the table. This tag is deprecated in newer version of HTML/XHTML.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border="1" width="100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>

This will produce following result:


This is the caption
row 1, column 1

row 1, columnn 2

row 2, column 1

row 2, columnn 2

Table Header, Body, and Footer


Tables can be divided into three portions: a header, a body, and a foot. The head and
foot are rather similar to headers and footers in a word-processed document that

35

remain the same for every page, while the body is the main content holder of the
table.
The three elements for separating the head, body, and foot of a table are:

<thead> - to create a separate table header.

<tbody> - to indicate the main body of the table.

<tfoot> - to create a separate table footer.

A table may contain several <tbody> elements to indicate different pages or groups
of data. But it is notable that <thead> and <tfoot> tags should appear before
<tbody>

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>

36

</tr>
</tbody>
</table>
</body>
</html>

This will produce following result:


This is the head of the table
This is the foot of the table
Cell 1

Cell 2

Cell 3

Cell 4

Nested Tables
You can use one table inside another table. Not only tables you can use almost all
the tags inside table data tag <td>.

Example
Following is the example of using another table and other tags inside a table cell.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>
<table border="1" width="100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>

37

<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

This will produce following result:


Name

Salary

Ramesh Raman

5000

Shabbir Hussein

7000

38

39

You might also like