HTML Tables

HTML Table Example

CompanyContactCountry
Alfreds FutterkisteMaria AndersGermany
Centro comercial MoctezumaFrancisco ChangMexico
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Laughing Bacchus WinecellarsYoshi TannamuriCanada
Magazzini Alimentari RiunitiGiovanni RovelliItaly

Defining an HTML Table

An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

Example

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

Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.



HTML Table – Adding a Border

If you do not specify a border for the table, it will be displayed without borders.

A border is set using the CSS border property:

Example

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

Remember to define borders for both the table and the table cells.


HTML Table – Collapsed Borders

If you want the borders to collapse into one border, add the CSS border-collapse property:

Example

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


HTML Table – Adding Cell Padding

Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without padding.

To set the padding, use the CSS padding property:

Example

th, td {
  padding: 15px;
}


HTML Table – Left-align Headings

By default, table headings are bold and centered.

To left-align the table headings, use the CSS text-align property:

Example

th {
  text-align: left;
}


HTML Table – Adding Border Spacing

Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:

Example

table {
  border-spacing: 5px;
}

Note: If the table has collapsed borders, border-spacing has no effect.


HTML Table – Cells that Span Many Columns

To make a cell span more than one column, use the colspan attribute:

Example

<table style=”width:100%”>
  <tr>
    <th>Name</th>
    <th colspan=”2″>Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>


HTML Table – Cells that Span Many Rows

To make a cell span more than one row, use the rowspan attribute:

Example

<table style=”width:100%”>
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan=”2″>Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>


HTML Table – Adding a Caption

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 must be inserted immediately after the <table> tag.


A Special Style for One Table

To define a special style for a special table, add an id attribute to the table:

Example

<table id=”t01″>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Now you can define a special style for this table:

table#t01 {
  width: 100%;
  background-color: #f1f1c1;
}

And add more styles:

table#t01 tr:nth-child(even) {
  background-color: #eee;
}
table#t01 tr:nth-child(odd) {
  background-color: #fff;
}
table#t01 th {
  color: white;
  background-color: black;
}


Chapter Summary

  • Use the HTML <table> element to define a table
  • Use the HTML <tr> element to define a table row
  • Use the HTML <td> element to define a table data
  • Use the HTML <th> element to define a table heading
  • Use the HTML <caption> element to define a table caption
  • Use the CSS border property to define a border
  • Use the CSS border-collapse property to collapse cell borders
  • Use the CSS padding property to add padding to cells
  • Use the CSS text-align property to align cell text
  • Use the CSS border-spacing property to set the spacing between cells
  • Use the colspan attribute to make a cell span many columns
  • Use the rowspan attribute to make a cell span many rows
  • Use the id attribute to uniquely define one table

HTML Images

Images can improve the design and the appearance of a web page.


Example

<img src=”pic_trulli.jpg” alt=”Italian Trulli”>

Example

<img src=”img_girl.jpg” alt=”Girl in a jacket”>

Example

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


HTML Images Syntax

In HTML, images are defined with the <img> tag.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The src attribute specifies the URL (web address) of the image:<img src=”url“>


The alt Attribute

The 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”>

Note: The alt attribute is required. A web page will not validate correctly without it.


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

The width and height attributes always defines the width and height of the image in pixels.

Note: Always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.


Width and Height, or Style?

The widthheight, and style attributes are 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 not specified, the browser expects to find the image in the same folder as the web page.

However, it is common to store images in a sub-folder. You must then 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

Some web sites store their images on image servers.

Actually, you can access images from any web address in the world:

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;border:0;”>
</a>

Note: border:0; is added to prevent IE9 (and earlier) from displaying a border around the image (when the image is a link).


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>

Tip: To learn more about CSS Float, read our CSS Float Tutorial.


HTML Screen Readers

A screen reader is a software program that reads the HTML code, converts the text, and allows the user to “listen” to the content. Screen readers are useful for people who are visually impaired or learning disabled.


Chapter Summary

  • Use the HTML <img> element to define an image
  • Use the HTML src attribute to define the URL of the image
  • Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
  • Use the HTML width and height attributes to define the size of the image
  • Use the CSS width and height properties to define the size of the image (alternatively)
  • Use the CSS float property to let the image float
  • Use the HTML <map> element to define an image-map
  • Use the HTML <area> element to define the clickable areas in the image-map
  • Use the HTML <img>‘s element usemap attribute to point to an image-map
  • Use the HTML <picture> element to show different images for different devices

Note: Loading images takes time. Large images can slow down your page. Use images carefully.

HTML Links

Links are found in nearly all web pages. Links allow users to click their way from page to page.


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. It can be an image or any other HTML element.


HTML Links – Syntax

Hyperlinks are defined with the HTML <a> tag:<a href=”url“>link text</a>

Example

<a href=”https://www.w3schools.com/html/”>Visit our HTML tutorial</a>

The href attribute specifies the destination address (https://www.w3schools.com/html/) of the link.

The link text is the visible part (Visit our HTML tutorial).

Clicking on the link text will send you to the specified address.

Note: Without a forward slash at the end of subfolder addresses, you might generate two requests to the server. Many servers will automatically add a forward slash to the end of the address, and then create a new request.


Local Links

The example above used an absolute URL (a full web address).

A local link (link to the same web site) is specified with a relative URL (without https://www….).

Example

<a href=”html_images.asp”>HTML Images</a>



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 default colors, by using CSS:

Example

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

Links are often styled as buttons, by using CSS:This is a link

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>

To learn more about CSS, go to our CSS Tutorial.


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:

  • _blank – Opens the linked document in a new window or tab
  • _self – Opens the linked document in the same window/tab as it was clicked (this is default)
  • _parent – Opens the linked document in the parent frame
  • _top – Opens the linked document in the full body of the window
  • framename – Opens the linked document in a named frame

This example will open the linked document in a new browser window/tab:

Example

<a href=”https://www.w3schools.com/” target=”_blank”>Visit W3Schools!</a>

Tip: If your webpage is locked in a frame, you can use target="_top" to break out of the frame:

Example

<a href=”https://www.w3schools.com/html/” target=”_top”>HTML5 tutorial!</a>


HTML Links – Image as Link

It is common to use images as links:

Example

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

Note: border:0; is added to prevent IE9 (and earlier) from displaying a border around the image (when the image is a link).


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/” title=”Go to W3Schools HTML section”>Visit our HTML Tutorial</a>


HTML Links – Create a Bookmark

HTML bookmarks are used to allow readers to jump to specific parts of a Web page.

Bookmarks can be useful if your webpage is very long.

To make a bookmark, you must first create the bookmark, and then add a link to it.

When the link is clicked, the page will scroll to the location with the bookmark.

Example

First, create a bookmark with the id attribute:<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>

Or, add a link to the bookmark (“Jump to Chapter 4”), from another page:

Example

<a href=”html_demo.html#C4″>Jump to Chapter 4</a>


External Paths

External pages 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 web page:

Example

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

This example links to a page located in the html folder on the current web site:

Example

<a href=”/html/default.asp”>HTML tutorial</a>

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

Example

<a href=”default.asp”>HTML tutorial</a>


Chapter Summary

  • Use the <a> element to define a link
  • Use the href attribute to define the link address
  • Use the target attribute to define where to open the linked document
  • Use the <img> element (inside <a>) to use an image as a link
  • Use the id attribute (id=”value“) to define bookmarks in a page
  • Use the href attribute (href=”#value“) to link to the bookmark

HTML Styles – CSS

Styling HTML with CSS

CSS stands for Cascading Style Sheets.

CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

CSS can be added to HTML elements in 3 ways:

  • Inline – by using the style attribute in HTML elements
  • Internal – by using a <style> element in the <head> section
  • External – by using an external CSS file

The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself.

Tip: You can learn much more about CSS in our CSS Tutorial.


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.

This example sets the text color of the <h1> element to blue:

Example

<h1 style=”color:blue;”>This is a Blue Heading</h1>


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:

Example

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


External CSS

An external style sheet is used to define the style for many HTML pages.

With an external style sheet, you can change the look of an entire web site, by changing one file!

To use an external style sheet, add a link to it in the <head> section of the 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>

An 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 how the “styles.css” looks:body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}


CSS Fonts

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

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


CSS Border

The CSS border property defines a border around an HTML element:

Example

p {
  border: 1px solid powderblue;
}


CSS Padding

The CSS padding property defines a padding (space) between the text and the border:

Example

p {
  border: 1px solid powderblue;
  padding: 30px;
}


CSS Margin

The CSS margin property defines a margin (space) outside the border:

Example

p {
  border: 1px solid powderblue;
  margin: 50px;
}


The id Attribute

To define a specific style for one special element, add an id attribute to the element:<p id=”p01″>I am different</p>

then define a style for the element with the specific id:

Example

#p01 {
  color: blue;
}

Note: The id of an element should be unique within a page, so the id selector is used to select one unique element!


The class Attribute

To define a style for special types of elements, add a class attribute to the element:<p class=”error”>I am different</p>

then define a style for the elements with the specific class:

Example

p.error {
  color: red;
}


External References

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:

Example

<link rel=”stylesheet” href=”https://www.w3schools.com/html/styles.css”>

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

Example

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

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

Example

<link rel=”stylesheet” href=”styles.css”>


Chapter Summary

  • Use the HTML style attribute for inline styling
  • Use the HTML <style> element to define internal CSS
  • Use the HTML <link> element to refer to an external CSS file
  • Use the HTML <head> element to store <style> and <link> elements
  • Use the CSS color property for text colors
  • Use the CSS font-family property for text fonts
  • Use the CSS font-size property for text sizes
  • Use the CSS border property for borders
  • Use the CSS padding property for space inside the border
  • Use the CSS margin property for space outside the border

HTML Colors

HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.


Color Names

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

Tomato

Orange

Dodger

Blue

Medium

Sea

Green

Gray

Slate

Blue

Violet

Light

Gray


Background Color

You can set the background color for HTML elements: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.

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

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.

Example

<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

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:

Same as color name “Tomato”:rgb(255, 99, 71)#ff6347hsl(9, 100%, 64%)

Same as color name “Tomato”, but 50% transparent: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>


RGB Value

In HTML, a color can be specified as an RGB value, using this formula:

rgb(red, greenblue)

Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

To display white, set all color parameters to 255, like this: rgb(255, 255, 255).

Experiment by mixing the RGB values below:

rgb(255, 107, 71)

RED255

GREEN107

BLUE71

Example

rgb(255, 0, 0)rgb(0, 0, 255)rgb(60, 179, 113)rgb(238, 130, 238)rgb(255, 165, 0)rgb(106, 90, 205)

Shades of gray are often defined using equal values for all the 3 light sources:

Example

rgb(0, 0, 0)rgb(60, 60, 60)rgb(120, 120, 120)rgb(180, 180, 180)rgb(240, 240, 240)rgb(255, 255, 255)


HEX Value

In HTML, a color can be specified using a hexadecimal value in the form:

#rrggbb

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).

For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).

Example

#ff0000#0000ff#3cb371#ee82ee#ffa500#6a5acd

Shades of gray are often defined using equal values for all the 3 light sources:

Example

#000000#3c3c3c#787878#b4b4b4#f0f0f0#ffffff


HSL Value

In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:

hsl(huesaturationlightness)

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.

Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.

Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white

Example

hsl(0, 100%, 50%)hsl(240, 100%, 50%)hsl(147, 50%, 47%)hsl(300, 76%, 72%)hsl(39, 100%, 50%)hsl(248, 53%, 58%)


Saturation

Saturation can be described as the intensity of a color.

100% is pure color, no shades of gray

50% is 50% gray, but you can still see the color.

0% is completely gray, you can no longer see the color.

Example

hsl(0, 100%, 50%)hsl(0, 80%, 50%)hsl(0, 60%, 50%)hsl(0, 40%, 50%)hsl(0, 20%, 50%)hsl(0, 0%, 50%)


Lightness

The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).

Example

hsl(0, 100%, 0%)hsl(0, 100%, 25%)hsl(0, 100%, 50%)hsl(0, 100%, 75%)hsl(0, 100%, 90%)hsl(0, 100%, 100%)


Shades of gray are often defined by setting the hue and saturation to 0, and adjust the lightness from 0% to 100% to get darker/lighter shades:

Example

hsl(0, 0%, 0%)hsl(0, 0%, 24%)hsl(0, 0%, 47%)hsl(0, 0%, 71%)hsl(0, 0%, 94%)hsl(0, 0%, 100%)


RGBA Value

RGBA color values are an extension of RGB color values with an alpha channel – which specifies the opacity for a color.

An RGBA color value is specified with:

rgba(red, greenblue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

Example

rgba(255, 99, 71, 0)rgba(255, 99, 71, 0.2)rgba(255, 99, 71, 0.4)rgba(255, 99, 71, 0.6)rgba(255, 99, 71, 0.8)rgba(255, 99, 71, 1)


HSLA Value

HSLA color values are an extension of HSL color values with an alpha channel – which specifies the opacity for a color.

An HSLA color value is specified with:

hsla(hue, saturationlightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):