Scribd
Upload
5 views

HTML Theory

The document discusses various HTML elements for styling text, including: - The <blockquote> element defines a quoted section from another source and browsers usually indent it. - The <q> element defines a short quotation and browsers normally insert quotation marks around it. - CSS can be used to control the layout, colors, fonts and other styles of HTML elements on web pages and can be defined internally, inline, or via external style sheets.

Uploaded by

brodityly
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

HTML Theory

The document discusses various HTML elements for styling text, including: - The <blockquote> element defines a quoted section from another source and browsers usually indent it. - The <q> element defines a short quotation and browsers normally insert quotation marks around it. - CSS can be used to control the layout, colors, fonts and other styles of HTML elements on web pages and can be defined internally, inline, or via external style sheets.

Uploaded by

brodityly
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 67

HTML THEORY

HTML Quotation and Citation Elements

<!DOCTYPE html>
<html>
<body>

<p>Here is a quote from WWF's website:</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 60 years, WWF has worked to help people and nature thrive.
</blockquote>

</body>
</html>

HTML <blockquote> for Quotations


The HTML <blockquote> element defines a section
that is quoted from another source.

Browsers usually indent <blockquote> elements.

<!DOCTYPE html>
<html>
<body>

<p>Here is a quote from WWF's website:</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 60 years, WWF has worked to help people and nature thrive.
</blockquote>

</body>
</html>

HTML <q> for Short Quotations


The HTML <q> tag defines a short quotation.
Browsers normally insert quotation marks around
the quotation.

<!DOCTYPE html>
<html>
<body>

<p>Browsers usually insert quotation marks around the q element.</p>

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

</body>
</html>

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.

<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
<!DOCTYPE html>
<html>
<body>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<p>Marking up abbreviations can give useful information to browsers, translation systems and
search-engines.</p>

</body>
</html>

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 <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.
<p><cite>The Scream</cite> by Edvard Munch. Painted in
1893.</p>

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 Comment Tag


You can add comments to your HTML source by
using the following syntax:
<!-- Write your comments here -->
Add Comments
With comments you can place notifications and
reminders in your HTML code:

Example

<!-- This is a comment -->

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

<!-- Remember to add more information here -->


Hide Content
Comments can be used to hide content.
This can be helpful if you hide content temporarily:

Example

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

<!-- <p>This is another paragraph </p> -->

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

You can also hide more than one line. Everything


between the <!-- and the --> will be hidden from
the display.

Example

Hide a section of HTML code:

<p>This is a paragraph.</p>
<!--
<p>Look at this cool image:</p>
<img border="0" src="pic_trulli.jpg"
alt="Trulli">
-->
<p>This is a paragraph too.</p>

Hide Inline Content


Comments can be used to hide parts in the middle
of the HTML code.

Example

Hide a part of a paragraph:

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

Color Names
In HTML, a color can be specified by using a color
name:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

HTML supports 140 standard color names.


Background Color
You can set the background color for HTML
elements:
Hello World

Example
<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

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


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

Border Color
You can set the color of borders:

Hello World

Hello World
Hello World

Example

<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:

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)


The following two <div> elements have their
background color set with RGBA and HSLA values,
which add an Alpha channel to the color (here we
have 50% transparency):

rgba(255, 99, 71, 0.5)


hsla(9, 100%, 64%, 0.5)

Example

<h1 style="background-color:rgb(255, 99,


71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%,
64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71,


0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%,
0.5);">...</h1>

HTML Styles - CSS


CSS stands for Cascading Style Sheets.
CSS saves a lot of work. It can control the layout
of multiple web pages all at once.

SS = Styles and Colors

M a n i p u l a t e T e x t
C o l o r s , B o x e s

What is CSS?
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!

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)!

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
The most common way to add CSS, is to keep the
styles in external CSS files. However, in this
tutorial we will use inline and internal styles,
because this is easier to demonstrate, and easier
for you to try it yourself.
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.
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>

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 "<!
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>powderblue" background color:
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:
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

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

</body>
</html>
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 "styles.css" file looks like:
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

Tip: With an external style sheet, you can change the


look of an entire web site, by changing one file!

CSS Colors, Fonts and Sizes


Here, we will demonstrate some commonly used
CSS properties. You will learn more about them
later.
The CSS color property defines the text color to
be used.
The CSS font-family property defines the font to
be used.
The CSS font-size property defines the text size
to be used.

Example

Use of CSS color, font-family and font-size properties:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>

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

</body>
</html>

Try it Yourself »

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;

Link to External CSS


External style sheets can be referenced with a full
URL or with a path relative to the current web
page.

Example

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

<link rel="stylesheet" href="https://


www.w3schools.com/html/styles.css">

Example
This example links to a style sheet located in the
html folder on the current web site:
<link rel="stylesheet" href="/html/styles.css">
HTML Links - Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another
document.
When you move the mouse over a link, the mouse
arrow will turn into a little hand.

Note: A link does not have to be text. A link can be an


image or any other HTML element!

HTML Links - Syntax


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

<a href="url">link text</a>


The most important attribute of the <a> element is
the href attribute, which indicates the link's
destination.
The link text is the part that will be visible to the
reader.
Clicking on the link text, will send the reader to the
specified URL address.

Example
This example shows how to create a link to
W3Schools.com:
<a href="https://www.w3schools.com/">Visit
W3Schools.com!</a>
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

Tip: Links can of course be styled with CSS, to get


another look!

HTML Links - The target Attribute


By default, the linked page will be displayed in the
current browser window. To change this, you must
specify another target for the link.
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
 _parent - Opens the document in the parent
frame
 _top - Opens the document in the full body of
the window
Example

Use target="_blank" to open the linked document in a


new browser window or tab:

<a href="https://www.w3schools.com/" targe


t="_blank">Visit W3Schools!</a>

Absolute URLs vs. Relative URLs


Both examples above are using an absolute
URL (a full web address) in the href attribute.
A local link (a link to a page within the same
website) is specified with a relative URL (without
the "https://www" part):

Example

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></
p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS
Tutorial</a></p>

HTML Links - Use an Image as a Link


To use an image as a link, just put the <img> tag
inside the <a> tag:
Example

<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;">

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):

Example

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

Button as a Link
To use an HTML button as a link, you have to add
some JavaScript code.
JavaScript allows you to specify what happens at
certain events, such as a click of a button:

Example

<button onclick="document.location='default.asp'"
>HTML Tutorial</button>
Tip: Learn more about JavaScript in our JavaScript
Tutorial.

Link Titles
The title attribute specifies extra information
about an element. The information is most often
shown as a tooltip text when the mouse moves
over the element.

Example

<a href="https://www.w3schools.com/html/" titl


e="Go to W3Schools HTML section">Visit our HTML
Tutorial</a>

More on Absolute URLs and Relative URLs

Example

Use a full URL to link to a web page:

<a href="https://www.w3schools.com/html/
default.asp">HTML tutorial</a>

Example
Link to a page located in the html folder on the
current web site:
<a href="/html/default.asp">HTML tutorial</a>
Example
Link to a page located in the same folder as the
current page:
<a href="default.asp">HTML tutorial</a>

HTML Links - Different Colors

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

You can change the link state colors, by using


CSS:

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:
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}

a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}

a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}

a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>

Link Buttons
A link can also be styled as a button, by using
CSS:
Example
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}
</style>

Create a Bookmark in HTML


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.
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:

Example
<a href="#C4You can also add a link to a bookmark
on another page:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
">Jump to Chapter 4</a>

Chapter Summary

 Use the id attribute (id="value") to define


bookmarks in a page
 Use the href attribute (href="#value") to link
to the bookmark

HTML Images
Example
<img src="pic_trulli.jpg" alt="Italian Trulli">
HTML Images Syntax
The HTML <img> tag is used to embed an image in
a web page.
Images are not technically inserted into a web
page; images are linked to web pages.
The <img> tag creates a holding space for the
referenced image.
The <img> tag is empty, it contains attributes only,
and does not have a closing tag.
The <img> tag has two required attributes:

 src - Specifies the path to the image


 alt - Specifies an alternate text for the image

Syntax
<img src="url" alt="alternatetext">
The src Attribute
The required src attribute specifies the path (URL)
to the image.
Note: When a web page loads, it is the browser, at
that moment, that gets the image from a web
server and inserts it into the page. Therefore,
make sure that the image actually stays in the
same spot in relation to the web page, otherwise
your visitors will get a broken link icon. The broken
link icon and the alt text are shown if the browser
cannot find the image.

Example

<img src="img_chania.jpg" alt="Flowers in


Chania">

The alt Attribute


The required alt attribute provides an alternate
text for an image, if the user for some reason
cannot view it (because of slow connection, an
error in the src attribute, or if the user uses a
screen reader).
The value of the alt attribute should describe the
image:

Example
<img src="img_chania.jpg" alt="Flowers in
Chania">

If a browser cannot find an image, it will display


the value of the alt attribute:

Example

<img src="wrongname.gif" alt="Flowers in Chania">

Image Size - Width and Height


You can use the style attribute to specify the
width and height of an image.

Example

<img src="img_girl.jpg" alt="Girl in a


jacket" style="width:500px;height:600px;">

Alternatively, you can use


the width and height attributes:

Example

<img src="img_girl.jpg" alt="Girl in a


jacket" width="500" height="600">

Width and Height, or Style?


The width, height, and style attributes are all
valid in HTML.
However, we suggest using the style attribute. It
prevents styles sheets from changing the size of
images:

Example

<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5


Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5


Icon" style="width:128px;height:128px;">

</body>
</html>

Images in Another Folder


If you have your images in a sub-folder, you must
include the folder name in the src attribute:
Example

<img src="/images/html5.gif" alt="HTML5


Icon" style="width:128px;height:128px;">

Images on Another Server/Website


Some web sites point to an image on another
server.
To point to an image on another server, you must
specify an absolute (full) URL in the src attribute:

Example

<img src="https://www.w3schools.com/images/
w3schools_green.jpg" alt="W3Schools.com">

Animated Images
HTML allows animated GIFs:

Example

<img src="programming.gif" alt="Computer


Man" style="width:48px;height:48px;">

Image as a Link
To use an image as a link, put the <img> tag inside
the <a> tag:
Example

<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;">
</a>

Image Floating
Use the CSS float property to let the image float
to the right or to the left of a text:

Example

<p><img src="smiley.gif" alt="Smiley


face" style="float:right;width:42px;height:42px;"
>
The image will float to the right of the
text.</p>

<p><img src="smiley.gif" alt="Smiley


face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>

Image Maps
The HTML <map> tag defines an image map. An
image map is an image with clickable areas. The
areas are defined with one or more <area> tags.
Try to click on the computer, phone, or the cup of
coffee in the image below:
Example

Here is the HTML source code for the image map


above:

<img src="workplace.jpg" alt="Workplace" usemap="


#workmap">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="
Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt
="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="C
offee" href="coffee.htm">
</map>
How Does it Work?
The idea behind an image map is that you should
be able to perform different actions depending on
where in the image you click.
To create an image map you need an image, and
some HTML code that describes the clickable
areas.

The Image
The image is inserted using the <img> tag. The only
difference from other images is that you must add
a usemap attribute:
<img src="workplace.jpg" alt="Workplace" usemap="
#workmap">
The usemap value starts with a hash tag # followed
by the name of the image map, and is used to
create a relationship between the image and the
image map.

Tip: You can use any image as an image map!

Create Image Map


Then, add a <map> element.
The <map> element is used to create an image
map, and is linked to the image by using the
required name attribute:
<map name="workmap">
The name attribute must have the same value as
the <img>'s usemap attribute .

The Areas
Then, add the clickable areas.
A clickable area is defined using
an <area> element.
Shape
You must define the shape of the clickable area,
and you can choose one of these values:

 rect - defines a rectangular region


 circle - defines a circular region
 poly - defines a polygonal region
 default - defines the entire region

You must also define some coordinates to be able


to place the clickable area onto the image.

Shape="rect"
The coordinates for shape="rect" come in pairs,
one for the x-axis and one for the y-axis.
So, the coordinates 34,44 is located 34 pixels from
the left margin and 44 pixels from the top:
The coordinates 270,350 is located 270 pixels from
the left margin and 350 pixels from the top:

Now we have enough data to create a clickable


rectangular area:
Example

<area shape="rect" coords="34, 44, 270,


350" href="computer.htm">

This is the area that becomes clickable and will


send the user to the page "computer.htm":

Shape="circle"
To add a circle area, first locate the coordinates of
the center of the circle:
337,300
Then specify the radius of the circle:
44 pixels

Now you have enough data to create a clickable


circular area:
Example

<area shape="circle" coords="337, 300,


44" href="coffee.htm">

Try it Yourself »

This is the area that becomes clickable and will


send the user to the page "coffee.htm":

Shape="poly"
The shape="poly" contains several coordinate
points, which creates a shape formed with straight
lines (a polygon).
This can be used to create any shape.
Like maybe a croissant shape!
How can we make the croissant in the image below
become a clickable link?

Image Map and JavaScript


A clickable area can also trigger a JavaScript
function.
Add a click event to the <area> element to
execute a JavaScript function:

Example

Here, we use the onclick attribute to execute a


JavaScript function when the area is clicked:

<map name="workmap">
<area shape="circle" coords="337,300,44" href="
coffee.htm" onclick="myFunction()">
</map>

<script>
function myFunction() {
alert("You clicked the coffee cup!");
}
</script>

Background Image on a HTML element


To add a background image on an HTML element,
use the HTML style attribute and the
CSS background-image property:

Example

Add a background image on a HTML element:

<p style="background-image:
url('img_girl.jpg');">

You can also specify the background image in


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

Example

Specify the background image in


the <style> element:

<style>
p {
background-image: url('img_girl.jpg');
}
</style>

Try it Yourself »

Background Image on a Page


If you want the entire page to have a background
image, you must specify the background image on
the <body> element:
Example

Add a background image for the entire page:

<style>
body {
background-image: url('img_girl.jpg');
}
</style>

Try it Yourself »

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:

Example

<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>

Try it Yourself »

To avoid the background image from repeating


itself, set the background-repeat property to no-
repeat.

Example
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>

Try it Yourself »

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):

Example

<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>

Try it Yourself »
Background Stretch
If you want the background image to stretch to fit
the entire element, you can set the background-
size property to 100% 100%:
Try resizing the browser window, and you will see
that the image will stretch, but always cover the
entire element.

Example

<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>

HTML Page Title

Every web page should have a page title to


describe the meaning of the page.

The <title> element adds a title to your page:

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>

The content of the document......

</body>
</html>

The title is shown in the browser's title bar:

The title should describe the content and the


meaning of the page.
The page title is very important for search engine
optimization (SEO). The text is used by search
engine algorithms to decide the order when listing
pages in search results.
The <title> element:

 defines a title in the browser toolbar


 provides a title for the page when it is added
to favorites
 displays a title for the page in search engine-
results

So, try to make the title as accurate and


meaningful as possible!

HTML Title Tag


Tag Description
<title> Defines the title of the document

Define an HTML Table


A table in HTML consists of table cells inside rows
and columns.

Example

A simple HTML table:

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

Try it Yourself »

Table Cells
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.

Example

<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Note: A table cell can contain all sorts of HTML
elements: text, images, lists, links, other tables,
etc.

HTML Table Borders

How To Add a Border


To add a border, use the CSS border property
on table, th, and td elements:

Example

table, th, td {
border: 1px solid black;
}

Try it Yourself »

Collapsed Table Borders


To avoid having double borders like in the example
above, set the CSS border-collapse property
to collapse.
This will make the borders collapse into a single
border:
Example

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

Try it Yourself »

ADVERTISEMENT

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:

Example

table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}

Try it Yourself »
Round Table Borders
With the border-radius property, the borders get
rounded corners:

Example

table, th, td {
border: 1px solid black;
border-radius: 10px;
}

Try it Yourself »

Skip the border around the table by leaving


out table from the css selector:

Example

th, td {
border: 1px solid black;
border-radius: 10px;
}

Try it Yourself »

Dotted Table Borders


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

The following values are allowed:

 dotted
 dashed
 solid
 double
 groove
 ridge
 inset
 outset
 none
 hidden

Example

th, td {
border-style: dotted;
}

Try it Yourself »

Border Color
With the border-color property, you can set the
color of the border.
Example

th, td {
border-color: #96D4D4;
}

HTML Table Sizes


HTML Table Width
To set the width of a table, add the style attribute
to the <table> element:

Example

Set the width of the table to 100%:

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Try it Yourself »

Note: Using a percentage as the size unit for a width


means how wide will this element be compared to its
parent element, which in this case is
the <body> element.

HTML Table Column Width

To set the size of a specific column, add


the style attribute on a <th> or <td> element:

Example

Set the width of the first column to 70%:

<table style="width:100%">
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

HTML Table Row Height

To set the height of a specific row, add


the style attribute on a table row element:

Example

Set the height of the second row to 200 pixels:

<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>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

HTML Table Headers


HTML tables can have headers for each column or
row, or for many columns/rows.

EMIL TOBIAS LINUS

8:00
9:00
10:00
11:00
12:00
13:00
MO TU WE TH FR
N E D U I
8:00
9:00
10:0
0
11:0
0
12:0
0
DECEMBER
HTML Table Headers
Table headers are defined with th elements.
Each th element represents a table cell.

Example

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Try it Yourself »

Vertical Table Headers


To use the first column as table headers, define
the first cell in each row as a <th> element:

Example
<table>
<tr>
<th>Firstname</th>
<td>Jill</td>
<td>Eve</td>
</tr>
<tr>
<th>Lastname</th>
<td>Smith</td>
<td>Jackson</td>
</tr>
<tr>
<th>Age</th>
<td>94</td>
<td>50</td>
</tr>
</table>
Align Table Headers
By default, table headers are bold and centered:

Firstname Lastname Age


Jill Smith 50
Eve Jackson 94

To left-align the table headers, use the CSS text-


align property:

Example

th {
text-align: left;
}

Header for Multiple Columns


You can have a header that spans over two or
more columns.

Name Age
Jill Smith 50
Eve Jackson 94

To do this, use the colspan attribute on


the <th> element:

Example

<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

You will learn more about colspan and rowspan in


the Table colspan & rowspan chapter.

Table Caption
You can add a caption that serves as a heading for
the entire table.
Monthly savings
Month Savings
January $100
February $50

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

Example

<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>

Note: The <caption> tag should be inserted


immediately after the <table> tag.

HTML Table Padding & Spacing


HTML tables can adjust the padding inside the
cells, and also the space between the cells.

With Padding
hello hello hello
hello hello hello
hello hello hello
With Spacing
hello hello hello
hello hello hello
hello hello hello

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:

Example

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:

Example

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

HTML Table - Cell Spacing


Cell spacing is the space between each cell.
By default the space is set to 2 pixels.
To change the space between table cells, use the
CSS border-spacing property on
the table element:

Example

table {
border-spacing: 30px;
}

HTML Table Colspan & Rowspan


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

NAME

APRIL

2022

FIESTA

HTML Table - Colspan


To make a cell span over multiple columns, use
the colspan attribute:

Example

<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>

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:

Example

<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>

Note: The value of the rowspan attribute represents the


number of rows to span.
HTML Table Styling

HTML Table - Zebra Stripes


If you add a background color on every other table
row, you will get a nice zebra stripes effect.
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
17 18 19 20
To style every other table row element, use
the :nth-child(even) selector like this:

Example

tr:nth-child(even) {
background-color: #D6EEEE;
}

Note: If you use (odd) instead of (even), the styling


will occur on row 1,3,5 etc. instead of 2,4,6 etc.

HTML Table - Vertical Zebra Stripes


To make vertical zebra stripes, style every
other column, instead of every other row.
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
17 18 19 20
Set the :nth-child(even) for table data elements
like this:

Example

td:nth-child(even), th: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.

ADVERTISEMENT

Combine Vertical and Horizontal Zebra Stripes


You can combine the styling from the two
examples above and you will have stripes on every
other row and every other column.
If you use a transparent color you will get an
overlapping effect.

Use an rgba() color to specify the transparency of


the color:

Example
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}

th:nth-child(even),td:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}

Horizontal Dividers
First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

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:

Example

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

Hoverable Table
Use the :hover selector on tr to highlight table
rows on mouse over:
First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

Example

tr:hover {background-color: #D6EEEE;}

Ordered HTML List


An ordered list starts with the <ol> tag. Each list
item starts with the <li> tag.
The list items will be marked with numbers by
default:

Example

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Control List Counting


By default, an ordered list will start counting from
1. If you want to start counting from a specified
number, you can use the start attribute:

Example
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Nested HTML Lists


Lists can be nested (list inside list):

Example

<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>

HTML Description Lists


A description list is a list of terms, with a
description of each term.
The <dl> tag defines the description list,
the <dt> tag defines the term (name), and
the <dd> tag describes each term:
Example

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

You might also like