Scribd
Upload
41 views

HTML2

Uploaded by

Jan Marc Ceralde
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
41 views

HTML2

Uploaded by

Jan Marc Ceralde
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 154

WEB SYSTEM

&
TECHNOLOGI
ES
REVIEW OF THE LESSON
WHAT IS
WWW?
WHO INVENTED THE
WEB?
THE THREE
GENERATIONS OF WEB?
DIFFERENCE BETWEEN
WEBSITE AND WEB
PAGE?
WHAT ARE THE TYPES OF
WEBSITE?
TOPIC:
• HTML Introduction
• HTML Elements and Attributes
• HTML Headings
• HTML Paragraphs
OBJECTIVE
S:
• Discuss about the HTML
• Discuss about the HTML basic structure like
elements, attributes, headings and paragraph.
• Apply the HTML basic structure
INTRODUCTION TO
HTML
WHAT IS
•HTML?
HTML stands for HyperText Markup Language.
• It is a standard markup language for web page creation.
• It is platform independent. This means that the text and the
content are encoded in a way that they can be displayed on a
wide range of computers.
• HTML files usually have the file extension of htm, html, or
shtml.
MARKUP LANGUAGE
VS.
PROGRAMMING
LANGUAGE
• Markup languages are used to structure and format text and
other content on a webpage.

• Programming languages are used to create software


applications and systems.
HOW TO CREATE
HTML DOCUMENT OR
WEB PAGE?
TEXT EDITOR
• is a software for editing and creating HTML code that is used
for websites or other web documents.
SIMPLE HTML DOCUMENT:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
• The <!DOCTYPE html> declaration defines the document declaration.
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML page
• The <title> element specifies a title for the HTML page
• The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs images, hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading.
• The <p> element defines a paragraph.
HTML
ELEMENT
• An HTML element is defined by a start tag, some content, and an end
tag:

<tag> Content goes here... </tag>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>


<p>My first paragraph.</p>
SIMPLE HTML DOCUMENT:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
HTML
ELEMENT
Note: HTML is not case-sensitive.

Some HTML elements have no content (like the <br> element).

These elements are called empty elements.

Empty elements do not have an end tag!


<br> means Line Break
HTML
ELEMENT
The <body> element defines the document's body.
It has a start tag <body> and an end tag </body>.

Ex.
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
HTML
ELEMENT
The <h1> element defines a heading.
It has a start tag <h1> and an end tag </h1>.

Ex.

<h1>My First Heading</h1>


HTML
ELEMENT
The <p> element defines a paragraph.

Ex.

<p>My first paragraph.</p>


HTML
ATTRIBUTES
• HTML attributes provide additional information about HTML
elements.
• Attributes are always specified in the start tag
1.THE HREF
ATTRIBUTE
1.The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL
of the page the link goes to.

ex:
<a href="https://www.canva.com/">Welcome to my Web</a>
2. THE SRC
ATTRIBUTE
The <img> tag is used to embed an image in an HTML page.
The src attribute specifies the path to the image to be displayed:

Ex.
<img src="fish.jpg">
3. THE WIDTH AND HEIGHT
ATTRIBUTES
The <img> tag should also contain the width and height attributes,
which specify the width and height of the image (in pixels):

Ex.
<img src="fish.jpg" width="800" height="500">
4. THE ALT ATTRIBUTE
The required alt attribute for the <img> tag specifies an alternate text
for an image, if the image for some reason cannot be displayed. This
can be due to a slow connection, or an error in the src attribute, or if
the user uses a screen reader.

Ex.
<img src="fish.jpg" alt="Finding Nemo">
5. The style Attribute
The style attribute is used to add styles to an element, such as color,
font, size, and more.

Ex.
<p style="color:red;">This is a red paragraph.</p>
6. The title Attribute

The title attribute defines some extra information about an element.

Ex.
<p title="I'm a tooltip">This is a paragraph.</p>
HTML HEADINGS
• HTML headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the least
important heading.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
HTML paragraphs
• With HTML, you cannot change the display by adding extra spaces or
extra lines in your HTML code.

• The browser will automatically remove any extra spaces and lines when
the page is displayed.
HTML paragraphs
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
HTML Horizontal Rules
• The <hr> tag defines a thematic break in an HTML
page, and is most often displayed as a horizontal rule.

• The <hr> element is used to separate content (or define


a change) in an HTML page:
HTML Horizontal Rules
Example:

<h1>This is heading 1</h1>


<p>This is some text.</p>
<hr>

<h2>This is heading 2</h2>


<p>This is some other text.</p>
<hr>

Note: The <hr> tag is an empty tag, which means that it has no end tag.
HTML Line Breaks
• The HTML <br> element defines a line break.
• Use <br> if you want a line break (a new line) without starting a
new paragraph:

Ex.

<p>This is<br>a paragraph<br>with line breaks.</p>


The Poem Problem
<p>
My Bonnie lies over the ocean. My Bonnie lies over
the sea. My Bonnie lies over the ocean. Oh, bring
back my Bonnie to me.
</p>
HTML <pre> Element

• The HTML <pre> element defines preformatted text.


• The text inside a <pre> element is displayed in a fixed-width font (usually
Courier), and it preserves both spaces and line breaks:
HTML <pre> Element
<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.


</pre>
Exercises:

1. Add a heading with the text "Lorem Ipsum" by using the


correct HTML tag.

<p>Lorem Ipsum is simply dummy text of the printing and


typesetting industry.</p>
exercises:
2. Add a paragraph with the text "Lorem Ipsum" by using the correct HTML tag.

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>

</body>
</html>
exercises:

3. Set the size of the image to 140 pixels wide and 45 pixels tall.

<img src="W3docs.jpg">
exercises:
4. Turn the element below into a link to "https://www.w3docs.com/" by
using the correct attribute.

<a "https://www.canva.com/">Open the homepage of canva.</a>


exercises:
5. Add the correct end tags.

<h2>A heading

<p>A paragraph
exercises:

6. Set the color of the paragraph to "green" by using the correct HTML
attribute.

<p >This is some paragraph styled with an HTML attribute</p>

.
exercises:
7. Add a "tooltip" to the link, which must say "Go to homepage".

<a href="https://www.w3docs.com/" ="Go to homepage">W3Docs


Homepage</a>
exercises:

8. Add an alternate text for the image.

<img src="images/w3docs-logo.png" ="Logo for W3docs"/>


LET’S ANSWER!
THANK YOU!
HTML Styles
• The HTML style attribute is used to add styles to an
element, such as color, font, size, and more.

I am Red

I am Blue

I am Big
HTML Styles
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
HTML Style Attribute
• Setting the style of an HTML element, can be done with
the style attribute.

• The HTML style attribute has the following syntax:

<tagname style="property:value;">

Note: The property is a CSS property.


The value is a CSS value.
Background Color
• <body style="background
color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Background Color
• Set background color for two different
elements:

<h1 style="background-
color:powderblue;">This is a heading</h1>

<p style="background-color:tomato;">This is
a paragraph.</p>
Text Color
• The CSS color property defines the text
color for an HTML element:

<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>


Fonts
• The CSS font-family property defines the
font to be used for an HTML element:

<h1 style="font-family:verdana;">This is a
heading</h1>
<p style="font-family:courier;">This is a
paragraph.</p>
Text Size
• The font-size property defines the text size
for an HTML element:

<h1 style="font-size:300%;">This is a heading</h1>

<p style="font-size:160%;">This is a paragraph.</p>


Text Alignment
• The CSS text-align property defines the
horizontal text alignment for an HTML
element:

<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:center;">Centered paragraph.</p>


HTML Formatting
• HTML contains several elements for
defining text with a special meaning.

This text is bold

This text is italic

This is subscript and superscript


HTML Formatting
<p><b>This text is bold</b></p>

<p><i>This text is italic</i></p>

<p>This is<sub> subscript</sub> and


<sup>superscript</sup></p>
HTML Formatting Elements
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
HTML Formatting Elements
HTML <b> and <strong> Elements

The HTML <b> element defines bold text,


without any extra importance.

<b>This text is bold</b>


HTML Formatting Elements
The HTML <strong> element defines text
with strong importance. The content inside
is typically displayed in bold.

<strong>This text is important!</strong>


HTML Formatting Elements
HTML <i> and <em> Elements

The HTML <i> element defines a part of


text in an alternate voice or mood. The
content inside is typically displayed in
italic.

Tip: The <i> tag is often used to indicate a


technical term, a phrase from another
language, a thought, a ship name, etc.
HTML Formatting Elements
HTML <i> and <em> Elements

The HTML <i> element defines a part of


text in an alternate voice or mood. The
content inside is typically displayed in
italic.

<i>This text is italic</i>


HTML Formatting Elements
HTML <i> and <em> Elements

The HTML <i> element defines a part of


text in an alternate voice or mood. The
content inside is typically displayed in
italic.

<i>This text is italic</i>


HTML Formatting Elements
The HTML <em> element defines
emphasized text. The content inside is
typically displayed in italic.

<em>This text is emphasized</em>


HTML Formatting Elements
HTML <mark> Element

The HTML <mark> element defines text


that should be marked or highlighted:

<p>Do not forget to


buy <mark>milk</mark> today.</p>
HTML Formatting Elements
HTML <del> Element

The HTML <del> element defines text


that has been deleted from a document.
Browsers will usually strike a line
through deleted text:

<p>My favorite color


is <del>blue</del> red.</p>
HTML Formatting Elements
HTML <ins> Element

The HTML <ins> element defines a text


that has been inserted into a document.
Browsers will usually underline inserted
text:

<p>My favorite color


is <del>blue</del> <ins>red</ins>.</p>
HTML Formatting Elements
HTML <sub> Element

The HTML <sub> element defines


subscript text. Subscript text appears
half a character below the normal line,
and is sometimes rendered in a smaller
font. Subscript text can be used for
chemical formulas, like H2O:

<p>This
is <sub>subscripted</sub> text.</p>
HTML Quotation and
Citation Elements
The HTML <blockquote> element defines a
section that is quoted from another source.

Browsers usually indent <blockquote>


elements.
HTML Quotation and
Citation Elements
<p>Here is a quote from WWF's website:</p>

<blockquote>
For 60 years, WWF has worked to help people and nature
thrive. As the world's leading conservation organization,
WWF works in nearly 100 countries. At every level, we
collaborate with people around the world to develop and
deliver innovative solutions that protect communities,
wildlife, and the places in which they live.
</blockquote>
HTML Quotation and
Citation Elements
HTML <q> for Short Quotations

The HTML <q> tag defines a short quotation.

Browsers normally insert quotation marks


around the quotation.

<p>WWF's goal is to: <q>Build a future where


people live in harmony with nature.</q></p>
HTML Quotation and
Citation Elements
HTML <abbr> for Abbreviations

The HTML <abbr> tag defines an abbreviation or an acronym, like


"HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".
Marking abbreviations can give useful information to browsers,
translation systems and search-engines.
Tip: Use the global title attribute to show the description for the
abbreviation/acronym when you mouse over the element.
<p>The <abbr title="World Health
Organization">WHO</abbr> was founded in 1948.</p>
HTML Quotation and
Citation Elements
HTML <address> for Contact Information

The HTML <address> tag defines the contact information for


the author/owner of a document or an article.

The contact information can be an email address, URL,


physical address, phone number, social media handle, etc.
The text in the <address> element usually renders in italic,
and browsers will always add a line break before and after
the <address> element.
HTML Quotation and
Citation Elements
<p>The HTML address element defines contact information
(author/owner) of a document or article.</p>

<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
HTML Quotation and
Citation Elements
HTML <cite> for Work Title

The HTML <cite> tag defines the title of a creative


work (e.g. a book, a poem, a song, a movie, a
painting, a sculpture, etc.).

Note: A person's name is not the title of a work.

The text in the <cite> element usually renders in


italic.
HTML Quotation and
Citation Elements

HTML <cite> for Work Title


<img src=“Fish.jpg" width="220" height="277"
alt="The Scream">
<p><cite>The Scream</cite> by Edvard Munch. Painted
in 1893.</p>
HTML Quotation and
Citation Elements
HTML <bdo> for Bi-Directional Override

BDO stands for Bi-Directional Override.

The HTML <bdo> tag is used to override the current text


direction:

<bdo dir="rtl">This text will be written from right to


left</bdo>
HTML Comments

HTML Comment Tag

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.
HTML Comments

Add Comments

With comments you can place notifications and reminders in


your HTML code:

<!—This is a comment -->

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

Hide Inline Content

Comments can be used to hide parts in the middle of the


HTML code.

<p>This <!-- great text --> is a paragraph.</p>


Color Names

In HTML, a color can be specified by using a color


name:
<h1 style="background-color:Tomato;">Tomato</h1>

<h1 style="background-color:Orange;">Orange</h1>

<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>

<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>

<h1 style="background-color:Gray;">Gray</h1>

<h1 style="background-color:SlateBlue;">SlateBlue</h1>

<h1 style="background-color:Violet;">Violet</h1>

<h1 style="background-color:LightGray;">LightGray</h1>
Color Names

HTML supports 140 standard color names.

https://www.w3schools.com/colors/colors_names.asp
Background Color

You can set the background color for HTML


elements:

<h1 style="background-color:DodgerBlue;">Hello World</h1>


<p style="background-color:Tomato;">Lorem ipsum...</p>
Text Color
You can set the color of text:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit,


sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation


ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
Text Color

<h1 style="color:Tomato;">Hello World</h1>

<p style="color:DodgerBlue;">Lorem ipsum...</p>

<p style="color:MediumSeaGreen;">Ut wisi enim...</p>


Border Colors

You can set the color of borders:

<h1 style="border:2px solid Tomato;">Hello World</h1>


<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Color Values

In HTML, colors can also be specified using RGB


values, HEX values, HSL values, RGBA values, and
HSLA values.

The following three <div> elements have their


background color set with RGB, HEX, and HSL
values:
Color Values
Color Values

RGB or Red/Green/Blue is another well-liked method


used to define color properties in CSS. RGB color
scheme is a three-channel format containing the
amount of Red, Green, and Blue as an integer between
0 and 255. Following is an example of RGB color:

rgb(128, 0, 128)
Color Values
HSL, which stands for Hue Saturation and Lightness, is
another way of declaring colors in CSS. HSL color value
for the Purple color can be specified as follow:

hsl(300, 100%, 25.1%)


Color Values
Hex color codes are one type of HTML color code that
you’ll often hear referred to as hexadecimal color or
hex. The reason to use hexadecimal numbers is it’s a
human-friendly representation of values in binary code.

Red = #FF0000
Green = #008000
Blue = #0000FF
White = #FFFFFF
Ivory = #FFFFF0
Black = #000000
HTML Styles - CSS
CSS stands for Cascading Style Sheets.

Cascading Style Sheets (CSS) is used to format the layout of


a webpage.

With CSS, you can control the color, font, the size of text, the
spacing between elements, how elements are positioned and
laid out, what background images or background colors are to
be used, different displays for different devices and screen
sizes, and much more!
HTML Styles - CSS

Tip: The word cascading means that a style applied to a


parent element will also apply to all children elements
within the parent. So, if you set the color of the body
text to "blue", all headings, paragraphs, and other text
elements within the body will also get the same color
(unless you specify something else)!
HTML Styles - CSS

Using CSS

CSS can be added to HTML documents in 3 ways:

Inline - by using the style attribute inside HTML elements


Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external
CSS file
HTML Styles - CSS

Using CSS

Inline CSS

An inline CSS is used to apply a unique style to a single HTML


element.

An inline CSS uses the style attribute of an HTML element.


HTML Styles - CSS
Using CSS

The following example sets the text color of the <h1>


element to blue, and the text color of the <p> element to
red:

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>


HTML Styles - CSS
Internal CSS

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page,


within a <style> element.

The following example sets the text color of ALL the <h1> elements (on
that page) to blue, and the text color of ALL the <p> elements to red.
In addition, the page will be displayed with a "powderblue" background
color:
<!DOCTYPE html>

<html>

<head>

<style>

body {background-color: powderblue;}

h1 {color: blue;}

p {color: red;}

</style>

</head>

<body>

<h1>This is a heading</h1>

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

</body>

</html>
HTML Styles - CSS
External CSS

An external style sheet is used to define the style for


many HTML pages.

To use an external style sheet, add a link to it in the


<head> section of each HTML page:
HTML Styles - CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>

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

</body>
</html>
Link to External CSS
External style sheets can be referenced with a full URL or with a path
relative to the current web page.

This example uses a full URL to link to a style sheet:

<link rel="stylesheet" href=“style.css">


Link to External CSS
This example links to a style sheet located in the html folder on the
current web site:

<link rel="stylesheet" href="/html/styles.css">

This example links to a style sheet located in the same folder as the
current page:

<link rel="stylesheet" href="style.css">


Link to External CSS
The external style sheet can be written in any text editor. The file must
not contain any HTML code, and must be saved with a .css extension.
Here is what the "style.css" file looks like:
body {

background-color: powderblue;

h1 {

color: blue;

p{

color: red;
CSS Border
The CSS border property defines a border around an HTML element.

Tip: You can define a border for nearly all HTML elements.
Example
Use of CSS border property:

p{
border: 2px solid powderblue;
}
CSS Padding
The CSS padding property defines a padding (space) between the text
and the border.
Example:
Use of CSS border and padding properties:

p{
border: 2px solid powderblue;
padding: 30px;
}
CSS Margin
The CSS margin property defines a margin (space) outside the border.
Example
Use of CSS border and margin properties:

p{
border: 2px solid powderblue;
margin: 50px;
}
HTML Links

HTML links are hyperlinks.

You can click on a link and jump to another document.


Note: A link does not have to be text. A link can be an image or
any other HTML element!
HTML Links
HTML Links – Syntax

The HTML <a> tag defines a hyperlink. It has the following


syntax:

<a href=“YouTube.com/">Visit YouTube!</a>


HTML Links
HTML Links – Syntax

The HTML <a> tag defines a hyperlink. It has the following


syntax:

<a href="https://www.youtube.com/”Visit W3Schools.com!</a>


HTML Links
HTML Links - The target Attribute

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

_self - Default. Opens the document in the same window/tab as it was


clicked
_blank - Opens the document in a new window or tab
HTML Links

Use target="_blank" to open the linked


document in a new browser window or tab:

<a href="Back Page.Html/" target="_blank">Link


to the Next Page!</a>
HTML Links
Link to an Email Address
Use mailto: inside the href attribute to create a link
that opens the user's email program (to let them send
a new email):

<a href="mailto:[email protected]">Send email</a>


Button As Links

To use an HTML button as a link, you have to add some


JavaScript code.

<button onclick="document.location=‘YouTube.com'">H
TML Tutorial</button>
HTML Link Colors

An HTML link is displayed in a different color depending


on whether it has been visited, is unvisited, or is
active.

HTML Link Colors

By default, a link will appear like this (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 Link Colors

Example:
Here, an unvisited link will be green with no underline.
A visited link will be pink with no underline.
An active link will be yellow and underlined.
In addition, when mousing over a link (a:hover) it will
become red and underlined:
Link Buttons

A link can also be styled as a button, by using CSS:


HTML Links - Create Bookmarks

HTML links can be used to create bookmarks, so that


readers can jump to specific parts of a web page.

Bookmarks can be useful if a web page is very


long.

To create a bookmark - first create the bookmark,


then add a link to it.

When the link is clicked, the page will scroll down


or up to the location with the bookmark.
HTML Links - Create Bookmarks

Example
First, use the id attribute to create a bookmark:

<h2 id="C4">Chapter 4</h2>

Then, add a link to the bookmark ("Jump to Chapter 4"),


from within the same page:

<a href="#C4">Jump to Chapter 4</a>


HTML Links - Create Bookmarks

You can also add a link to a bookmark on another page:

<a href="Back Page.html#C4">CLICK HERE</a>


HTML Background Images

HTML Background Images

To add a background image on an HTML element, use


the HTML style attribute and the CSS background-
image property:

Add a background image on a HTML element:


<p style="background-image: url(‘Fish.jpg');">
HTML Background Images

You can also specify the background image in the


<style> element, in the <head> section:

Specify the background image in the <style> element:

For Example:
Background Repeat

If the background image is smaller than the element,


the image will repeat itself, horizontally and vertically,
until it reaches the end of the element:

To avoid the background image from repeating itself,


set the background-repeat property to no-repeat.
Background Cover

If you want the background image to cover the entire


element, you can set the background-size property to
cover.
Also, to make sure the entire element is always
covered, set the background-attachment property to
fixed:
This way, the background image will cover the entire
element, with no stretching (the image will keep its
original proportions):
Background Stretch

If you want the background image to stretch to fit the


entire element, you can set the background-size
property to 100%:
HTML Tables
Table Cells

A table in HTML consists of table cells inside rows and


columns.

Each table cell is defined by a <td> and a </td> tag.

td stands for table data.

Everything between <td> and </td> are the content of


the table cell.
HTML Tables
Table Rows

Each table row starts with a <tr> and ends with a


</tr> tag.

tr stands for table row.


HTML Tables

Table Headers

Sometimes you want your cells to be table header cells. In


those cases use the <th> tag instead of the <td> tag:

th stands for table header.


HTML Table Borders

To add a border, use the CSS border


property on table, th, and td elements:

<style>
table, th, td {
border: 1px solid black;
}
</style>
HTML Table Borders

Collapsed Table Borders

To avoid having double borders like in the example above, set


the CSS border-collapse property to collapse.
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
HTML Table Borders
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: pink;
}
</style>
HTML Table Borders
Round Table Borders

With the border-radius property, the borders get


rounded corners:

<style>
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
</style>
HTML Table Borders

Skip the border around the table by leaving out table from the
css selector:

<style>
th, td {
border: 1px solid black;
border-radius: 10px;
}
</style>
HTML Table Borders

Dotted Table Borders

With the border-style property, you can set the appearance of


the border.

<style>
th, td {
border-style: dotted;
}
</style>
HTML Table Borders
HTML Table Borders

Border Color

With the border-color property, you can set the


color of the border.

th, td {
border-color: pink;
}
HTML Table Sizes

HTML tables can have different sizes for each


column, row or the entire table.

HTML Table Width

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
HTML Table Sizes

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>
HTML Table Row Height

To set the height of a specific row, add the style attribute on a


table row element:
<table style="width:100%">

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

<tr style="height:200px">

<td>Jill</td>

<td>Smith</td>
HTML TABLE HEADER

Table headers are defined with th elements. Each


th element represents a table cell.
Vertical Table Headers

To use the first column as table headers, define


the first cell in each row as a <th> element:

<table style="width:100%">
<tr>
<th>Firstname</th>
<td>Jill</td>
<td>Eve</td>
</tr>
Align Table Headers

By default, table headers are bold and centered:


To left-align the table headers, use the CSS text-align
property:
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th {
text-align: left;
}
Header for Multiple Columns

You can have a header that spans over two or more


columns.

To do this, use the colspan attribute on the <th> element:


Table Caption

You can add a caption that serves as a heading for the


entire table.

To add a caption to a table, use the <caption> tag:

<table style="width:100%">
<caption>Monthly savings</caption>
HTML Table Padding & Spacing

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:
th, td {
padding: 15px;
}
To add padding only above the content, use the
padding-top property.

And the others sides with the padding-bottom,


padding-left, and padding-right properties:

th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
HTML Table - Zebra Stripes

If you add a background color on every other table row,


you will get a nice zebra stripes effect.

To style every other table row element, use the :nth-


child(even) selector like this:

tr:nth-child(even) {
background-color: #D6EEEE;
}
Note: Put the :nth-child() selector on both th
and td elements if you want to have the styling
on both headers and regular table cells.
Horizontal Dividers

If you specify borders only at the bottom of each table


row, you will have a table with horizontal dividers.

Add the border-bottom property to all tr elements to get


horizontal dividers:

tr {
border-bottom: 1px solid #ddd;
}
Hoverable Table

Use the :hover selector on tr to highlight table rows on


mouse over:
HTML Table Colspan & Rowspan

HTML Table – Colspan

To make a cell span over multiple columns, use


the colspan attribute:

Note: The value of the colspan attribute


represents the number of columns to span.
HTML Table – Rowspan

To make a cell span over multiple rows, use the


rowspan attribute:

You might also like