W3.CSS Tables

Menu

Displaying a Table

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<table class="table">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Points</th>
</tr>
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
</tr>
</table>
Try It Yourself »

Displaying a Striped Table

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<table class="table striped">
Try It Yourself »

Displaying a Bordered Striped Table

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<table class="table bordered striped">
Try It Yourself »

Displaying a Table with a Border

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<table class="table bordered striped border">
Try It Yourself »

Flipping the Stripes

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

To flip the stripes, just add <thead> around the table header:

Example

<thead>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
Try It Yourself »

Displaying a Hoverable Table

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<table class="table bordered striped border hoverable">
Try It Yourself »

Displaying a Table with a Colored Heading

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<thead>
<tr class="red">
  <th>First Name</th>
  <th>Last Name</th>
  <th>Points</th>
</tr>
</thead>
Try It Yourself »

Displaying a Table as a Card

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<table class="table bordered striped card-4">
Try It Yourself »

Displaying a Responsive Table

A responsive table will display a horizontal scroll bar if the screen is too small to display the full content.

Try to resize the screen to see the effect.

First Name Last Name Points Points Points Points Points Points Points Points Points Points Points Points Points
Jill Smith 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000
Eve Jackson 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400
Adam Johnson 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700

Example

<div class="responsive">

<table class="table bordered striped">
... table content ...
</table>

</div>
Try It Yourself »

Displaying a Tiny Table

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<table class="table bordered striped tiny">
Try It Yourself »

Displaying a Small Table

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<table class="table bordered striped small">
Try It Yourself »

Displaying a Large Table

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<table class="table bordered striped large">
Try It Yourself »

Displaying an xLarge Table

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Example

<table class="table bordered striped xlarge">
Try It Yourself »

Displaying an xxLarge Table

Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Bo Nilson 35

Example

<table class="table bordered striped xxlarge">
Try It Yourself »

Displaying a Red xxLarge Table

Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Bo Nilson 35

Example

<table class="table bordered striped xxlarge red">
Try It Yourself »

Displaying an xxxLarge Table

Name Points
Smith 50
Jackson 94
Johnson 67
Nilson 35

Example

<table class="table bordered striped xxxlarge">
Try It Yourself »

Displaying a Jumbo Table

Name Points
Smith 50
Jackson 94
Johnson 67
Nilson 35

Example

<table class="table bordered striped jumbo">
Try It Yourself »

 







W3.CSS Lists

Menu

Displaying a List


Example

<ul class="ul">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

Displaying a List with a Border


Example

<ul class="ul border">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

Displaying a List as a Card


Example

<ul class="ul card-4">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

Displaying a Tiny List


Example

<ul class="ul tiny">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

Displaying a Small List


Example

<ul class="ul small">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

Displaying a Large List


Example

<ul class="ul large">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

Displaying a xLarge List


Example

<ul class="ul xlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

Displaying a xxLarge List


Example

<ul class="ul xxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

Displaying a Red List


Example

<ul class="ul xxlarge red">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

Displaying a xxxLarge List

Example

<ul class="ul xxxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
Try It Yourself »

Displaying a Jumbo List


Example

<ul class="ul jumbo">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

 







W3.CSS Images

Menu

Displaying an Image

Car

Example

<div class="image">
  <img src="images/audi8.png" alt="Car" style="width:70%">
</div>
Try It Yourself »

Displaying an Image in a Circle

Car

Example

<img src="images/audi8.png" class="circle" alt="Car" style="width:70%">
Try It Yourself »

Displaying an Image Text

Car
Gorgeous Car

Example

<div class="image">
  <img src="images/audi8.png" alt="Car" style="width:70%">
  <div class="title text-dark-grey">Nice Car</div>
</div>
Try It Yourself »

Displaying an Image as a Card

Car

Example

<div class="card-4" style="width:70%">
  <img src="images/audi8.png" alt="Car" style="width:100%">
</div>
Try It Yourself »

Constructing a Photo Album

Summer 2015

5 Terre

Monterosso

Vernazza

Manarola

Corniglia

Riomaggiore


Example

<div class="third">
  <div class="card-2">
   <img src="iamges/monterosso.png" style="width:100%">
   <div class="container">
     <h4>Monterosso</h4>
    </div>
  </div>
</div>
Try It Yourself »

 







W3.CSS Signs and Tags

Menu

Displaying a Sign

London Zoo

Example

<div class="sign orange">London Zoo</div>
Try It Yourself »

Displaying Signs in a Row

S
A
L
E

Example

<div class="sign red">S</div>
<div class="sign black" >A</div>
<div class="sign yellow">L</div>
<div class="signblack">E</div>
Try It Yourself »

Displaying Tags

News Section New!

Comments More Later!

Example

<p>News Section <span class="tag yellow">New!</span></ p>

<p>Comments <span class="tag teal">More Later!</span></ p>
Try It Yourself »

Displaying Badges

Tokyo  6

London 8

Example

<p>Tokyo <span class="badge red">6</span></p>

<p>London <span class="badge teal">8</span></p>
Try It Yourself »

Displaying Road Signs

Falcon Ridge Parkway

Example

<div class="sign round green" style="padding:3px 3px">
<div class="sign round green" style="border:1px solid white">
Falcon Ridge Parkway
</div>
</div>
Try It Yourself »

Displaying Large Tags

66

Example

<span class="tag jumbo padding-large blue">66</span>
<div class="sign red">
  <span class="jumbo">49</span><span class="xlarge">,99 </span>
</div>
Try It Yourself »

Displaying Large Badges

66

Example

<p><span class="badge jumbo padding-large red">66</span></ p>
Try It Yourself »

Displaying Large Signs

IN CASE OF
EMERGENCY
RUN LIKE HELL !

Example

<span class="sign xxlarge padding orange center">
IN CASE OF<br>
EMERGENCY<br>
RUN LIKE HELL !
</span>
Try It Yourself »
49,99

Example

<div class="sign jumbo green">
  <span class="xxlarge">49</span>
  <span class="large">,99</span>
</div>
Try It Yourself »

Displaying Rounded Signs

DO NOT brEATHE
UNDER WATER

Example

<span class="sign xxlarge padding round-large red center">
DO NOT<br>
BREATHE<br>
UNDER WATER
</span>
Try It Yourself »

Displaying Letters as Signs

J A N U A R Y

Example

<span class="sign black">J</span>
<span class="sign black">A</span>
<span class="sign black">N</span>
<span class="sign black">U</span>
<span class="sign black">A</span>
<span class="sign black">R</span>
<span class="sign black">Y</span>
Try It Yourself »

 







W3.CSS Icons

Menu

Icon Libraries

With W3.CSS you may use icon libraries such as:

Unfortunately we do not have access to the actual icon libraries, which are linked to online. Therefore we will just discuss the theoretical application of them.

Using Icons

To use an icon, just add the name of the icon to the class of an HTML <i> element.

To control the size of the icon, change the font-size property of the icon, or use the classes:

The example below describes how to link to and use the the font-awesome library.

Example

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/ 4.4.0/css/font-awesome.min.css">
<body>

<i class="fa fa-cloud"></i>
<i class="fa fa-cloud w3-large"></i>
<i class="fa fa-cloud w3-xlarge"></i>
<i class="fa fa-cloud w3-xxlarge"></i>
<i class="fa fa-cloud w3-xxxlarge"></i>
<i class="fa fa-cloud w3-text-teal" style="font-size:64px"></i>

< /body>
</html>

 







W3.CSS Navigation

Menu

Top navigation

Example

<nav class="w3-topnav w3-green">
  <a href="#">home</a>
  <a href="#">link 1</a>
  <a href="#">link 2</a>
  <a href="#">link 3</a>
  <a href="#">link 4</a>
</nav>
Try It Yourself »

Example with Font Awesome

<nav class="w3-topnav w3-green">
  <a href="#"><i class="fa fa-home"></i> </a>
  <a href="#">link 1</a>
  <a href="#">link 2</a>
  <a href="#">link 3</a>
  <a href="#">link 4</a>
</nav>
Try It Yourself »

Example with Material Icons

<nav class="w3-topnav w3-green">
  <a href="#"><i class="material-icons">home </i></a>
  <a href="#">link 1</a>
  <a href="#">link 2</a>
  <a href="#">link 3</a>
  <a href="#">link 4</a>
</nav>
Try It Yourself »

Side navigation

With side navigation, you have several options:

Example: Always Display the navigation Pane

<nav class="w3-sidenav w3-white w3-card-2" style="width:25%">
  <a href="#">link 1</a>
  <a href="#">link 2</a>
  <a href="#">link 3</a>
  <a href="#">link 4</a>
  <a href="#">link 5</a>
</nav>

<div id="main" style="margin-left:25%">
... page content...
</div>
Try It Yourself »

Open the navigation Pane Hiding a Part of the Content

function w3_open() {
    document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
    document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
Try It Yourself »

Open the navigation Pane Hiding All of the Content

function w3_open() {
    document.getElementsByClassName("w3-sidenav")[0].style.width = "100%";
    document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
    document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
Try It Yourself »

Shift the Content to the Right

function w3_open() {
  document.getElementById("main").style.marginLeft = "25%";
  document.getElementsByClassName("w3-sidenav")[0].style.width = "25%";
  document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
  document.getElementsByClassName("w3-opennav")[0].style.display = 'none';
}
function w3_close() {
  document.getElementById("main").style.marginLeft = "0%";
  document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
  document.getElementsByClassName("w3-opennav")[0].style.display = "inline-block";
}
Try It Yourself »

Top navigation as Page Tabulators

Example

<div class="w3-topnav red">
  <a href="#link1">London</a>
  <a href="#link2">Paris</a>
  <a href="#link3">Tokyo</a>
</div>

<div class="w3-tab">

<div id="link1" class="container">
... page content ...
</div>

<div id="link2" class="container">
... page content ...
</div>

<div id="link3" class="container">
... page content ...
</div>

</div>
Try It Yourself »

Side navigation as Page Tabulators

Example

<nav class="w3-sidenav yellow" style="width:25%">
  <header class="w3-container">
    <h5>Menu</h5>
  </header>
  <a href="#link1">London</a>
  <a href="#link2">Paris</a>
  <a href="#link3">Tokyo</a>
</nav>

<div class="w3-tab" style="margin-left:25%">

<div id="link1" class="container">
... page content ...
</div>

<div id="link2" class="container">
... page content ...
</div>

<div id="link3" class="container">
... page content ...
</div>

</div>
Try It Yourself »

 







W3.CSS Dropdowns

Menu

Dropdown Hover

Link 1Link 2Link 3

The dropdown-hover class defines an hoverable dropdown element.

The dropdown-content class defines a dropdown part to be displayed.

Example

<div class="w3-dropdown-hover">
  <w3-button class="btn red">Hover Me!</button>
  <div class="w3-dropdown-content border">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Try It Yourself »

Both the hoverable element part and the dropdown element can be any HTML element.

In the previous example the hoverable part was a <button>, and the dropdown part a <div>.

In the next example the hoverable part is a <p>, and the dropdown part is a <span>.

Example

<div class="w3-dropdown-hover">
  <p>Hover Me!
  <span class="w3-dropdown-content border">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Try It Yourself »

A Menu Dropdown

The dropdown-hover class is perfect for dropdown menus.

Move the mouse over "Link A":

Link A
Link 1Link 2Link 3
Link BLink C

Example

<div class="w3-dropdown-hover">
  <a href="#">Link A</a>
  <div class="w3-dropdown-content w3-card-4">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  <a href="#">Link B</a>
  <a href="#">Link C</a>
</div>

Try It Yourself »

A Clickable Dropdown

The dropdown-click class is similar to dropdown-hover, except that the dropdown is opened by JavaScript.

Link 1Link 2Link 3

Example

<div class="dropdown-click">
  <button onclick="myFunction()" class="btn">Click Me</button>
  <div id="Demo" class="dropdown-content card">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

<script>
function myFunction() {
    document.getElementById("Demo").classList.toggle("show");
}
</script>
Try It Yourself »

Menu