Scribd
Upload
1 views113 pages

HTML Basics

HTML (Hyper Text Markup Language) is the standard markup language for creating web pages, consisting of elements that define the structure and presentation of content. This document covers fundamental HTML concepts, including basic tags for document structure, headings, paragraphs, images, text formatting, quotations, and color usage. It provides examples and syntax for various HTML elements to help users understand how to create and format web pages.

Uploaded by

karthicsonia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
1 views113 pages

HTML Basics

HTML (Hyper Text Markup Language) is the standard markup language for creating web pages, consisting of elements that define the structure and presentation of content. This document covers fundamental HTML concepts, including basic tags for document structure, headings, paragraphs, images, text formatting, quotations, and color usage. It provides examples and syntax for various HTML elements to help users understand how to create and format web pages.

Uploaded by

karthicsonia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 113

HTML Basics

HTML stands for Hyper Text Markup Language. It is the


standard markup language for creating Websites. It is used to
describe the structure of a Web page. HTML consists of
elements that tell the browser how the content is displayed on
the screen. We’ll walk you through fundamental HTML
examples and teach you how to create a webpage. This HTML
Basics covers fundamental HTML examples.
In this guide, the basics of HTML include learning HTML tags
( <h1>, <p>, <img>, etc), attributes, elements, and
document structure which collectively form a working web
page.
Basic HTML Document
Every HTML document begins with a document type
declaration, setting the foundation for the webpage. This
section introduces basic HTML tags that structure the page,
such as <head>, <body>, and <title>. Although this is not
mandatory, it is a good convention to start the document with
the below-mentioned tag.
Basic HTML Tags for Document Structure

Tags Descriptions

Encloses the entire HTML document, serving as the root element for all HTML
<html>
content.

Contains header information about the webpage, including title, meta tags, and
<head> linked stylesheets. It is part of the document’s structure but is not displayed on the
webpage.

Used within the <head> section to define the title of the HTML document. It
<title> appears in the browser tab or window and provides a brief description of the
webpage’s content.

<body> Encloses the visible content of the webpage, such as text, images, audio, videos, and
Basic HTML Tags for Document Structure

Tags Descriptions

links. All elements within this tag are displayed on the actual webpage when viewed
in a browser.

Example 1: To illustrates the Basic HTML structure.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<!--Contents of the webpage-->
<p>GeeksforGeeks is a online study platform</p>
</body>
</html>
Output:

HTML Basic Example Output

HTML Basic Structure


HTML Structure

HTML Headings
The HTML heading tags are used to create headings for the
content of a webpage. These tags are typically placed inside
the body tag. HTML offers six heading tags, from <h1> to
<h6>, each displaying the heading in a different font size.
Syntax:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Example 2: To demonstrate the use of 6 heading tags
from <h1> to <h6> in HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML heading tag</title>
</head>
<body>
<h1>Heading 1 (h1)</h1>
<h2>Heading 2 (h2)</h2>
<h3>Heading 3 (h3)</h3>
<h4>Heading 4 (h4)</h4>
<h5>Heading 5 (h5)</h5>
<h6>Heading 6 (h6)</h6>
</body>
</html>
Output:

HTML Paragraph and Break Elements


HTML <p> tags are used to write paragraph statements on a
webpage. They start with the <p> tag and end with </p>. The
HTML <br> tag is used to insert a single line break and does
not require a closing tag. In HTML, the break tag is written as
<br>.
Syntax:
// for Parapgraph

<p> Content... </p>

// for Break
<br>
Example 3: To illustrates the use of <p> tag for writing a
paragraph statement in HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>
Example of paragraph and break elements
</title>
</head>
<body>
<p> HTML stands for HyperText Markup Language.<br>
It is used to design web pages using a markup
language.<br>HTML is a combination of Hypertext
and Markup language.<br>Hypertext defines the
link between web pages.<br>A markup language
is used to define the text document within the
tag which defines the structure of web pages.
</p>
</body>
</html>
Output:

HTML Horizontal Line


The HTML <hr> tag is used to divide a page into sections by
creating a horizontal line that spans from the left to the right
side of the page. This is an empty tag and does not require a
closing tag or any additional attributes.
Syntax: <hr>
Example 4: To illustrates the use of the <hr> tag for the
horizontal line in HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML &lt;hr&gt; tag</title>
</head>
<body>
<h1>Hello GeeksforGeeks</h1>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr>
</body>

</html>
Output:

HTML Horizontal Line

HTML Images
The <img> tag is used to insert an image into a webpage. The
source of the image is specified within the src attribute, like
this: <img src=”source_of_image”>.
Syntax: <img src="geeks.png">
Example 5: To illustrates the use of the <img> tag for
inserting the images in HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML img tag</title>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-
low_res.png">
</body>
</html>
Output:

Adding image using img tag

HTML Text Formatting


HTML text formatting refers to the use of specific HTML tags to
modify the appearance and structure of text on a webpage. It
allows you to style text in different ways, such as making it
bold, italic, underlined, highlighted, or struck-through.
Categories of HTML Text Formatting
HTML text formatting can be divided into two main
categories: Logical Tags and Physical Tags.
1. Logical Tags
Logical tags convey the meaning or importance of the text
without necessarily altering its visual appearance. These tags
help browsers, search engines, and assistive technologies
understand the purpose of the text.
 <em>: Emphasizes text, typically rendered in italics. It
implies that the text carries special importance or requires
emphasis.
 <strong>: Marks text as important, often displayed in bold.
It implies the content is of strong importance.
2. Physical Tags
Physical tags directly affect how text looks on the webpage by
changing the font, size, or style.
 <b>: Displays text in bold without implying importance.
 <i>: Italicizes text without any implied emphasis.

Tags Description

<i> Showcases italicized text.

<small> Renders text in a smaller font size.

<ins> Highlights added or inserted text.

<sub> Creates subscript text.

<strong Emphasizes text with importance, often in


> bold.

<b> Displays text in a bold format.

Accentuates text with a background


<mark>
highlight.
Tags Description

<del> Strikes through text to signify deletion.

Adds emphasis to text, commonly styled as


<em>
italic.

<sup> Formats text as superscript.

HTML Formatting Elements


1. <i> – Italicizes text
Use the <i> tag to display text in italics without implying
emphasis.
<i>This is italic text.</i>
2. <small> – Reduces the font size of the text
The <small> tag renders text in a smaller font than the
surrounding text.
<small>This text is smaller than the rest.</small>
3. <ins> – Highlights inserted text
The <ins> tag marks text as newly added or inserted, often
displayed with an underline.
<ins>This is inserted text.</ins>
4. <sub> – Displays subscript text
Use the <sub> tag for subscripted text, often used in
chemical formulas or footnotes.
H<sub>2</sub>O
5. <strong> – Emphasizes important text, often
rendered in bold
The <strong> tag is semantically meaningful and indicates
that the text is of high importance.
<strong>This text is bold and important.</strong>
6. <b> – Makes text bold
The <b> tag visually makes the text bold but does not imply
any special significance.
<b>This is bold text.</b>
7. <mark> – Highlights text with a background
color
The <mark> tag highlights text with a background color,
similar to using a highlighter on paper.
<mark>This text is highlighted.</mark>
8. <del> – Strikes through text
The <del> tag is used to show that text has been deleted or is
no longer relevant.
<del>This text is crossed out.</del>
9. <em> – Emphasizes text, typically italicized
The <em> tag is used for emphasized text and is usually
rendered in italics to highlight importance.
<em>This text is emphasized.</em>
10. <sup> – Displays superscript text
Use the <sup> tag to show superscripted text, commonly
used in exponents or footnotes.
E = mc<sup>2</sup>
Examples of HTML Text Formatting
Example 1: Basic Text Formatting
In this example we demonstrates various text formatting tags:
<strong> for important and bold text, <em> for emphasized
and italic text, <b> for bold text, <i> for italic text, and
<mark> for highlighted text.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Formatting Example</title>
</head>
<body>
<p>
<strong>Strong:</strong>
This text is important and bold.
</p>
<p>
<em>Emphasized:</em>
This text is emphasized and italic.
</p>
<p>
<b>Bold:</b>
This text is bold.
</p>
<p>
<i>Italic:</i>
This text is italic.
</p>
<p>
<mark>Marked:</mark>
This text is highlighted.
</p>
</body>
</html>Output:

HTML Text Formatting Example Output

Example 2: Combining Logical and Physical Tags


combined for enhanced text formatting:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Advanced Text Formatting</title>
</head>
<body>
<p>This is a
<strong><em>very important</em></strong> message.
</p>
<p>The chemical formula of water is H
<sub>2</sub>O.
</p>
<p>
<del>Deleted text</del> and
<ins>inserted text</ins>
are shown here.
</p>
<p><small>Smaller text</small>
can be used for disclaimers.
</p>
<p>E = mc<sup>2</sup></p>
</body>
</html>
Output:

HTML Quotations
The HTML Quotation elements are used to insert quoted
texts in a web page, that is the portion of texts different from
the normal texts in the web page. Below are some of the most
used quotation elements of the HTML.
Tag Description

<abbr> Defines abbreviation or acronym.

<address> Defines contact info for the author/owner of a document.

<bdo> Defines text direction, left-to-right or right-to-left.

<blockquote> Defines a section quoted from another source.

<cite> Defines the title of a work, book, article, or publication.

<q>
Defines short inline quotation, enclosed in quotation
marks.

HTML Quotations Examples


Example: In this example, we demonstrate the use of HTML
Quotations in which <bdo> adjusts text
directionality.<abbr> clarifies the abbreviation “GfG” with its
full title.<address> displays contact information. These
elements enhance content organization and readability.

<!DOCTYPE html>
<html>
<head>
<title>HTML Quotations</title>
</head>
<body>
<h3>GeeksforGeeks</h3>
<!--Normal text-->
<p>
The quick brown fox jumps over the lazy dog<br />
</p>
<!--Inside <bdo> tag-->
<p>
<bdo dir="rtl">The quick brown fox jumps over the lazy
dog</bdo>
</p>
<p>
Welcome to
<abbr title="GeeksforGeeks">GfG</abbr>
</p>
<address>
<p>
Address:<br />
710-B, Advant Navis Business Park,<br />
Sector-142, Noida Uttar Pradesh – 201305
</p>
</address>
</body>
</html>
Output:

HTML Quotations Example Output


Example 2: In this example we use the of HTML quotations,
including <blockquote>, <q>, and <cite>, to showcase
different ways of representing quoted text and citations within
a webpage.

<!DOCTYPE html>
<html>
<head>
<title>HTML Quotations Example</title>
</head>
<body>
<h3>GeeksforGeeks</h3>
<p>The quick brown fox jumps over the lazy dog<br></p>
<!-- Inside blockquotes -->
<blockquote>
<p>The quick brown fox jumps over the lazy dog
</p>
</blockquote>
<!-- Inside quotes -->
<q>The quick brown fox jumps over the lazy dog</q>
<!-- Cite with title -->
<p>
The <cite>GeeksforGeeks</cite>
is the best site to<br>
search for articles and practice problems.
</p>
</body>
</html>
Output:
HTML Colors
HTML Colors can be applied to text, backgrounds, borders,
links, forms, tables, etc. This article provides an in-depth look
at how colors can be applied to various elements such as text,
backgrounds, borders, links, forms, and tables in HTML. We
will explore different color formats including hexadecimal,
RGB, RGBA, HSL, and named colors, offering you precise
control over the color presentation on your web pages.
HTML Colors Name
HTML color names offer a user-friendly way to specify colors.
From classic colors like Red, Green, Blue, Pink, Purple, Sky
Blue, Gray, and Orange, to more exotic shades, HTML provides
a wide palette for web designers. Whether you’re designing a
serene theme or a vibrant layout, HTML color names have got
you covered.

Red

Green

Blue

Pink

Purple

Sky Blue

Gray
Orange

Checkout Color Wheel Tool on GFG: Color Wheel


HTML Color Usage
Usage Descriptions Syntax

HTML Background Color is the shade that


<div style="background-
appears behind the content on a webpage. The
color: magenta;">
Background background covers the total size of the element
Div with magenta
Color with padding and border but excludes the
background
margin. It makes the text so easy to read for the
</div>
user.

<p style="color: pink;">


Text color in HTML specifies the color of the
Text Color Pink color is used
text content, similar to font color.
</p>

<div style="border: 1px


solid black; border-color:
HTML Border Color refers to the color of
green;">
Border Color borders around elements like <div>, <img>, etc.
This div has a green
It defines the color of the border lines.
border
</div>

HTML Link Color specifies the color of the <a href="#" style="color:
anchor tag within a webpage, allowing us to blue;">
Link Color
define the color of clickable text, and making Link has a blue color
user navigation more visual. </a>

HTML Colors Example:


The example illstrates the various HTML Colors to the element.
<!DOCTYPE html>
<html>
<head>
<title>HTML Text Color</title>
<style>
center {
width: 50%;
margin: 0 auto;
}
h2, div, p, span {
padding: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<center>
<h2 style="background-color: gray;">
Heading with Gray Background color
</h2>
<div style="border: 2px solid skyblue;">
Div with Skyblue Border color
</div>
<span >
<a href="#" style="color: #ff6347;">
Link has a tomato color
</a>
</span>
<p style="color: darkgreen;">
Paragraph with Dark Green Text color
</p>
</center>
</body>
</html>
Output:

HTML Color
HTML Colors Example Explanation:
 In this example we create HTML to structure content with
elements like headings, divs, links, and paragraphs.
 Heading displays a gray background for emphasis.
 Div is bordered with skyblue color for visual distinction.
 Link text appears in tomato color for better visibility.
 Paragraph text is styled with a dark green color for
readability.

Color Values
Color values in HTML define the color of elements. They can
be specified using various formats such as hexadecimal, RGB,
RGBA, HSL, HSLA, color names, and system color keywords.
RGB Color Value
RGB, which stands for Red, Green, and Blue, is a method used
in CSS to describe colors. It works by mixing different amounts
of three primary colors, each with values ranging from 0 to
255. By adjusting these values, we can produce an extensive
range of colors, allowing for the creation of diverse and better
color palettes across websites.
RGB Color Value Properties
Some properties are:
 It's representation is as rgb(red, green, blue).
 By adjusting these values from 0 to 255, we can produce
16,777,216 unique colors.
 For instance, specifying rgb(0, 255, 0) results in green
because the green value is at its maximum (255), while red
and blue are at 0. Conversely, using rgb(0, 0, 255) produces
blue, with the blue channel set to its peak (255), and red
and green at 0.
 To render black, all color parameters are set to 0 (rgb(0, 0,
0)), and for white, all parameters are set to their maximum
(rgb(255, 255, 255)).
RGB Color Value Syntax
// Blue background
<p style="background-color: rgb(0, 0, 255);">
Is the sky background Blue by using RGB
</p>
RGB Color Value Example
The example we are using the RGB color values to style our
html elements.
<!DOCTYPE html>
<html>
<head>
<title>RGB Color Value</title>
<style>
center {
width: 50%;
margin: 0 auto;
}
h2,
div,
p,
span {
padding: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<center>
<h2 style="background-color: rgb(109, 102, 197);">
Heading with blue Background color
</h2>
<div style="border: 2px solid rgb(135, 206, 235);">
<li>
<a href="#html-color-usage">
HTML Color Usage
</a>
</li>
Div with Skyblue Border color
</div>
<span>
<a href="#" style="color: rgb(241, 76, 89);">
Link has a tomato color
</a>
</span>
<p style="color: rgb(0, 100, 0);">
Paragraph with Dark Green Text color
</p>
</center>
</body>
</html>
Output:

RGB Color Value Example Explanation


Here is the implementation of above example.
 In the above example the Heading exhibits a blue
background using RGB color value (109, 102, 197).
 Div border is styled with skyblue using RGB color value
(135, 206, 235).
 Link text appears in tomato color using RGB value (241, 76,
89) for visual distinction.
 Paragraph text is styled with dark green using RGB value
(0, 100, 0) for readability.
RGBA Color Value
RGBA (Red, Green, Blue, Alpha) is a color model similar to
RGB, but with an added alpha parameter representing
transparency. The alpha value, which ranges from 0 to 1,
adjusts transparency, allowing the display of colors with
varying levels of opacity. It's representation is as rgba(red,
green, blue, alpha).
RGBA Color values Properties
 RGBA Format Represents colors using Red, Green, Blue,
and Alpha (transparency) values, allowing control over
opacity.
 Alpha value ranges from 0 (fully transparent) to 1 (fully
opaque).
 RGBA values are expressed as rgba(red, green, blue,
alpha).
 Ideal for creating semi-transparent elements, providing
subtle visual effects or layering content.
RGBA Color Value Syntax
// Semi-transparent text with a purple hue
<span style="color: rgba(128, 0, 128, 0.5);">
This text is semi-transparent with a purple hue using
RGBA
</span>
RGBA Color Value Example
In this example we are using the RGBA color values to style
our html elements.
<!DOCTYPE html>
<html>
<head>
<title>RGBA Color Value</title>
<style>
center {
width: 50%;
margin: 0 auto;
}
h2, div, p, span {
padding: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<center>
<h2 style="background-color: rgba(255, 99, 71, 0.5);">
Heading with semi-transparent Tomato Background color
</h2>
<div style="border: 2px solid rgba(255, 165, 0, 0.7);">
Div with semi-transparent Orange Border color
</div>
<span>
<a href="#"
style="color: rgba(0, 191, 255, 0.8);">
Link has a semi-transparent Deep Sky Blue color
</a>
</span>
<p style="color: rgba(128, 0, 128, 0.6);">
Paragraph with semi-transparent Purple Text color
</p>
</center>
</body>
</html>
Output:

RGBA color value


RGBA Color Value Example Explanation:
 Here we styled Heading with semi-transparent tomato
background color using RGBA (255, 99, 71, 0.5).
 Div Exhibits a semi-transparent orange border with RGBA
(255, 165, 0, 0.7).
 Link Displays a semi-transparent deep sky blue color using
RGBA (0, 191, 255, 0.8).
 In Paragraph Text appears semi-transparent purple with
RGBA (128, 0, 128, 0.6).
HEX Color Value
Hexadecimal color values, often referred to as hex values, use
a six-digit code made up of pairs of characters.
 Hexadecimal values in CSS are represented as #rrggbb,
where rr, gg, and bb denote the intensity of red, green, and
blue, respectively, ranging from 00 to ff.
 This encoding allows for 16,777,216 unique color
combinations, providing a vast spectrum for web design.
 For example, #ff0000 corresponds to red (max red, no
green, no blue), while #00ff00 represents green (max
green, no red, no blue).
 Black is denoted by #000000 (no red, no green, no blue),
while white is represented as #ffffff (max red, max green,
max blue).
HEX Color Value Syntax
// Pinkish Background
<div style="background-color: #FF69B4;">
div has a pinkish background by using Hex
</div>
HEX Color Value Example:
In this example we are using the HEX color values to style our
html elements.
<!DOCTYPE html>
<html>
<head>
<title>Hex Color Value</title>
<style>
center {
width: 50%;
margin: 0 auto;
}
h2, div, p, span {
padding: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<center>
<h2 style="background-color: #FF6347;">
Heading with semi-transparent
Tomato Background color (Hex: #FF6347)
</h2>
<div style="border: 2px solid #FFA500;">
Div with semi-transparent
Orange Border color (Hex: #FFA500)
</div>
<span>
<a href="#" style="color: #00BFFF;">
Link has a semi-transparent
Deep Sky Blue color (Hex: #00BFFF)
</a>
</span>
<p style="color: #800080;">
Paragraph with semi-transparent
Purple Text color (Hex: #800080)
</p>
</center>
</body>
</html>
Output:

hex color value


HEX Color Value Explanation:
 In this example Heading Styled with a tomato background
using hex color value #FF6347.
 Div Features an orange border using hex color value
#FFA500.
 Link Rendered with a deep sky blue color using hex value
#00BFFF.
 Paragraph Text is colored purple using hex value #800080.
HSL (Hue, Saturation, Lightness) Value
HSL color values in HTML represent colors by defining their
hue, saturation, and lightness. The hue signifies the type of
color (red, blue, green, etc.), saturation refers to the intensity
or purity of the color, and lightness determines the brightness
or darkness.
HSL Color value Properties:
 HSL representation defines colors based on Hue, Saturation,
and Lightness components, offering a more intuitive way to
specify colors.
 Hue represents the color type, ranging from 0 to 360
degrees.
 Saturation determines the intensity or purity of the color,
from 0% (grayscale) to 100% (full color).
 Lightness controls the brightness of the color, ranging from
0% (black) to 100% (white), with 50% representing normal.
HSL Color value Syntax
// Golden Background
<div style="background-color: hsl(45, 100%, 50%);">
This div has a golden background using HSL
</div>
HSL color value Example:
The example shows the HSL color values.
<!DOCTYPE html>
<html>
<head>
<title>HSL Color Value</title>
<style>
center {
width: 50%;
margin: 0 auto;
}
h2, div, p, span {
padding: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<center>
<h2 style="background-color: hsla(120, 100%, 50%, 0.5);">
Heading with semi-transparent
Green Background color
(HSL: hsla(120, 100%, 50%, 0.5))
</h2>
<div style="border: 2px solid hsla(240, 100%, 50%, 0.7);">
Div with semi-transparent
Blue Border color
(HSL: hsla(240, 100%, 50%, 0.7))
</div>
<span>
<a href="#" style="color: hsla(30, 100%, 50%, 0.8);">
Link has a semi-transparent
Orange color
(HSL: hsla(30, 100%, 50%, 0.8))
</a>
</span>
<p style="color: hsla(0, 100%, 25%, 0.6);">
Paragraph with semi-transparent
Red Text color
(HSL: hsla(0, 100%, 25%, 0.6))
</p>
</center>
</body>
</html>
Output:

hsl color value


HSL Color value Explanation:
 In this example HSLA(120, 100%, 50%, 0.5) creates a semi-
transparent green background for the heading with 50%
opacity.
 HSLA(240, 100%, 50%, 0.7) sets a semi-transparent blue
border for the div with 70% opacity.
 HSLA(30, 100%, 50%, 0.8) defines a semi-transparent
orange color for the link with 80% opacity.
 HSLA(270, 100%, 25%, 0.6) specifies semi-transparent
purple text for the paragraph with 60% opacity.
HTML Links Hyperlinks
Last Updated : 02 Dec, 2024


HTML Links, also known as hyperlinks, are defined by


the <a> tag in HTML, which stands for “anchor.” These links
are essential for navigating between web pages and directing
users to different sites, documents, or sections within the
same page.
The basic attributes of the <a> tag include href, title,
and target, among others.
Basic Syntax of an HTML Link:
<a href="https://www.example.com">Visit Example</a>
Note: A hyperlink can be represented by an image or any
other HTML element, not just text.
A Simple HTML Link Example
In this example, we contains a paragraph instructing users to
click on the link labeled “GeeksforGeeks,” which directs to the
website “https://www.geeksforgeeks.org”.

1
<!DOCTYPE html>
2
<html>
3

4
<head>
5
<title>HTML Links</title>
6
</head>
7

8
<body>
9
<p>Click on the following link</p>
10
<a href="https://www.geeksforgeeks.org">
11
GeeksforGeeks
12
</a>
13
</body>
14

15
</html>
Output:
By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue.
 A visited link is underlined and purple.
 An active link is underlined and red.

HTML Links – Target Attribute


The target attribute in the <a> tag specifies where to open the
linked document. It controls whether the link opens in the
same window, a new window, or a specific frame.
Attribute Description

_blank Opens the linked document in a new window or tab.

_self
Opens the linked document in the same frame or window as the link. (Default
behavior)

_parent Opens the linked document in the parent frame.

_top Opens the linked document in the full body of the window.
Attribute Description

framename
Opens the linked document in a specified frame. The frame’s name is specified in
the attribute.

Example: In this example we demonstrates the use of target


attributes in links. Each link opens in a different context:
_blank opens in a new window or tab, _self in the same frame,
_parent in the parent frame, _top in the full window body, and
framename in a specified frame.

1
<!DOCTYPE html>
2
<html>
3

4
<head>
5
<title>Target Attribute Example</title>
6
</head>
7

8
<body>
9
<h3>
10
Various options available in the
11
Target Attribute
12
</h3>
13

14
<p>
15
If you set the target attribute to
16
"_blank", the link will open in a new
17
browser window or tab.
18
</p>
19
<a href="https://www.geeksforgeeks.org"
20
target="_blank">
21
GeeksforGeeks
22
</a>
23

24
<p>
25
If you set the target attribute to
26
"_self", the link will open in the
27
same window or tab.
28
</p>
29
<a href="https://www.geeksforgeeks.org"
30
target="_self">
31
GeeksforGeeks
32
</a>
33

34
<p>
35
If you set the target attribute to
36
"_top", the link will open in the full
37
body of the window.
38
</p>
39
<a href="https://www.geeksforgeeks.org"
40
target="_top">
41
GeeksforGeeks
42
</a>
43

44
<p>
45
If you set the target attribute to
46
"_parent", the link will open in the
47
parent frame.
48
</p>
49
<a href="https://www.geeksforgeeks.org"
50
target="_parent">
51
GeeksforGeeks
52
</a>
53
</body>
54

55
</html>
Output:
Linking Different HTML Elements
Below are examples of how to link different HTML elements
with their respective code snippets
Element to
Interlink Specific Code

Linking to an image <a href="image.jpg"><img src="image.jpg" alt="Image"></a>

Link to an Email <a href="mailto:[email protected]">Send Email</a>


Address

Phone Number <a href="tel:+1234567890">Call Now</a>

<a href="https://www.example.com"> <button>Visit


Button Example</button> </a>

Link to Download <a href="file.pdf" download>Download File</a>


File

<a href="https://www.example.com" title="Visit


Link Title Example">Link Text</a

HTML Favicon
Last Updated : 19 Dec, 2024


An HTML favicon (or favorite icon) is a small image or icon


that represents a website, typically shown in the browser tab,
bookmarks, and shortcuts. It is used for:
 Brand Recognition: Favicons are a visual marker for your
brand online, helping to increase and reinforce brand
awareness.
 Professionalism: A well-designed favicon makes your site
look professional and credible.
 Usability: It improves the user’s navigation experience by
allowing them to easily identify and switch to your tab when
multiple tabs are open.
How to Implement a Favicon in HTML
To add a favicon to your HTML document, you’ll need to
reference it in the <head> section of your HTML code. Here’s
how you can do it:

1
<!DOCTYPE html>
2
<html>
3

4
<head>
5
<meta charset="utf-8" />
6
<title>HTML Favicon</title>
7

8
<!-- Add icon link -->
9
<link rel="icon" href="https://media.geeksforgeeks.org/wp-
content/cdn-uploads/gfg_200X200.png" type="image/x-icon">
10
</head>
11

12
<body>
13
<h3 style="color:green;">
14
GeeksforGeeks
15
</h3>
16
<p>Welcome to my website</p>
17
</body>
18
19
</html>
Output:

In this example:
 rel=”icon”: Indicates that the linked resource is an icon for
the document. This relationship is essential for browsers to
understand that the specified file is meant to be used as
the website’s favicon.
 href=”https://media.geeksforgeeks.org/wp-content/
cdn-uploads/gfg_200X200.png”: Specifies the path to
the favicon image. This can be a URL (as used here)
pointing to an image that serves as the icon.
 type=”image/x-icon”: Specifies the MIME type of the
favicon file. While commonly image/x-icon is used for .ico
files, modern browsers support PNG and other formats as
well.
Note: Major browsers are not supported by the sizing
property of the favicon.

List of Favicon Sizes


Different devices and browsers may require favicons of
various sizes. Here’s a list of common favicon sizes:
Name Size Description

Standard for most desktop


favicon-32.png 32×32
browsers.

favicon-57.png 57×57 Standard iOS home screen.

favicon-76.png 76×76 iPad home screen icon.

favicon-96.png 96×96 GoogleTV icon.

favicon-120.png 120×120 iPhone retina touch icon.

Chrome Web Store icon &


favicon-128.png 128×128 Small Windows 8 Star Screen
Icon*.

Internet Explorer 10 Metro tile


favicon-144.png 144×144
for pinned site*

favicon-152.png 152×152 iPad touch icon.

iPad Retina touch icon (change


for iOS 10: up from 152×152,
favicon-167.png 167×167
not in action. iOS 10 will use
152×152)
Name Size Description

favicon-180.png 180×180 iPhone 6 plus

Google Developer Web App


favicon-192.png 192×192
Manifest Recommendation

Opera Speed Dial icon


favicon-195.png 195×195 (Not working in Opera 15 and
later)

Chrome for Android home


favicon-196.png 196×196
screen icon

favicon-228.png 228×228 Opera Coast icon

Favicon File Format Support


Here’s a table summarizing the common file formats
supported for favicons:
File Browser
Format Support Advantages Disadvantages

 Edge
 Chrome Supports multiple sizes
Larger file size compared
ICO  Firefox in a single file; widely
to others
 Opera supported
 Safari

High-quality image,
Does not support multiple
PNG All Five supports transparency,
sizes in one file
smaller file size

Limited color palette (256


GIF All Five Supports animation colors), less ideal for
favicons
File Browser
Format Support Advantages Disadvantages

Does not support


Good for high-quality
JPEG All Five transparency, larger file
images
size

Scalable, small file size, Not supported by all


SVG All Five sharp quality at any browsers (especially older
resolution ones)

Limited browser support,


Smaller file size with
WebP All Five not widely used for
high quality
favicons

HTML Favicon – FAQs


What is a favicon?
A favicon is a small icon that represents a website, typically
displayed in the browser tab, bookmarks, and address bar.
How to add a favicon to an HTML document?
Use the <link> tag inside the <head> section of the HTML
document. Example: <link rel=”icon” href=”favicon.ico”
type=”image/x-icon”>
What file formats are commonly used for
favicons?
Common formats include .ico, .png, .svg, and .gif.
Where should the favicon file be placed?
The favicon file is typically placed in the root directory of the
website, but it can be located anywhere as long as the path in
the <link> tag is correct.
Can you use a PNG file as a favicon?
Yes, use the <link> tag with the type attribute set to
image/png. Example: <link rel=”icon” href=”favicon.png”
type=”image/png”>
How do you specify multiple favicon sizes?
Use the sizes attribute in the <link> tag. Example: <link
rel=”icon” href=”favicon-32×32.png” sizes=”32×32″>

HTML Favicon
Get 90% Course fee refund on completing 90% course
in 90 days! Take the Three 90 Challenge today.

The next 90 Days of focus & determination can unlock your


full potential. The Three 90 challenge has started and this is
your chance to upskill and get 90% refund. What more
motivation do you need? Start the challenge right away!
HTML Tables
Last Updated : 22 Nov, 2024


HTML Tables allow you to arrange data into rows and


columns on a web page, making it easy to display information
like schedules, statistics, or other structured data in a clear
format.
What is an HTML Table?
An HTML table is created using the <table> tag. Inside this
tag, you use
 <tr> to define table rows,
 <th> for table headers, and
 <td> for table data cells
Each <tr> represents a row, and within each row, <th> or
<td> tags represent the cells in that row, which can contain
text, images, lists, or even another table.

HTML Table Code Example


1
<!-- index.html -->
2
<!DOCTYPE html>
3
<html>
4

5
<body>
6
<table>
7
<tr>
8
<th>Firstname</th>
9
<th>Lastname</th>
10
<th>Age</th>
11
</tr>
12
<tr>
13
<td>Priya</td>
14
<td>Sharma</td>
15
<td>24</td>
16
</tr>
17
<tr>
18
<td>Arun</td>
19
<td>Singh</td>
20
<td>32</td>
21
</tr>
22
<tr>
23
<td>Sam</td>
24
<td>Watson</td>
25
<td>41</td>
26
</tr>
27
</table>
28
</body>
29

30
</html>
Output:

Simple HTML Table

In this example:
 <table>: This tag starts the table. Everything between the
opening <table> and closing </table> tags makes up the
table.
 <tr>: Stands for “table row”. Each <tr> tag defines a row
in the table.
 <th>: Stands for “table header”. It’s used for the headers
of the columns. In this case, “Firstname“, “Lastname“,
and “Age” are headers. Text in <th> tags is usually bold
and centered by default.
 <td>: Stands for “table data”. This tag is used for actual
data cells under each column. For instance, “Priya” is the
data under the “Firstname” header, “Sharma” under the
“Lastname“, and “24” under the “Age“.
 The first <tr> has three <th> elements, setting up the
column titles.
 The subsequent <tr> tags each contain three <td>
elements, representing the data for each person listed in
the table.
When this HTML code is rendered in a web browser, it will
display a table with four rows (one header row plus three data
rows) and three columns (Firstname, Lastname, Age), showing
the names and ages of Priya, Arun, and Sam.
Tags used in HTML Tables
HTML Tags Descriptions

Defines the structure for organizing data in


<table>
rows and columns within a web page.

Represents a row within an HTML table,


<tr>
containing individual cells.

Shows a table header cell that typically holds


<th>
titles or headings.

Represents a standard data cell, holding


<td>
content or data.

Provides a title or description for the entire


<caption>
table.

Defines the header section of a table, often


<thead>
containing column labels.

Represents the main content area of a table,


<tbody>
separating it from the header or footer.

Specifies the footer section of a table, typically


<tfoot>
holding summaries or totals.
HTML Tags Descriptions

Defines attributes for table columns that can


<col>
be applied to multiple columns at once.

Groups together a set of columns in a table to


<colgroup> which you can apply formatting or properties
collectively.

Another Example of HTML Table:


Creating a simple table in HTML using a table tag.

1
<!-- index.html -->
2
<!DOCTYPE html>
3
<html>
4

5
<body>
6
<table>
7
<tr>
8
<th>Book Name</th>
9
<th>Author Name</th>
10
<th>Genre</th>
11
</tr>
12
<tr>
13
<td>The Book Thief</td>
14
<td>Markus Zusak</td>
15
<td>Historical Fiction</td>
16
</tr>
17
<tr>
18
<td>The Cruel Prince</td>
19
<td>Holly Black</td>
20
<td>Fantasy</td>
21
</tr>
22
<tr>
23
<td>The Silent Patient</td>
24
<td> Alex Michaelides</td>
25
<td>Psychological Fiction</td>
26
</tr>
27
</table>
28
</body>
29

30
</html>
Output:

HTML Table

Styling HTML Tables


Styling an HTML table can significantly improve its appearance
and readability. You can use CSS (Cascading Style Sheets) to
add styles such as borders, background colors, text
alignments, and much more. Here are some basic styles to
make your table look neater and more professional:
1. Adding a Border to an HTML Table
A border is set using the CSS border property. If you do not
specify a border for the table, it will be displayed without
borders.
Syntax
table, th, td {
border: 1px solid black;
}
Example: Addition of the border to the HTML Table.

1
<!-- index.html -->
2
<!DOCTYPE html>
3
<html>
4

5
<head>
6
<style>
7
table,
8
th,
9
td {
10
border: 1px solid black;
11
}
12
</style>
13
</head>
14

15
<body>
16
<table style="width:100%">
17
<tr>
18
<th>Firstname</th>
19
<th>Lastname</th>
20
<th>Age</th>
21
</tr>
22
<tr>
23
<td>Priya</td>
24
<td>Sharma</td>
25
<td>24</td>
26
</tr>
27
<tr>
28
<td>Arun</td>
29
<td>Singh</td>
30
<td>32</td>
31
</tr>
32
<tr>
33
<td>Sam</td>
34
<td>Watson</td>
35
<td>41</td>
36
</tr>
37
</table>
38
</body>
39

40
</html>
Output:

HTML Table with border

2. Adding Collapsed Borders in an HTML


Table
For borders to collapse into one border, add the CSS border-
collapse property.
Syntax
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Example: Addition of Collapsed Borders in HTML.

1
<!-- index.html -->
2
<!DOCTYPE html>
3
<html>
4

5
<head>
6
<style>
7
table,
8
th,
9
td {
10
border: 1px solid black;
11
border-collapse: collapse;
12
}
13
</style>
14
</head>
15

16
<body>
17
<table style="width:100%">
18
<tr>
19
<th>Firstname</th>
20
<th>Lastname</th>
21
<th>Age</th>
22
</tr>
23
<tr>
24
<td>Priya</td>
25
<td>Sharma</td>
26
<td>24</td>
27
</tr>
28
<tr>
29
<td>Arun</td>
30
<td>Singh</td>
31
<td>32</td>
32
</tr>
33
<tr>
34
<td>Sam</td>
35
<td>Watson</td>
36
<td>41</td>
37
</tr>
38
</table>
39
</body>
40

41
</html>
Output:

HTML Table with Collapsed Borders

3. Adding Cell Padding in an HTML Table


Cell padding specifies the space between the cell content and
its borders. If we do not specify a padding, the table cells will
be displayed without padding.
Syntax
th, td {
padding: 20px;
}
Example: Addition of Table cell padding in HTML.
1
<!-- index.html -->
2
<!DOCTYPE html>
3
<html>
4

5
<head>
6
<style>
7
table,
8
th,
9
td {
10
border: 1px solid black;
11
border-collapse: collapse;
12
}
13

14
th,
15
td {
16
padding: 20px;
17
}
18
</style>
19
</head>
20

21
<body>
22
<table style="width:100%">
23
<tr>
24
<th>Firstname</th>
25
<th>Lastname</th>
26
<th>Age</th>
27
</tr>
28
<tr>
29
<td>Priya</td>
30
<td>Sharma</td>
31
<td>24</td>
32
</tr>
33
<tr>
34
<td>Arun</td>
35
<td>Singh</td>
36
<td>32</td>
37
</tr>
38
<tr>
39
<td>Sam</td>
40
<td>Watson</td>
41
<td>41</td>
42
</tr>
43
</table>
44
</body>
45

46
</html>
Output:

Adding Table cell padding

4. Adding Left Align Headings in an


HTML Table
By default, the table headings are bold and centered. To left-
align the table headings, we must use the CSS text-align
property.
Syntax
th {
text-align: left;
}
Example: Explains the text-align property where the text is
aligned to the left.

1
<!-- index.html -->
2
<!DOCTYPE html>
3
<html>
4
5
<head>
6
<style>
7
table,
8
th,
9
td {
10
border: 1px solid black;
11
border-collapse: collapse;
12
}
13

14
th,
15
td {
16
padding: 20px;
17
}
18

19
th {
20
text-align: left;
21
}
22
</style>
23
</head>
24

25
<body>
26
<table style="width:100%">
27
<tr>
28
<th>Firstname</th>
29
<th>Lastname</th>
30
<th>Age</th>
31
</tr>
32
<tr>
33
<td>Priya</td>
34
<td>Sharma</td>
35
<td>24</td>
36
</tr>
37
<tr>
38
<td>Arun</td>
39
<td>Singh</td>
40
<td>32</td>
41
</tr>
42
<tr>
43
<td>Sam</td>
44
<td>Watson</td>
45
<td>41</td>
46
</tr>
47
</table>
48
</body>
49

50
</html>
Output:

text-align Property

5. Adding Border Spacing in an HTML


Table
Border spacing specifies the space between the cells. To set
the border-spacing for a table, we must use the CSS border-
spacing property.
Syntax
table {
border-spacing: 5px;
}
Example: Explains the border space property to make the
space between the Table cells.

1
<!-- index.html -->
2
<!DOCTYPE html>
3
<html>
4

5
<head>
6
<style>
7
table,
8
th,
9
td {
10
border: 1px solid black;
11
}
12

13
table {
14
border-spacing: 5px;
15
}
16
</style>
17
</head>
18

19
<body>
20
<table style="width:100%">
21
<tr>
22
<th>Firstname</th>
23
<th>Lastname</th>
24
<th>Age</th>
25
</tr>
26
<tr>
27
<td>Priya</td>
28
<td>Sharma</td>
29
<td>24</td>
30
</tr>
31
<tr>
32
<td>Arun</td>
33
<td>Singh</td>
34
<td>32</td>
35
</tr>
36
<tr>
37
<td>Sam</td>
38
<td>Watson</td>
39
<td>41</td>
40
</tr>
41
</table>
42
</body>
43

44
</html>
Output:

Border Spacing Property


6. Adding Cells that Span Many Columns
in HTML Tables
To make a cell span more than one column, we must use the
colspan attribute.
Example: Use of colspan attribute in HTML.

1
<!-- index.html -->
2
<!DOCTYPE html>
3
<html>
4

5
<head>
6
<style>
7
table,
8
th,
9
td {
10
border: 1px solid black;
11
border-collapse: collapse;
12
}
13

14
th,
15
td {
16
padding: 5px;
17
text-align: left;
18
}
19
</style>
20
</head>
21

22
<body>
23
<h2>Cell that spans two columns:</h2>
24
<table style="width:100%">
25
<tr>
26
<th>Name</th>
27
<th colspan="2">Telephone</th>
28
</tr>
29
<tr>
30
<td>Vikas Rawat</td>
31
<td>9125577854</td>
32
<td>8565557785</td>
33
</tr>
34
</table>
35
</body>
36

37
</html>
Output:
colspan attribute

7. Adding Cells that span many rows in


HTML Tables
To make a cell span more than one row, we must use the
rowspan attribute.
Example: Use of the rowspan attribute in HTML.

1
<!-- index.html -->
2
<!DOCTYPE html>
3
<html>
4

5
<head>
6
<style>
7
table,
8
th,
9
td {
10
border: 1px solid black;
11
border-collapse: collapse;
12
}
13
14
th,
15
td {
16
padding: 5px;
17
text-align: left;
18
}
19
</style>
20
</head>
21

22
<body>
23
<h2>Cell that spans two rows:</h2>
24
<table style="width:100%">
25
<tr>
26
<th>Name:</th>
27
<td>Vikas Rawat</td>
28
</tr>
29
<tr>
30
<th rowspan="2">Telephone:</th>
31
<td>9125577854</td>
32
</tr>
33
<tr>
34
<td>8565557785</td>
35
</tr>
36
</table>
37
</body>
38

39
</html>
Output:

Use of rowspan attribute

8. Adding a Caption in an HTML Table


To add a caption to a table, we must use the “caption” tag.
Syntax
<table style="width:100%">
<caption>DETAILS</caption>
Example: HTML Table caption by specifying the CSS
properties for setting its width.

1
<!-- index.html -->
2
<!DOCTYPE html>
3
<html>
4

5
<head>
6
<style>
7
table,
8
th,
9
td {
10
border: 1px solid black;
11
border-collapse: collapse;
12
}
13

14
th,
15
td {
16
padding: 20px;
17
}
18

19
th {
20
text-align: left;
21
}
22
</style>
23
</head>
24

25
<body>
26
<table style="width:100%">
27
<caption>DETAILS</caption>
28
<tr>
29
<th>Firstname</th>
30
<th>Lastname</th>
31
<th>Age</th>
32
</tr>
33
<tr>
34
<td>Priya</td>
35
<td>Sharma</td>
36
<td>24</td>
37
</tr>
38
<tr>
39
<td>Arun</td>
40
<td>Singh</td>
41
<td>32</td>
42
</tr>
43
<tr>
44
<td>Sam</td>
45
<td>Watson</td>
46
<td>41</td>
47
</tr>
48
</table>
49
</body>
50

51
</html>
Output:
Adding the caption using the tag

9. Adding a Background Colour to the


Table
A color can be added as a background in an HTML table using
the “background-color” option.
Syntax
table#t01 {
width: 100%;
background-color: #f2f2d1;
}
Example: Addition of the Table background color in HTML.

1
<!-- index.html -->
2
<!DOCTYPE html>
3
<html>
4

5
<head>
6
<style>
7
table,
8
th,
9
td {
10
border: 1px solid black;
11
border-collapse: collapse;
12
}
13

14
th,
15
td {
16
padding: 5px;
17
text-align: left;
18
}
19

20
table#t01 {
21
width: 100%;
22
background-color: #f2f2d1;
23
}
24
</style>
25
</head>
26

27
<body>
28
<table style="width:100%">
29
<tr>
30
<th>Firstname</th>
31
<th>Lastname</th>
32
<th>Age</th>
33
</tr>
34
<tr>
35
<td>Priya</td>
36
<td>Sharma</td>
37
<td>24</td>
38
</tr>
39
<tr>
40
<td>Arun</td>
41
<td>Singh</td>
42
<td>32</td>
43
</tr>
44
<tr>
45
<td>Sam</td>
46
<td>Watson</td>
47
<td>41</td>
48
</tr>
49
</table>
50
<br />
51
<br />
52
<table id="t01">
53
<tr>
54
<th>Firstname</th>
55
<th>Lastname</th>
56
<th>Age</th>
57
</tr>
58
<tr>
59
<td>Priya</td>
60
<td>Sharma</td>
61
<td>24</td>
62
</tr>
63
<tr>
64
<td>Arun</td>
65
<td>Singh</td>
66
<td>32</td>
67
</tr>
68
<tr>
69
<td>Sam</td>
70
<td>Watson</td>
71
<td>41</td>
72
</tr>
73
</table>
74
</body>
75

76
</html>
Output:

Adding Table Background color using CSS properties

10. Creating Nested Tables


Nesting tables simply means making a Table inside another
Table. Nesting tables can lead to complex tables layouts,
which are visually interesting and have the potential of
introducing errors.
Example: Nesting of HTML Table.

1
<!-- index.html -->
2
<!DOCTYPE html>
3
<html>
4

5
<body>
6
<table border=5 bordercolor=black>
7
<tr>
8
<td> First Column of Outer Table </td>
9
<td>
10
<table border=5 bordercolor=grey>
11
<tr>
12
<td> First row of Inner Table </td>
13
</tr>
14
<tr>
15
<td> Second row of Inner Table </td>
16
</tr>
17
</table>
18
</td>
19
</tr>
20
</table>
21
</body>
22

23
</html>
Output:

Nested HTML Table

Supported Browsers
 Google Chrome 15
 Edge 12
 Firefox 1
 Opera 14
 Safari 6
—> HTML is the foundation of webpages, is used for webpage
development by structuring websites and web apps. You can
learn HTML from the ground up by following this HTML
Tutorial and HTML Examples.
HTML Tables – FAQs
How do I create a table in HTML?
Use the <table> tag with nested <tr> (table row) and <td>
(table data) tags to create rows and cells.
What are HTML tables used for?
HTML tables organize and display data in a structured format,
useful for comparing information like schedules, reports, and
product listings.
What are the tables in HTML5?
HTML5 tables use traditional tags: <table>, <tr>, <td>,
<th>, <thead>, <tbody>, and <tfoot>, with enhanced
attributes and CSS support for better styling and
responsiveness.
What is the table data tag in HTML?
The <td> tag defines a cell within a table that contains data.

HTML Tables
Last Updated : 22 Nov, 2024


HTML Tables allow you to arrange data into rows and


columns on a web page, making it easy to display information
like schedules, statistics, or other structured data in a clear
format.
What is an HTML Table?
An HTML table is created using the <table> tag. Inside this
tag, you use
 <tr> to define table rows,
 <th> for table headers, and
 <td> for table data cells
Each <tr> represents a row, and within each row, <th> or
<td> tags represent the cells in that row, which can contain
text, images, lists, or even another table.

HTML Table Code Example

1
<!-- index.html -->
2
<!DOCTYPE html>
3
<html>
4

5
<body>
6
<table>
7
<tr>
8
<th>Firstname</th>
9
<th>Lastname</th>
10
<th>Age</th>
11
</tr>
12
<tr>
13
<td>Priya</td>
14
<td>Sharma</td>
15
<td>24</td>
16
</tr>
17
<tr>
18
<td>Arun</td>
19
<td>Singh</td>
20
<td>32</td>
21
</tr>
22
<tr>
23
<td>Sam</td>
24
<td>Watson</td>
25
<td>41</td>
26
</tr>
27
</table>
28
</body>
29

30
</html>
Output:

Simple HTML Table

In this example:
 <table>: This tag starts the table. Everything between the
opening <table> and closing </table> tags makes up the
table.
 <tr>: Stands for “table row”. Each <tr> tag defines a row
in the table.
 <th>: Stands for “table header”. It’s used for the headers
of the columns. In this case, “Firstname“, “Lastname“,
and “Age” are headers. Text in <th> tags is usually bold
and centered by default.
 <td>: Stands for “table data”. This tag is used for actual
data cells under each column. For instance, “Priya” is the
data under the “Firstname” header, “Sharma” under the
“Lastname“, and “24” under the “Age“.
 The first <tr> has three <th> elements, setting up the
column titles.
 The subsequent <tr> tags each contain three <td>
elements, representing the data for each person listed in
the table.
When this HTML code is rendered in a web browser, it will
display a table with four rows (one header row plus three data
rows) and three columns (Firstname, Lastname, Age), showing
the names and ages of Priya, Arun, and Sam.
Tags used in HTML Tables
HTML Tags Descriptions

Defines the structure for organizing data in


<table>
rows and columns within a web page.

Represents a row within an HTML table,


<tr>
containing individual cells.

Shows a table header cell that typically holds


<th>
titles or headings.

Represents a standard data cell, holding


<td>
content or data.

Provides a title or description for the entire


<caption>
table.
HTML Tags Descriptions

Defines the header section of a table, often


<thead>
containing column labels.

Represents the main content area of a table,


<tbody>
separating it from the header or footer.

Specifies the footer section of a table, typically


<tfoot>
holding summaries or totals.

Defines attributes for table columns that can


<col>
be applied to multiple columns at once.

Groups together a set of columns in a table to


<colgroup> which you can apply formatting or properties
collectively.

Another Example of HTML Table:


Creating a simple table in HTML using a table tag.

1
<!-- index.html -->
2
<!DOCTYPE html>
3
<html>
4

5
<body>
6
<table>
7
<tr>
8
<th>Book Name</th>
9
<th>Author Name</th>
10
<th>Genre</th>
11
</tr>
12
<tr>
13
<td>The Book Thief</td>
14
<td>Markus Zusak</td>
15
<td>Historical Fiction</td>
16
</tr>
17
<tr>
18
<td>The Cruel Prince</td>
19
<td>Holly Black</td>
20
<td>Fantasy</td>
21
</tr>
22
<tr>
23
<td>The Silent Patient</td>
24
<td> Alex Michaelides</td>
25
<td>Psychological Fiction</td>
26
</tr>
27
</table>
28
</body>
29

30
</html>
Output:
HTML Table

Styling HTML Tables


Styling an HTML table can significantly improve its appearance
and readability. You can use CSS (Cascading Style Sheets) to
add styles such as borders, background colors, text
alignments, and much more. Here are some basic styles to
make your table look neater and more professional:
1. Adding a Border to an HTML Table
A border is set using the CSS border property. If you do not
specify a border for the table, it will be displayed without
borders.
Syntax
table, th, td {
border: 1px solid black;
}
Example: Addition of the border to the HTML Table.

1
<!-- index.html -->
2
<!DOCTYPE html>
3
<html>
4

5
<head>
6
<style>
7
table,
8
th,
9
td {
10
border: 1px solid black;
11
}
12
</style>
13
</head>
14

15
<body>
16
<table style="width:100%">
17
<tr>
18
<th>Firstname</th>
19
<th>Lastname</th>
20
<th>Age</th>
21
</tr>
22
<tr>
23
<td>Priya</td>
24
<td>Sharma</td>
25
<td>24</td>
26
</tr>
27
<tr>
28
<td>Arun</td>
29
<td>Singh</td>
30
<td>32</td>
31
</tr>
32
<tr>
33
<td>Sam</td>
34
<td>Watson</td>
35
<td>41</td>
36
</tr>
37
</table>
38
</body>
39

40
</html>
Output:

HTML Table with border

2. Adding Collapsed Borders in an HTML


Table
For borders to collapse into one border, add the CSS border-
collapse property.
Syntax
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Example: Addition of Collapsed Borders in HTML.
1
<!-- index.html -->
2
<!DOCTYPE html>
3
<html>
4

5
<head>
6
<style>
7
table,
8
th,
9
td {
10
border: 1px solid black;
11
border-collapse: collapse;
12
}
13
</style>
14
</head>
15

16
<body>
17
<table style="width:100%">
18
<tr>
19
<th>Firstname</th>
20
<th>Lastname</th>
21
<th>Age</th>
22
</tr>
23
<tr>
24
<td>Priya</td>
25
<td>Sharma</td>
26
<td>24</td>
27
</tr>
28
<tr>
29
<td>Arun</td>
30
<td>Singh</td>
31
<td>32</td>
32
</tr>
33
<tr>
34
<td>Sam</td>
35
<td>Watson</td>
36
<td>41</td>
37
</tr>
38
</table>
39
</body>
40

41
</html>
Output:
HTML Table with Collapsed Borders

3. Adding Cell Padding in an HTML Table


Cell padding specifies the space between the cell content and
its borders. If we do not specify a padding, the table cells will
be displayed without padding.
Syntax
th, td {
padding: 20px;
}
Example: Addition of Table cell padding in HTML.

1
<!-- index.html -->
2
<!DOCTYPE html>
3
<html>
4

5
<head>
6
<style>
7
table,
8
th,
9
td {
10
border: 1px solid black;
11
border-collapse: collapse;
12
}
13

14
th,
15
td {
16
padding: 20px;
17
}
18
</style>
19
</head>
20

21
<body>
22
<table style="width:100%">
23
<tr>
24
<th>Firstname</th>
25
<th>Lastname</th>
26
<th>Age</th>
27
</tr>
28
<tr>
29
<td>Priya</td>
30
<td>Sharma</td>
31
<td>24</td>
32
</tr>
33
<tr>
34
<td>Arun</td>
35
<td>Singh</td>
36
<td>32</td>
37
</tr>
38
<tr>
39
<td>Sam</td>
40
<td>Watson</td>
41
<td>41</td>
42
</tr>
43
</table>
44
</body>
45

46
</html>
Output:

Adding Table cell padding

4. Adding Left Align Headings in an


HTML Table
By default, the table headings are bold and centered. To left-
align the table headings, we must use the CSS text-align
property.
Syntax
th {
text-align: left;
}
Example: Explains the text-align property where the text is
aligned to the left.

1
<!-- index.html -->
2
<!DOCTYPE html>
3
<html>
4

5
<head>
6
<style>
7
table,
8
th,
9
td {
10
border: 1px solid black;
11
border-collapse: collapse;
12
}
13

14
th,
15
td {
16
padding: 20px;
17
}
18

19
th {
20
text-align: left;
21
}
22
</style>
23
</head>
24

25
<body>
26
<table style="width:100%">
27
<tr>
28
<th>Firstname</th>
29
<th>Lastname</th>
30
<th>Age</th>
31
</tr>
32
<tr>
33
<td>Priya</td>
34
<td>Sharma</td>
35
<td>24</td>
36
</tr>
37
<tr>
38
<td>Arun</td>
39
<td>Singh</td>
40
<td>32</td>
41
</tr>
42
<tr>
43
<td>Sam</td>
44
<td>Watson</td>
45
<td>41</td>
46
</tr>
47
</table>
48
</body>
49

50
</html>
Output:

text-align Property

5. Adding Border Spacing in an HTML


Table
Border spacing specifies the space between the cells. To set
the border-spacing for a table, we must use the CSS border-
spacing property.
Syntax
table {
border-spacing: 5px;
}
Example: Explains the border space property to make the
space between the Table cells.

1
<!-- index.html -->
2
<!DOCTYPE html>
3
<html>
4

5
<head>
6
<style>
7
table,
8
th,
9
td {
10
border: 1px solid black;
11
}
12

13
table {
14
border-spacing: 5px;
15
}
16
</style>
17
</head>
18

19
<body>
20
<table style="width:100%">
21
<tr>
22
<th>Firstname</th>
23
<th>Lastname</th>
24
<th>Age</th>
25
</tr>
26
<tr>
27
<td>Priya</td>
28
<td>Sharma</td>
29
<td>24</td>
30
</tr>
31
<tr>
32
<td>Arun</td>
33
<td>Singh</td>
34
<td>32</td>
35
</tr>
36
<tr>
37
<td>Sam</td>
38
<td>Watson</td>
39
<td>41</td>
40
</tr>
41
</table>
42
</body>
43

44
</html>
Output:

Border Spacing Property

6. Adding Cells that Span Many Columns


in HTML Tables
To make a cell span more than one column, we must use the
colspan attribute.
Example: Use of colspan attribute in HTML.

1
<!-- index.html -->
2
<!DOCTYPE html>
3
<html>
4

5
<head>
6
<style>
7
table,
8
th,
9
td {
10
border: 1px solid black;
11
border-collapse: collapse;
12
}
13

14
th,
15
td {
16
padding: 5px;
17
text-align: left;
18
}
19
</style>
20
</head>
21

22
<body>
23
<h2>Cell that spans two columns:</h2>
24
<table style="width:100%">
25
<tr>
26
<th>Name</th>
27
<th colspan="2">Telephone</th>
28
</tr>
29
<tr>
30
<td>Vikas Rawat</td>
31
<td>9125577854</td>
32
<td>8565557785</td>
33
</tr>
34
</table>
35
</body>
36

37
</html>
Output:

colspan attribute

7. Adding Cells that span many rows in


HTML Tables
To make a cell span more than one row, we must use the
rowspan attribute.
Example: Use of the rowspan attribute in HTML.

1
<!-- index.html -->
2
<!DOCTYPE html>
3
<html>
4

5
<head>
6
<style>
7
table,
8
th,
9
td {
10
border: 1px solid black;
11
border-collapse: collapse;
12
}
13

14
th,
15
td {
16
padding: 5px;
17
text-align: left;
18
}
19
</style>
20
</head>
21

22
<body>
23
<h2>Cell that spans two rows:</h2>
24
<table style="width:100%">
25
<tr>
26
<th>Name:</th>
27
<td>Vikas Rawat</td>
28
</tr>
29
<tr>
30
<th rowspan="2">Telephone:</th>
31
<td>9125577854</td>
32
</tr>
33
<tr>
34
<td>8565557785</td>
35
</tr>
36
</table>
37
</body>
38

39
</html>
Output:

Use of rowspan attribute

8. Adding a Caption in an HTML Table


To add a caption to a table, we must use the “caption” tag.
Syntax
<table style="width:100%">
<caption>DETAILS</caption>
Example: HTML Table caption by specifying the CSS
properties for setting its width.
1
<!-- index.html -->
2
<!DOCTYPE html>
3
<html>
4

5
<head>
6
<style>
7
table,
8
th,
9
td {
10
border: 1px solid black;
11
border-collapse: collapse;
12
}
13

14
th,
15
td {
16
padding: 20px;
17
}
18

19
th {
20
text-align: left;
21
}
22
</style>
23
</head>
24

25
<body>
26
<table style="width:100%">
27
<caption>DETAILS</caption>
28
<tr>
29
<th>Firstname</th>
30
<th>Lastname</th>
31
<th>Age</th>
32
</tr>
33
<tr>
34
<td>Priya</td>
35
<td>Sharma</td>
36
<td>24</td>
37
</tr>
38
<tr>
39
<td>Arun</td>
40
<td>Singh</td>
41
<td>32</td>
42
</tr>
43
<tr>
44
<td>Sam</td>
45
<td>Watson</td>
46
<td>41</td>
47
</tr>
48
</table>
49
</body>
50

51
</html>
Output:

Adding the caption using the tag

9. Adding a Background Colour to the


Table
A color can be added as a background in an HTML table using
the “background-color” option.
Syntax
table#t01 {
width: 100%;
background-color: #f2f2d1;
}
Example: Addition of the Table background color in HTML.
1
<!-- index.html -->
2
<!DOCTYPE html>
3
<html>
4

5
<head>
6
<style>
7
table,
8
th,
9
td {
10
border: 1px solid black;
11
border-collapse: collapse;
12
}
13

14
th,
15
td {
16
padding: 5px;
17
text-align: left;
18
}
19

20
table#t01 {
21
width: 100%;
22
background-color: #f2f2d1;
23
}
24
</style>
25
</head>
26

27
<body>
28
<table style="width:100%">
29
<tr>
30
<th>Firstname</th>
31
<th>Lastname</th>
32
<th>Age</th>
33
</tr>
34
<tr>
35
<td>Priya</td>
36
<td>Sharma</td>
37
<td>24</td>
38
</tr>
39
<tr>
40
<td>Arun</td>
41
<td>Singh</td>
42
<td>32</td>
43
</tr>
44
<tr>
45
<td>Sam</td>
46
<td>Watson</td>
47
<td>41</td>
48
</tr>
49
</table>
50
<br />
51
<br />
52
<table id="t01">
53
<tr>
54
<th>Firstname</th>
55
<th>Lastname</th>
56
<th>Age</th>
57
</tr>
58
<tr>
59
<td>Priya</td>
60
<td>Sharma</td>
61
<td>24</td>
62
</tr>
63
<tr>
64
<td>Arun</td>
65
<td>Singh</td>
66
<td>32</td>
67
</tr>
68
<tr>
69
<td>Sam</td>
70
<td>Watson</td>
71
<td>41</td>
72
</tr>
73
</table>
74
</body>
75

76
</html>
Output:

Adding Table Background color using CSS properties

10. Creating Nested Tables


Nesting tables simply means making a Table inside another
Table. Nesting tables can lead to complex tables layouts,
which are visually interesting and have the potential of
introducing errors.
Example: Nesting of HTML Table.
1
<!-- index.html -->
2
<!DOCTYPE html>
3
<html>
4

5
<body>
6
<table border=5 bordercolor=black>
7
<tr>
8
<td> First Column of Outer Table </td>
9
<td>
10
<table border=5 bordercolor=grey>
11
<tr>
12
<td> First row of Inner Table </td>
13
</tr>
14
<tr>
15
<td> Second row of Inner Table </td>
16
</tr>
17
</table>
18
</td>
19
</tr>
20
</table>
21
</body>
22

23
</html>
Output:

Nested HTML Table

Supported Browsers
 Google Chrome 15
 Edge 12
 Firefox 1
 Opera 14
 Safari 6
—> HTML is the foundation of webpages, is used for webpage
development by structuring websites and web apps. You can
learn HTML from the ground up by following this HTML
Tutorial and HTML Examples.
HTML Tables – FAQs
How do I create a table in HTML?
Use the <table> tag with nested <tr> (table row) and <td>
(table data) tags to create rows and cells.
What are HTML tables used for?
HTML tables organize and display data in a structured format,
useful for comparing information like schedules, reports, and
product listings.
What are the tables in HTML5?
HTML5 tables use traditional tags: <table>, <tr>, <td>,
<th>, <thead>, <tbody>, and <tfoot>, with enhanced
attributes and CSS support for better styling and
responsiveness.
What is the table data tag in HTML?
The <td> tag defines a cell within a table that contains data.
Why is the table tag used?
The <table> tag organizes data into rows and columns,
presenting structured information clearly and efficiently.

Learn HTML Tables in 4 minutes! | Complete HTML


Tables Tutorial
Get 90% Course fee refund on completing 90% course
in 90 days! Take the Three 90 Challenge today.

The most sought-after Three 90 challenge has started and this


is your chance to upskill and get 90% refund. What more
motivation do you need? Start the challenge right away!

Comment
More info
Next Article
HTML Lists
Similar Reads

How to Create Nested tables within tables in


HTML ?
HTML tables are a great way to organize content into rows and
columns. But what if you need to place a table inside another
table? This is called nested tables, and HTML allows you to do
this easily. Nested tables are useful when you want to create
more complex layouts inside your main table structure.
However, there are some important things to kn
3 min read

Spectre Tables Stripped tables


Tables are important elements of web development society. If
you want to display some data then you will definitely require
tables. Spectre tables are the same as HTML tables, here we
will discuss the Spectre Stripped tables. Tables Stripped tables
Class: table-stripped: This class is used to make the table
row(odd one) stripped. Syntax: <table
1 min read

Spectre Tables Scrollable tables


Tables are important elements of web development society. If
you want to display some data then you will definitely require
tables. Spectre tables are the same as HTML tables, here we
will discuss the Spectre Scrollable tables. Tables Scrollable
tables Class: table-scroll: This class is used to create the table
row vertically scroll-able.Syntax:
1 min read

Why should we avoid use of tables for layout in


HTML ?
In this article, we will learn why we should avoid using tables
for layout in HTML. A website can be divided into various
sections comprising of header, menus, content, and footer
based on which there are many different layout designs
available for developers. Different layouts can be created by
using an HTML div tag and CSS property to style them.
4 min read

CSS Syntax
CSS (Cascading Style Sheets) is a stylesheet language used to describe
the presentation of a document written in HTML. Understanding CSS
syntax is fundamental for creating visually appealing and well-
structured web pages.
Basic CSS Syntax
CSS is written as rulesets. A ruleset consists of a selector and a declaration
block. Here’s the basic structure
<html>
<head>
<style>
/* CSS Rule */
h1 {
color: blue;
/* Property: value */
font-size: 24px;
}
p{
color: green;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple paragraph.</p>
</body>
</html>
 h1: This selector targets all <h1> elements on the page. The style
applied to <h1> will set the text color to blue and the font size to 24px.
 p: This selector targets all <p> elements. The text color will be green
and the font size will be 16px.
CSS Syntax Breakdown
1. Selectors: Selectors are used to “select” the HTML element you want
to style. It can be an element type (e.g., h1), a class (e.g., .class-name),
an ID (e.g., #id-name), or a combination of these.
1. Type Selector: Targets all elements of a specific type, like h1, p,
div, etc.
2. Class Selector: Targets elements with a specific class.
Example: .my-class { }
3. ID Selector: Targets an element with a specific ID. Example: #my-
id { }
4. Universal Selector: Targets all elements (*).
2. Properties: Properties are the aspects of the selected elements you
want to style (like color, width, height, etc.).
1. color: Defines the text color.
2. background-color: Defines the background color of an element.
3. font-size: Sets the size of the font.
4. margin: Specifies the space around an element.
5. padding: Defines the space between the element’s content and its
border.
3. Values: Values define the specifics of the property you want to apply,
such as a color name, a number (e.g., 16px), or percentages (e.g., 50%).
Selectors in CSS
Selectors define which HTML elements are styled. CSS offers several
types of selectors.
Universal Selector: Applies styles to all elements.
*{
margin: 0;
padding: 0;
}
Type Selector: Targets specific HTML elements.
h1 {
font-family: Arial, sans-serif;
}
Class Selector: Styles elements with a specific class attribute.
.box {
border: 1px solid black;
padding: 10px;
}
ID Selector: Targets a single element with a specific ID.
#header {
background-color: lightgray;
}

CSS Selectors

Grouping and Nesting


You can group selectors to apply the same styles or nest them
for hierarchical targeting .
Grouping
h1, h2, h3 {
color: darkblue;
}
Nesting
ul li {
list-style-type: square;
}
Pseudo-classes and Pseudo-elements
Pseudo-classes and pseudo-elements are used for styling specific states or
parts of elements. Pseudo classes target’s the elements based on a
particular state and pseudo elements targets the elements on basis of a
particular part of that element.
/*pseudo-class selector*/
a:hover {
color: green;
}
/*pseudo-element selector*/
p::first-line {
font-weight: bold;
}
Inline, Internal, and External CSS
CSS can be written in three ways
Inline CSS: Applied directly within the HTML element.
<html>3
<body>
<p style="color: blue;">This is blue text.</p>
</body>
</html>
Internal CSS: Defined within the <style> tag in the <head> section.

<html>
<head>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
External CSS: Linked through an external stylesheet .
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
</html>
Media Queries
Media queries allow you to create responsive designs .
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
This changes the background color for screens narrower than 600 pixels.
Animations
CSS can be used to create animations for elements.
@keyframes move {
from {
left: 0px;
}
to {
left: 100px;
}
}
div {
position: relative;
animation: move 2s infinite;
}
In case of animation syntax the time can also be divided into time frames
in form of percentage’s.
CSS Variables
CSS variables helps to crate reusable values for any property.
:root {
--main-color: #3498db;
}
h1 {
color: var(--main-color);
}
Comments in CSS
Comments are used to explain code and are ignored by the browser.
/* Write your comment comment */
p{
font-size: 16px;
}
Comments are always written between /* these symbols */.
SASS with $ and & for Nesting
SASS allows the use of variables, prefixed with $, to store reusable values
such as colors, fonts, or sizes. This makes it easy to maintain and update
styles consistently across a project. Key Feature: Using Variables ,Here’s
an example demonstrating how to use variables in SASS Indented Syntax.
SASSCSS
$primary-color: #3498db;
$secondary-color: #2ecc71;
$padding: 15px;

button {
background-color: $primary-color;
color: white;
padding: $padding;
border: none;
border-radius: 5px;
cursor: pointer;

&:hover {
background-color: $secondary-color;
}
}
Variables(@)
 $primary-color: Stores the main color for the button.
 $secondary-color: Defines the hover state color.
 $padding: Sets consistent spacing around the button.
 Variables improve maintainability—changing $primary-color updates
all instances of it.
 &:hover(& operator): The & operator appends the :hover pseudo-
class to the parent selector (button), ensuring the styles are tied to the
specific button element.
 This avoids repetition by preventing the need to retype the
parent selector (button: hover).
Advantages of Combining $ and & operator
 Using $ variables ensures consistent styling across the project.
 The & operator streamlines nested rules, keeping the code DRY
(Don’t Repeat Yourself) and organized.
LESS @ and & for Nesting
LESS is another popular CSS preprocessor that allows for the use of
variables (prefixed with @) and the & operator for nesting and
referencing parent selectors. This syntax makes it easy to manage styles
dynamically and keep your code clean and maintainable.
LESSCSS
@primary-color: #3498db;
@secondary-color: #2ecc71;
@padding: 15px;

button {
background-color: @primary-color;
color: white;
padding: @padding;
border: none;
border-radius: 5px;
cursor: pointer;

&:hover {
background-color: @secondary-color;
}
}
Variables (@)
 @primary-color: Stores the main color for the button.
 @secondary-color: Defines the hover color for the button.
 @padding: Specifies the padding value for the button.
 &:hover: The & operator references the parent selector (button) and
appends the :hover pseudo-class. This ensures that the hover styles are
scoped to the button element, without the need to repeat the full
selector (button :hover).
 This makes the code more concise and keeps it DRY (Don’t Repeat
Yourself).
Advantages of Combining @ and & operator
 Variables (@) improve code consistency and reduce errors by
centralizing values like colors and spacing.
 The & operator helps you handle pseudo-classes and other states
(like :hover) within the context of the parent selector, keeping your
code organized and easy to manage.
 Using LESS with these features allows for better flexibility and
readability in your CSS, making your stylesheets cleaner and easier to
maintain.

You might also like