History of WWW:

 Tim Berners-Lee, in 1980 was investigating how computer could store information with random links. In
1989, while working at European Particle Physics Laboratory, he proposed to idea of global hypertext space
in which any network-accessible information could be referred to by single “universal Document Identifier”.
After that in 1990, this idea expanded with further program and knows as World Wide Web.
 WWW is stands for World Wide Web.
 The World Wide Web (WWW) is a global information medium which users can read and write via computer
connected to the internet.
 The Web, or World Wide Web, is basically a system of Internet servers that support specially formatted
documents. The documents are formatted in a markup language called HTML (Hypertext Markup Language)
that supports links to other documents, as well as graphics, audio, and video files.
 In short, World Wide Web (WWW) is collection of text pages, digital photographs, music files, videos, and
animations you can access over the Internet
 WWW:
 The World Wide Web, or simply Web, is a way of accessing information over the medium of the
Internet. It is an information-sharing model that is built on top of the Internet.

 The Web uses the HTTP protocol, only one of the languages spoken over the Internet, to transmit
data. The Web also utilizes browsers, such as Internet Explorer or Firefox, to access Web
documents called Web pages that are linked to each other via hyperlinks. Web documents also
contain graphics, sounds, text and video.
Different between Internet and WWW

 The Web is a Portion of The Internet. The Web is just one of the ways that information can be
disseminated over the Internet. The Internet, not the Web, is also used for email, which relies on
SMTP, Usenet news groups, instant messaging and FTP. So the Web is just a portion of the
Internet.
 Web Browser
 Web browser is a client, program, software or tool through which we sent HTTP request to
web server. The main purpose of web browser is to locate the content on the World Wide
Web and display in the shape of web page, image, audio or video form.
 Microsoft Internet Explorer, Mozilla Firefox, Safari, Opera and Google Chrome are examples of
web browser and they are more advanced than earlier web browser because they are capable
to understand the HTML, JavaScript, AJAX, etc. Now days, web browser for mobiles are also
available, which are called micro browser.

 Web Server
 Web server is a computer system, which provides the web pages via HTTP (Hypertext Transfer
Protocol). IP address and a domain name is essential for every web server.

 Whenever, you insert a URL or web address into your web browser, this sends request to the
web address where domain name of your URL is already saved. Then this server collects the
all information of your web page and sends to browser, which you see in form of web page on
your browser.
 Lot of web server software is available in the market in shape of NCSA, Apache, Microsoft and
Netscape. Storing, processing and delivering web pages to clients are its main function. All the
communication between client (web browser) and server takes place via HTTP.
Here, we can easily understand concept of web browser and web server by following figure.
Web Design Issues

Browser & Operating Systems

 Web pages are written using different HTML tags and viewed in browser window.
 The different browsers and their versions greatly affect the way a page is rendered, as
different browsers sometimes interpret same HTML tag in a different way.
 Different versions of HTML also support different sets of tags.
 The support for different tags also varies across the different browsers and their versions.
 Same browser may work slightly different on different operating system and hardware
platform.
 To make a web page portable, test it on different browsers on different operating systems.

Bandwidth and Cache

 Users have different connection speed, i.e. bandwidth, to access the Web sites.
 Connection speed plays an important role in designing web pages, if user has low
bandwidth connection and a web page contains too many images, it takes more time
to download.
 Generally, users have no patience to wait for longer time than 10-15 seconds and move to
other site without looking at contents of your web page.
 Browser provides temporary memory called cache to store the graphics.
Display Resolution
 Display resolution is another important factor affecting the Web page design, as we do not have
any control on display resolution of the monitors on which user views our pages.
 Display or screen resolution is measured in terms of pixels and common resolutions are 800 X
600 and 1024 X 786.
 We have three choices for Web page design.
 Design a web page with fixed resolution.
 Make a flexible design using HTML table to fit into different resolution.
 If the page is displayed on a monitor with a higher resolution, the page is displayed on left-
hand side and some part on the right-hand side remains blank. We can use centered design
to display page properly.

Look & Feel

 Look and feel of the website decides the overall appearance of the website.
 It includes all the design aspects such as:
 Web site theme
 Web typography
 Graphics
 Visual structure
 Navigation etc…
HTML

 Stands for Hypertext Markup Language.

 Most documents that appear on the World Wide Web were written in HTML.
 HTML is a markup language, not a programming language.
 We can apply this markup language to your pages to display text, images, sound
and movie files, and almost any other type of electronic information.
 We use the language to format documents and link them together, regardless of
the type of computer with which the file was originally created.
HTML Elements

 An element consists of three basic parts:

an opening tag, the element's content, and finally a closing tag.
<p> - opening paragraph tag
Element Content - paragraph words
</p> - closing tag

 Every (web) page requires four critical

elements: the html, head, title, and body
elements.
HTML Documents
 All HTML documents must start with a document type declaration: <!DOCTYPE html>.

 The <!DOCTYPE> declaration represents the document type, and helps browsers to display
web pages correctly.

 The <!DOCTYPE> declaration is not case sensitive.

 The HTML document itself begins with <html> and ends with </html>.

 The visible part of the HTML document is between <body> and </body>.

 It must only appear once, at the top of the page (before any HTML tags).
1. <html> Element...</html>
 <html> begins and ends each and every web page.
 Its purpose is to encapsulate all the HTML code and describe the HTML document to
the web browser.
<html> </html>

2. <head> Element
 The <head> element is "next" as they say. As long as it falls somewhere between
your <html> tag and your web page content (<body>).
 The head functions "behind the scenes." Tags placed within the head element are
not directly displayed by web browsers.
 We will be placing the <title> element here.
 Other elements used for scripting (JavaScript) and formatting (CSS) will eventually be
introduced and you will have to place them within your head element.
<html>
<head>
</head>
</html>
The <title> Element
 Place the <title> tag within the <head> element to title your page.
 The words you write between the opening and closing <title></title> tags will be
displayed at the top of a viewer's browser.
 <html>
<head>
<title> My Webpage! </title>
</head>
</html>
The <body> Element
 The <body> element is where all content is placed. (Paragraphs, pictures, tables,
etc).
 The body element will encapsulate all of your webpage's viewable content.
<html>
<head>
<title> My Webpage! </title>
</head>
<body>
Hello World! All my content goes here!
</body>
</html>
 HTML Tags
 A web browser reads an HTML document top to bottom, left to right.
 Each time the browser finds a tag, it is displayed accordingly (paragraphs look like
paragraphs, tables look like tables, etc).
 An HTML file must have some essential tags so that web browser can differentiate
between a simple text and HTML text. You can use as many tags you want as per your
code requirement.
 All HTML tags must enclosed within < > these brackets.
 Every tag in HTML perform different tasks.
 If you have used an open tag <tag>, then you must use a close tag </tag> (except some
tags)
 Tags have 3 major parts: opening tag(s), content(s), and closing tag(s).
 Recall that a completed tag is termed an element.
1. Paragraph Tag <p>
 HTML paragraphs are defined with the <p> tag:

<p> This is a paragraph.</p>

<p> This is another paragraph. <p>

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

Output:
This is a paragraph.
This is another paragraph.
 HTML - Headings
HTML - Headings 1:6
 A heading in HTML is just what we might expect, a title or subtitle.
 By placing text inside of <h1> (heading) tags, the text displays bold and the
size of the text depends on the number of heading (1-6).
 Headings are numbered 1-6, with 1 being the largest heading and 6 being the
smallest.

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>
Output:
This is heading 1
This is heading 2
This is heading 2
This is heading 2
This is heading 2
This is heading 2
Bold Tag: Make text bold
<b> hello </b>
Italic Tag : Make text italic
<i> Italic Tag </i>
Underline Tag: Make text underlin.
<u> Underline Tag</u>
<html>
<body>
<b> Bold Tag </b>
<i> Italic Tag </i>
<u> Underline Tag</u>
</body>
</html>
Output: Bold Tag Italic Tag Underline Tag
Nested HTML Elements:

 HTML elements can be nested (this means that elements can contain other elements).

 All HTML documents consist of nested HTML elements.

The following example contains four HTML elements (<html>, <body>, <h1> and <p>):

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>
 The <html> element is the root element and it defines the whole HTML document.

 It has a start tag <html> and an end tag </html>.

 Then, inside the <html> element there is a <body> element.

 The <body> element defines the document's body.

 It has a start tag <body> and an end tag </body>.

 Then, inside the <body> element there are two other elements: <h1> and <p>.

 The <h1> element defines a heading.

 It has a start tag <h1> and an end tag </h1>.

 The <p> element defines a paragraph.

 It has a start tag <p> and an end tag </p>.

Empty HTML Elements
 HTML elements with no content are called empty elements.
 <br> Tag: br stands for break line, it breaks the line of the code.
 The <br> tag defines a line break, and is an empty element without a closing tag.
 <hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.
<html>
<body>
<p>This is a <br> paragraph with a line break.</p>
<hr>
</body>
</html>
Output:
This is a
paragraph with a line break
----------------------------------------
 Some HTML elements will display correctly, even if you forget the end tag:
<html>
<body>

<p>hello my first page

<p>hello I am trying without closing tag

</body>
</html>
Output: hello my first page
hello I am trying without closing tag
 However, never rely on this! Unexpected results and errors may occur if
you forget the end tag!

 HTML tags are not case sensitive: <P> means the same as <p>
 HTML Comments

 HTML comments are not displayed in the browser, but they can help document your HTML source
code.
 You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
Notice that there is an exclamation point (!) in the start tag, but not in the end tag.
<!DOCTYPE html>
<html>
<body>
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->
</body>
</html>
Output:
This is a paragraph.
 HTML Anchor
 The HTML anchor tag defines a hyperlink that links one page to another page. It can create
hyperlink to other web page as well as files, location, or any URL. The "href" attribute is the most
important attribute of the HTML a tag. and which links to destination page or URL.
 The syntax of HTML anchor tag is given below.

<a href = "..........."> Link Text </a>

<html>
<body>
<a href="second.html">Click for Second Page</a>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>The a element</h1>
<a href="https://www.w3schools.com">Visit W3Schools.com!</a>
</body>
</html>

Output:
HTML Image
 HTML img tag is used to display image on the web page. HTML img tag is an empty tag
that contains attributes only, closing tags are not used in HTML image element.
<img src="good_morning.jpg" />
Attributes of HTML img tag
1) src
It is a necessary attribute that describes the source or path of the image. It instructs

the browser where to look for the image on the server.

2) width
It is an optional attribute which is used to specify the width to display the image.
3) Height
It is an optional attribute which is used to specify the width to display the image.
4) Alt
The required alt attribute provides an alternate text for an image, if the user for some reason
cannot view it (because of slow connection, an error in the src attribute, or if the user uses a
screen reader).
<!DOCTYPE html>
<html>
<body>
<h2>Image Size</h2>
<img src="img_girl.jpg" alt="Girl " width="500" height="600">
</body>
</html>
HTML Lists

HTML Lists are used to specify lists of information. All lists may contain one
or more list elements. There are three different types of HTML lists:

1. Ordered List or Numbered List (ol)

2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)
 HTML Lists
1. HTML Ordered Lists
 Use the <ol> tag to begin an ordered list.
 Place the <li> (list item) tag between your opening <ol> and closing </ol> tags
to create list items.
 Ordered simply means numbered, as the list below demonstrates.

 We can use ordered list to represent items either in numerical order format or
alphabetical order format, or any format where an order is emphasized. There
can be different types of numbered list:

a) Numeric Number (1, 2, 3)

b) Capital Roman Number (I II III)
c) Small Roman Number (i ii iii)
d) Capital Alphabet (A B C)
e) Small Alphabet (a b c)
HTML Ordered List Example

HTML ordered list that displays 4 topics in numbered list. Here we are not defining
type="1" because it is the default type.

<html>
<body>
<ol>
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
</body>
</html>
output:
1. HTML
2. Java
3. JavaScript
 ol type="I"

 Let's see the example to display list in roman number uppercase

<ol type="I">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>

Output:
I. HTML
II. Java
III. JavaScript
IV. SQL
ol type="i"

 Let's see the example to display list in roman number lowercase.

<ol type="i">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
Output:
i. HTML
ii. Java
iii. JavaScript
iv. SQL
ol type="A"

 Let's see the example to display list in alphabet uppercase.

<ol type="A">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
Output:
A. HTML
B. Java
C. JavaScript
D. SQL
ol type="a"

 Let's see the example to display list in alphabet lowercase.

<ol type="a">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>

Output:
a. HTML
b. Java
c. JavaScript
d. SQL
start attribute

 The start attribute is used with ol tag to specify from where to start the
list items.

<ol type="1" start="5"> :

It will show numeric values starting with "5".
<ol type="A" start="5">
It will show capital alphabets starting with "E".
<ol type="a" start="5">
It will show lower case alphabets starting with "e".
<ol type="I" start="5">
It will show Roman upper case value starting with
"V".
<ol type="i" start="5">
It will show Roman lower case value starting with
"v".
Example
<html>
<body>
<ol type="i" start="5">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
</body>
</html>
Output:
v. HTML
vi. Java
vii. JavaScript
viii. SQL
reversed Attribute:

 This is a Boolean attribute of HTML <ol> tag, and it is new in HTML5

version. If you use the reversed attribute with tag then it will numbered
the list in descending order (7, 6, 5, 4......1).
<ol reversed>
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
Output:
4. HTML
3. Java
2. JavaScript
1. SQL
2. HTML Unordered List /HTML Bulleted List

 HTML Unordered List or Bulleted List displays elements in bulleted

format . We can use unordered list where we do not need to display
items in any particular order. The HTML ul tag is used for the unordered
list.
 There can be 4 types of bulleted list:

Type Description

Type "disc" This is the default style. In this

style, the list items are marked with
bullets.
Type "circle" In this style, the list items are
marked with circles.

Type "square" In this style, the list items are

marked with squares.

Type "none" In this style, the list items are not

marked .
<!DOCTYPE html>
<html>
<body>
<ul>
<li> HTML </li>
<li> Java </li>
<li> JavaScript</li>
<li> SQL </li>
</ul>
</body>
</html>
Output:
• HTML
• Java
• JavaScript
• SQL
ul type="square"

<ul type="square">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
Output:
 HTML
 Java
 JavaScript
 SQL
ul type="circle"
<ul type="circle">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
Output:
o HTML
o Java
o JavaScript
o SQL
ul type="none"

<ul type="none">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
Output:
HTML
Java
JavaScript
SQL

Note: The type attribute is not supported in HTML5, instead of type you can use CSS
property of list-style-type
Following is the example to show the CSS
property for ul tag.
<ul style="list-style-type: square;">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
Output:
 HTML
 Java
 Java Script
 SQL
<html>
<head>
</head>
<body>
<h2>The type attribute with CSS property</h2>
<ul style="list-style-type: square;">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
</body>
</html>
Output:
The type attribute with CSS property
 HTML
 Java
 JavaScript
 SQL
HTML Description List /HTML Definition List

 HTML Description List or Definition List displays elements in definition form like in
dictionary.
 The 3 HTML description list tags are given below:

1. <dl> tag defines the description list.

2. <dt> tag defines data term.
3. <dd> tag defines data definition (description).
Example:

<!DOCTYPE html>
<html>
<body>
<dl>
<dt>HTML</dt>
<dd>is a markup language</dd>
<dt>Java</dt>
<dd>is a programming language and platform</dd>
<dt>JavaScript</dt>
<dd>is a scripting language</dd>
<dt>SQL</dt>
<dd>is a query language</dd>
</dl>
</body>
</html>
 Output:

HTML
is a markup language
Java
is a programming language and platform
JavaScript
is a scripting language
SQL
is a query language
HTML Table

 HTML table tag is used to display data in tabular form (row * column). There
can be many columns in a row.
 We can create a table to display data in tabular form, using <table> element,
with the help of <tr> , <td>, and <th> elements.
 In Each table, table row is defined by <tr> tag, table header is defined by <th>,
and table data is defined by <td> tags.
HTML Table Tags

Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<html>
<body>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>

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

Output:
Company Contact Country
 <table>
<tr>
<th>First_Name</th>
<th>Last_Name</th>
<th>Marks</th>
</tr>
<tr>
<td>Manoj</td>
<td>pandey</td>
<td>60</td>
</tr>
<tr>
<td>Gaurav</td>
<td>joshi</td>
<td>80</td>
</tr>
</table>
 Output:

First_Name Last_Name Marks

Manoj pandey 60
Gaurav joshi 80
HTML Table with Border

 There are two ways to specify border for HTML tables.

1. By border attribute of table in HTML
2. By border property in CSS

1) HTML Border attribute

You can use border attribute of table tag in HTML to specify border. But it is
not recommended now.
<table border="1"> <tr>
<tr> <td>Swati</td>
<th>First_Name</th> <td>bisht</td>
<th>Last_Name</th> <td>82</td>
<th>Marks</th> </tr>
</tr> <tr>
<tr> <td>Chetna</td>
<td>gaurav</td> <td>singh</td>
<td>Joshi</td> <td>72</td>
<td>60</td> </tr>
</tr>
<tr> </table>
<td>jay</td>
<td>singh</td>
<td>80</td>
</tr>
 2) CSS Border property

 It is now recommended to use border property of CSS</tr>

to specify border in table.
<tr>
<head>
<td>jay</td>
<style>
<td>singh</td>
table, th, td {
<td>80</td>
border: 1px solid black;
</tr>
}
<tr>
</style>
<td>Swati</td>
</head>
<td>bisht</td>
<body>
<td>82</td>
<tr>
</tr>
<th>First_Name</th>
<tr>
<th>Last_Name</th>
<td>Chetna</td>
<th>Marks</th>
<td>singh</td>
</tr>
<td>72</td>
<tr>
</tr>
<td>gaurav</td>
<td>Joshi</td>
</table>
 Style Table Borders

 If you set a background color of each cell, and give the border a white color (the
same as the document background), you get the impression of an invisible
border:

table, th, td
{
border: 1px solid white;
border-collapse: collapse;
}
th, td
{
background-color: #96D4D4;
}
<!DOCTYPE html> <td>Jackson</td>
<html> <h2>Table With Invisible <td>94</td>
Borders</h2>
<head> </tr>
<table style="width:100%">
<style> <tr>
<tr>
table, th, td < td>John</td>
<th>Firstname</th>
{ <td>Doe</td>
<th>Lastname</th>
border: 1px solid white; <td>80</td>
<th>Age</th>
border-collapse: collapse; </tr>
</tr>
} </table>
<tr>
th, td
<td>Jill</td>
{ </body>
<td>Smith</td>
background-color: #96D4D4; </html>
<td>50</td>
}
</tr>
</style>
<tr>
</head>
<td>Eve</td>
<body>
Output:
 Round Table Borders

 With the border-radius property, the borders get rounded corners:

table, th, td
{
border: 1px solid black;
border-radius: 10px;
}
 Skip the border around the table by leaving out table from the css selector:

th, td
{
border: 1px solid black;
border-radius: 10px;
}
<!DOCTYPE html> </tr>
<html> <tr>
<head> <td>Amit</td>
<style> <td>Kumar</td>
table, th, td { <td>50</td>
border: 1px solid black; </tr>
border-radius: 10px; <tr>
} <td>manoj</td>
</style> <td>Joshi</td>
</head> <td>94</td>
<body> </tr>
<table style="width:100%"> </tr>
<tr> </table>
<th>Firstname</th> </body>
<th>Lastname</th> </html>
<th>Age</th>
 Dotted Table Borders

 With the border-style property, you can set the appearance of the border.
<!DOCTYPE html> <th>Age</th> </html>
<html> </tr>
<head> <tr>
<style> <td>Amit</td>
table, th, td <td>Kumar</td>
{ <td>50</td>
border-style: dotted; </tr>
} <tr>
</style> <td>manoj</td>
</head> <td>Joshi</td>
<body> <td>94</td>
<table style="width:100%"> </tr>
<tr> </tr>
<th>Firstname</th> </table>
<th>Lastname</th> </body>
 Border Color
With the border-color property, you can set the color of the border.
th, td {
border-style:solid;
border-color: #96D4D4;
}
 HTML Table Column Width
To set the size of a specific column, add the style attribute on a <th>
or <td> element:
<table style="width:100%">
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</table>
<!DOCTYPE html> </tr>
<html> <tr>
<style> <td>Jill</td>
table, th, td { <td>Smith</td>
border:1px solid black; <td>50</td>
} </tr>
</style> <tr>
<body> <td>Eve</td>
<h2>Set the first column to 70% of <td>Jackson</td>
the table width</h2>
<td>94</td>
<table style="width:100%">
</tr>
<tr>
</table>
<th style="width:70%">
</body>
Firstname</th>
</html>
<th>Lastname</th>
<th>Age</th>
HTML Table - Cell Padding

 Cell padding is the space between the cell edges and the cell content.
 By default the padding is set to 0.
 To add padding on table cells, use the CSS padding property:
<!DOCTYPE html> <h2>Cellpadding</h2> <tr>
<html> <p>Cell padding specifies the <td>Sumit</td>
space between the cell
<head> <td>karnatak</td>
content and its borders.</p>
<style> <td>94</td>
table, th, td { </tr>
<table style="width:100%">
border: 1px solid black; <tr>
<tr>
border-collapse: collapse; <td>Robin</td>
<th>Firstname</th>
} <td>singh</td>
<th>Lastname</th>
th, td { <td>80</td>
<th>Age</th>
padding: 5px; </tr>
</tr>
} </table>
<tr>
</style> </body>
<td>Gaurav</td>
</head> </html>
<td>Sharma</td>
<body>
<td>50</td>
</tr>
HTML Table - Cell Spacing
 Cell spacing is the space between each cell.
 By default the space is set to 2 pixels.
 To change the space between table cells, use the CSS border-spacing property on the table element:
<head>
<style>
table, th, td
{
border: 1px solid black;
}
table {
border-spacing: 30px;
}
</style>
</head>
<!DOCTYPE html> between the cells with the <td>kumar</td>
border-spacing property.</p>
<html> <td>94</td>
<head> </tr>
<table style="width:100%">
<style> <tr>
<tr>
table, th, td { <td>Ganesh</td>
<th>Firstname</th>
border: 1px solid black; <td>khatri</td>
<th>Lastname</th>
} <td>80</td>
<th>Age</th>
table { </tr>
</tr>
border-spacing: 30px; </table>
<tr>
} </body>
<td>Gaurav</td>
</style> </html>
<td>joshi</td>
</head>
<td>50</td>
<body>
</tr>
<tr>
<h2>Cellspacing</h2>
<td>Pankaj</td>
<p>Change the space
 HTML Table Colspan & Rowspan

HTML tables can have cells that span over multiple rows and/or columns.
NAME 2022
APRIL

FIESTA
 HTML Table - Colspan

<html> </tr>
<head> <tr>
<style> <td>Amit</td>
table, th, td { <td>Sumit</td>
border: 1px solid black; <td>43</td>
border-collapse: collapse;} </tr>
</style> <tr>
</head> <td>amar</td>
<body> <td>Jagdish</td>
<h2>Cell that spans two columns</h2> <td>57</td>
<p>To make a cell span more than one column, use the </tr>
colspan attribute.</p>
</table>
<table style="width:100%">
</body>
<tr>
</html>
<th colspan="2">Name</th>
<th>Age</th>
 HTML Table - Rowspan

 To make a cell span over multiple rows, <td>9876543210</td>

use the rowspan attribute: </tr>
<table style="width:100%"> </table>
<tr> </body>
<th>Name</th> </html>
<td>Gaurav</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>9411779085</td>
</tr>
<tr>
<html> <td>Gaurav</td>
<head> </tr>
<style> <tr>
table, th, td { <th rowspan="2">Phone</th>
border: 1px solid black; <td>9411779085</td>
border-collapse: collapse; </tr>
} <tr>
</style> <td>0987654321</td>
</head> </tr>
<body> </table>
<h2>Cell that spans two rows</h2> </body>
<p>To make a cell span more than one row, use the </html>
rowspan attribute.</p>
<table style="width:100%">
<tr>
<th>Name</th>