Image Comparison

Hi Folks, In this tutorial, you will learn how to create an image comparison effect with pure CSS and Javascript. With the help of this tutorial, you can create a create creative effect to compare the original and filtered image on mouse move.

Demo:

HTML:

First of all, you have to create a div#container containing another div#layer.

<div id="container">
     <div id="layer"></div>
</div>

CSS:

* {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

section {
    background: url(img-2.jpg);
}

#layer {
    background: url(img-1.jpg);
    border-left: 2px solid #000;
}

section,
#layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-position: center center ;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

Javascript:

var slide = document.getElementById('layer');
window.onmousemove = function (e) {
    var x = e.clientX;
    slide.style.left = x + 'px';
}

Demo:

What is HTML?

What is HTML?

HTML stands for Hypertext Markup Language. HTML is the standard language for creating the webpages. HTML extend from another older markup language SGML (Standard Generalized Markup Language), which was used in document publishing. HTML uses tags to provide formatting features like: <i>this is italic</i>. There is a difference between first and last tag; the last tag has a slash(/) to indicate that it's a closing tag. HTML tags such as <br> and <img> did not have ending tags because the <br> just rendered a line break, and the <img> tag just rendered an image.


HTML versions timeline

1995: HTML 2.0
1997: HTML 4.0
1998: HTML 4.0 was reissued with minor edits without incrementing the version number.
1999: HTML 4.01
2014: HTML5
2016: HTML 5.1
2017: HTML 5.2

HTML document structure

Every HTML document should have a basic structure that consists of a <!DOCTYPE html> declaration, which historically has indicated the version of HTML to the browser. Next is the root <html> element, which contains the <head> element and the <body> element. The <head> element contains hidden information such as metadata that describes the HTML document and instructions. The following is an example of metadata in the <head> element.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>title here</title>
  </head>
  <body>
    content here
  </body>
</html>


What is semantic markup?

Semantic HTML is a way of writing HTML that emphasizes the meaning of the encoded information over its presentation. Semantic is defined as the study of the meaning of linguistic expressions. In the context of HTML, that means that tags provide meaning to the content in the HTML document. Tags do not provide a presentation; they provide meaning. HTML tags provide a meaningful structure but do not provide the presentation. Remember that separation is accomplished by providing structure in your HTML5 document, maintaining presentation in your CSS3 style sheet, and maintaining the behavior in your JavaScript file. Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation. For example, a <p> tag indicates that the enclosed text is a paragraph. This is both semantic and presentational because people know what paragraphs are and browsers know how to display them. On the flip side of this equation, tags like <b> and <i> are not semantic, because they define only how the text should look (bold or italic) and do not provide any additional meaning to the markup. Examples of semantic HTML tags include the header tags <h1> through <h6>, <blockquote>, <code> and <em>. There are many more semantic HTML tags that can be used as you build a standards-compliant website.


Adding comments

You can add comments to your HTML source by using the following syntax.
<!--comment here -->

Comments are not displayed on the rendered browser page but are sent to the browser. Comments can help document your source.


Adding conditional comments

Only Internet Explorer recognizes conditional comments, which enable you to add a browser-specific source that executes if the browser is Internet Explorer but is treated as a comment by other browsers. You can add conditional comments to your HTML document by using the following syntax.

<!--[if lte IE 7]> <![endif]-->
<!--[if lt IE 7]>  <![endif]-->
<!--[if IE 8]> <![endif]-->
<!--[if gt IE 8]> <![endif]-->
<!--[if gte IE 9]> <![endif]-->
<!--[if !IE]> --> <!-- <![endif]-->

HTML Element reference

HTML5 has more than 100 defined elements that you can use to create rich webpages and applications. The W3C defines the following list of these elements with a brief description. Note that brevity is a substitute for 100 percent accuracy in these descriptions.

• <a> Hyperlink
• <abbr> Abbreviation
• <address> Contact information
• <area> Image map region
• <article> Independent section
• <aside> Auxiliary section
• <audio> Audio stream
• <b> Bold text
• <base> Document base URI
• <bb> Browser button
• <bdo> Bi-directional text override
• <blockquote> Long quotation
• <body> Main content
• <br> Line break
• <button> Push button control
• <canvas> Bitmap canvas
• <caption> Table caption
• <cite> Citation
• <code> Code fragment
• <col> Table column
• <colgroup> Table column group
• <command> Command that a user can invoke
• <datagrid> Interactive tree, list, or tabular data
• <datalist> Predefined control values
• <dd> Definition description
• <del> Deletion
• <details> Additional information
• <dfn> Defining instance of a term
• <dialog> Conversation
• <div> Generic division
• <dl> Description list
• <dt> Description term
• <em> Stress emphasis
• <embed> Embedded application
• <fieldset> Form control group
• <figure> A figure with a caption
• <footer> Section footer
• <form> Form
• <h1> Heading level 1
• <h2> Heading level 2
• <h3> Heading level 3
• <h4> Heading level 4
• <h5> Heading level 5
• <h6> Heading level 6
• <head> Document head
• <header> Section header
• <hr> Separator
• <html> Document root
• <i> Italic text
• <iframe> Inline frame
• <img> Image
• <input> Form control
• <ins> Insertion
• <kbd> User input
• <label> Form control label
• <legend> Explanatory title or caption
• <li> List item
• <link> Link to resources
• <map> Client-side image map
• <mark> Marked or highlighted text
• <menu> Command menu
• <meta> Metadata
• <meter> Scalar measurement
• <nav> Navigation
• <noscript> Alternative content for no script support
• <object> Generic embedded resource
• <ol> Ordered list
• <optgroup> Option group
• <option> Selection choice
• <output> Output control
• <p> Paragraph
• <param> Plug-in parameter
• <pre> Preformatted text
• <progress> Progress of a task
• <q> Inline quotation
• <rp> Ruby parenthesis
• <rt> Ruby text
• <ruby> Ruby annotation
• <samp> Sample output
• <script> Linked or embedded script
• <section> Document section
• <select> Selection control
• <small> Small print
• <source> Media resource
• <span> Generic inline container
• <strong> Strong importance
• <style> Embedded style sheet
• <sub> Subscript
• <sup> Superscript
• <table> Table
• <tbody> Table body
• <td> Table cell
• <textarea> Multiline text control
• <tfoot> Table footer
• <th> Table header cell
• <thead> Table head
• <time> Date and/or time
• <title> Document title
• <tr> Table row
• <ul> Unordered list
• <var> Variable
• <video> Video or movie
• <wbr> Optionally break up a large word at this element


Adding attributes in HTML elements

HTML Element can contain additional data in the form of attributes. An attribute is a name='value' pair which name is unique within the tag and value is always enclosed by single or double quotes.

Example: <input type="text" name="first-name" class="input-name">

Boolean attributes:

Some examples of Boolean attributes are as follows.
• checked Used with the checkbox and option button to indicate selection
• selected Used to indicate which option is selected in a drop-down or select list
• disabled Used to disable input, text area, button, select, option, or opt, group,
• readonly Used to prevent the user from typing data into a textbox, password, or textarea

Example: <input type="checkbox" name="vehicle" value="Bus" checked />


HTML5 attributes refrence

• class Used with CSS to specify one or more class names for an element.
• id Specifies a unique id for an element.
• style Specifies an inline CSS style for the element.
• title Provides extra information about the element.
• tabindex Sets the tabbing order of the element.
• spellcheck Used with the lang attribute to enable you to indicate whether the element is to have its spelling and grammar checked.
• lang Specifies the language (English, French, German, and so on) of the element’s content.


HTML void elements

Some HTML elements cannot have content. These are called void elements. For example, the <br> tag create a line break and cannot have any content.

void elements refrences:

• <area> Defines a hyperlink area with some text in an image map
• <base> Specifies the document’s base URL or target for all relative URLs in the document
• <br> Represents a line break
• <hr> Specifies a thematic change in content
• <img> Defines an image
• <input> Defines a typed data field that allows the user to edit the data
• <link> Defines a relationship between a document and an external resource such as a cascading style sheet
• <keygen> Defines a key-pair generator control for forms that is used to encrypt data that will be passed to the server
• <meta> Defines metadata that describes the HTML document
• <source> Defines a multimedia resource for a <video> or <audio> element

Animated Toggle Button

Hi friends, in this post you will learn, how to create an animated toggle button with CSS transitions. Firstly you have to know that what is a toggle button. A toggle button allows you to switch states of a button. A toggle button has two states (on-off,yes-no etc.). Let's create the toggle button:

Live demo: https://jsfiddle.net/trickyui/nqxrazfp/

HTML:
First of all you have to create HTML elements for toggle button.

<div class="toggle-btn">
<a href="#" class="active">On</a>
<a href="#">Off</a>
<span class="toggle-bg"></span>
</div>

CSS:
.toggle-btn {
    border: 1px solid #000;
    position: relative;
width: 100px;
height: 30px;
}

.toggle-btn .toggle-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 30px;
    background: #000;
    z-index: -1;
}

.toggle-btn .toggle-bg,
.toggle-btn a {
    transition: all 0.3s ease;
}

.toggle-btn a {
    color: #000;
    text-transform: uppercase;
    vertical-align: middle;
    padding: 8px 0;
    text-align: center;
    width: 50px;
    float: left;
    height: 30px;
font-size: 14px;
text-decoration: none;
}

.toggle-btn a.active {
    color: #fff;
}


JAVASCRIPT:
<script>
$(document).ready(function(){
$('.toggle-btn a').on('click', function() {
var btnWidth = $(this).outerWidth();
var tabNum = $(this).index();
if (!$(this).hasClass("active")) {
$(this).addClass("active").siblings('a').removeClass('active');
$(".toggle-btn").find('.toggle-bg').css('left', btnWidth * tabNum + "px")
}
});
});
</script>

NOTE: JQuery library should be linked inside the page.

Live demo: https://jsfiddle.net/trickyui/nqxrazfp/

CSS Selectors

Hi Coders, in this post you will learn what CSS selectors are and how they work in HTML code. CSS selectors are a part of our CSS rules which contain style declaration block. This declaration block can contain many style properties, 

which are separated by semicolons. The declaration will target the HTML element which you want to select using the selector. Let's look at all the different kinds of selectors.

For live preview please visit: https://jsfiddle.net/trickyui/2g7wgq0z/

Universal Selector

The universal selector is denoted by the * sign. Universal Selector selects all elements on a page. Every HTML page is built with HTML tags, which represent the elements on the page. The universal selector selects all tags and applies 

the declared style properties. 

Example:
<p>Lorem Ipsum is simply dummy</p>
<div>Lorem Ipsum is simply dummy</div>

* {font-size: 16px; color: #ffffff; background: #ff0000;}

Class Selector

Class selector is the most useful selector. The class selector is denoted by a dot character followed by the class name (.class). You can use a single class selector for all similer styled elements. You can also use more than one class 

in a HTML element. You can specify the class for each individual type of element (div.class, p.class).

Example:
A single class for multiple elements.

<div class="box"></div>
<div class="box"></div>

.box {height: 100px; width: 100px; background: red;}
------------------------------------------------------------------------------------
Multiple classes can be used for a single element.

<div class="box bdr"></div>

.box {height: 100px; width: 100px; background: red;}
.bdr {border: 5px solid #000;}
------------------------------------------------------------------------------------
Specify the class for each individual type of element.

<div class="box bdr">Lorem Ipsum is simply dummy</div>
<p class="box bdr">Lorem Ipsum is simply dummy</p>

div.box {height: 100px; width: 100px; background: red;}
p.bdr {border: 1px solid #000;}


ID Selector

An ID selector is denoted by the hash character (#ID). The ID element should be unique on a web page. Note that ID selector is the fastest selector among all available selectors.

Example:
<div id="box"></div>

#box {height: 100px; width: 100px; background: red;}
------------------------------------------------------------------------------------
You can use ID and CLASS selectors together. 

<div id="box" class="bdr"></div>

#box {height: 100px; width: 100px; background: red;}
.bdr {border: 5px solid #000;}
------------------------------------------------------------------------------------
Element Type Selector(Type Selector)

The element selector selects all HTML elements with the same name.

Example:
<div class="box">Lorem Ipsum is simply dummy</div>
<p class="box">Lorem Ipsum is simply dummy</p>
<div class="box">Lorem Ipsum is simply dummy</div>
<p class="box">Lorem Ipsum is simply dummy</p>

div {height: 100px; width: 100px; background: red;}
p {border: 1px solid #000;}

------------------------------------------------------------------------------------
You can apply a CSS style declaration block on multiple HTML elements with the comma (,) separator.

<div class="box">Lorem Ipsum is simply dummy</div>
<p class="box">Lorem Ipsum is simply dummy</p>
<div class="box">Lorem Ipsum is simply dummy</div>
<p class="box">Lorem Ipsum is simply dummy</p>

div,p {height: 100px; width: 100px; background: red;}

Descendant Selector

The descendant selector is used to select elements inside elements.

Example:
<div>
<p>Lorem Ipsum is simply dummy</p>
<p>Lorem Ipsum is simply dummy</p>
</div>
<p>Lorem Ipsum is simply dummy</p>


div p {font-size: 16px; color: #ff0000;}

You can specify the descendant elements with CLASS or ID selector.

Child Selector

Child selector is denoted by the Greater than symbol (>). The child selector selects elements with a specific parent. With this selector you can select the immediate child elements.

Example:
<div>
<p>Lorem Ipsum is simply dummy</p>
<p>Lorem Ipsum is simply dummy</p>
<div>
<p>Lorem Ipsum is simply dummy</p>
<p>Lorem Ipsum is simply dummy</p>
</div>
</div>

div > p {color: #ffffff; background: #ff0000;}

General Sibling Selector

The general sibling selector is denoted by the tilde symbol (~). It will select all elements which have a sibling relationship (same parent).

Example:
<div>
<h2>Title</h2>
<p>Lorem Ipsum is simply dummy</p>
<p>Lorem Ipsum is simply dummy</p>
<div>
<p>Lorem Ipsum is simply dummy</p>
</div>
</div>

h2 ~ p {color: #ffffff; background: #ff0000;}


Adjacent Sibling Selector

The adjacent sibling selector is denoted by the plus sign (+). This selector is almost similer to the general sibling selector. The difference is that it will select the element that is placed immediately after the specified element.

Example:
<div>
<p>Lorem Ipsum is simply dummy</p>
</div>
<p>Lorem Ipsum is simply dummy</p>

div + p {color: #ffffff; background: #ff0000;}


Attribute Selector

The attribute selector target elements with specified attribute and value. It is denoted by square brackets ([]). There are multiple types of attribute selectors.


Select input element with type attribute and text value.

<input type="text">

input[type="text"] {color: #ff0000; border: 1px solid #000; font-size: 14px;}
------------------------------------------------------------------------------------
Select <a> element with a title attribute containing the value "button".

<a href="#" title="button">Button 1</a>
<a href="#">Button 1</a>
<a href="#" title="button">Button 1</a>
<a href="#">Button 1</a>

a[title~=button] {background: red; color: #ffffff;}
------------------------------------------------------------------------------------
Select all elements whose lang attributes value starts with "english".

<ul>
<li lang="english-IN">Lorem Ipsum is simply dummy</li>
<li lang="english-USA">Lorem Ipsum is simply dummy</li>
<li lang="english-UK">Lorem Ipsum is simply dummy</li>
<li lang="hi-IN">Lorem Ipsum is simply dummy</li>
</ul>

li[lang|=english] {background: red; color: #ffffff;} 
------------------------------------------------------------------------------------
Select all div elements that have a class attribute value beginning with "demo".

<div class="demo_one">Lorem Ipsum is simply dummy</div>
<div class="demo_two">Lorem Ipsum is simply dummy</div>
<div class="three">Lorem Ipsum is simply dummy</div>
<div class="four">Lorem Ipsum is simply dummy</div>
<div class="demo">Lorem Ipsum is simply dummy</div>

div[class^="demo"] {background: yellow; color: #000000;}
------------------------------------------------------------------------------------
Select all div elements that have a class attribute value ending with "demo".

<div class="one_demo">Lorem Ipsum is simply dummy</div>
<div class="demo_two">Lorem Ipsum is simply dummy</div>
<div class="three_demo">Lorem Ipsum is simply dummy</div>
<div class="four">Lorem Ipsum is simply dummy</div>
<div class="demo">Lorem Ipsum is simply dummy</div>

div[class$="demo"] {background: yellow; color: #000000;}
------------------------------------------------------------------------------------
Select all div elements that have a class attribute value with "demo".

<div class="one_demo">Lorem Ipsum is simply dummy</div>
<div class="two">Lorem Ipsum is simply dummy</div>
<div class="demo_three">Lorem Ipsum is simply dummy</div>
<div class="four">Lorem Ipsum is simply dummy</div>
<p class="demo">Lorem Ipsum is simply dummy</p>

div[class*="demo"] {background: yellow; color: #000000;}

Pseudo-class

A pseudo-class is used to define a special state of an element. The pseudo-class is denoted by the colon character (:).

Example:
Anchor Pseudo-classes

<a href="#">Button</a>
<a href="#">Button</a>

a:link {color: red;}
a:visited {color: blue;}
a:hover {color: green;}
a:active {color: yellow;}

Pseudo-element

Pseudo-elements are very useful elements. The pseudo-element is used to select a specified part of an element. It is denoted by the double colon symbol (::).

There are many types of pseudo-elements in CSS.

::before
::after
::first-child
::last-child
::nth-child(number,odd,even,n+n)
::nth-of-type(number)
::first-line
::first-letter
::selection

Example:
<ul>
<li>Lorem Ipsum is simply dummy</li>
<li>Lorem Ipsum is simply dummy</li>
<li>Lorem Ipsum is simply dummy</li>
<li>Lorem Ipsum is simply dummy</li>
</ul>

li:nth-child(2) {background: red; color: #ffffff;}


For live preview please visit: https://jsfiddle.net/trickyui/2g7wgq0z/

SVG (Scalable Vector Graphics) animation

Hi friends, In our previous SVG post you learnt that, what is SVG (Scalable Vector Graphics). In this post you will learn something interesting about SVG graphics. As you know we used SVG (Scalable Vector Graphics) in our web pages for better quality graphics and animations. Let's learn how to create a SVG path and how to animate it.

HTML:

<svg height="200" width="500">

  <path class="path" d="M0 0 L75 200 L150 0 L225 200 L300 0 L375 200 "/>

</svg>

CSS:

.path {

   fill:#fff;

   stroke-width: 5px;

   stroke: #ff0000;

   stroke-dasharray: 10;

   animation: animstroke 20s linear;

   animation-direction: reverse;

}

@keyframes animstroke {

   to {

     stroke-dashoffset: 1000;

   }

}

@-webkit-keyframes animstroke {

   to {

     stroke-dashoffset: 1000;

   }

}

For live example please go to this link: https://jsfiddle.net/trickyui/hpo0z6jg/

Jquery Sortable

Hello friends, Sometimes we needs to rearrange our list or list item in custom sequence for good user experience. In this tutorial you will learn how to create a sortable list with drag and drop. Please follow the steps and use it with your requirements.

HTML:

First of all you have to link Jquery and Jquery UI libraries in your file. Link both of libraries in you HTML page head section. For reference please see below:

<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script></head>
<body>
    <div id="sortable">
       <div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</div>
       <div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</div>
       <div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</div>
       <div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</div>
       <div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</div>
       <div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</div>
       <div class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</div>
    </div>
<body>
</html>

You must add "ui-state-*" classes in your sortable list.


CSS:

Style your list according to your design.

<style>
    #sortable { margin: 0 auto; padding: 10px; width: 60%; border: 1px solid #bebebe; }
    #sortable div { margin: 5px 0; padding: 10px; font-size: 16px; position: relative; text-transform: uppercase;}
    #sortable div span { position: absolute; right: 5px; top: 15px;}
</style>


Jquery:

Simply run jquery sortable function on document ready.
<script>
  $(document).ready(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  });
</script>


For live demo visit https://jsfiddle.net/trickyui/4ot5p4cr

and

For more detialed information please visit: https://jqueryui.com/sortable

Auto position custom dropdown list

Hi friends, As you know a custom dropdown list always open in bottom/top of their respective button. It can not change it's position itself according to space. But today you will learn how to create a dropdown which can change it's own position according to space. We create this magical dropdown list with HTML, CSS, Jquery technologies.

HTML:

Create an anchor or button to open the dropdown list.
<div class="list_wrapper">
<a href="javascript:void(0);" class="dropdown">Dropdown Button</a>
<ul class="list">
<li><a href="#">button 1</a></li>
<li><a href="#">button 2</a></li>
<li><a href="#">button 3</a></li>
<li><a href="#">button 4</a></li>
<li><a href="#">bu#tton 5</a></li>
</ul>
</div>


CSS:

<style>
.list_wrapper {
position: relative;
width: 200px;
}
.dropdown {
padding: 10px;
height: 40px;
background: #000;
color: #fff;
}
.list {
list-style: none;
position: absolute;
right: 15px;
top: 100%;
z-index: 1;
min-width: 110px;
background: #fff;
    border-radius: 2px;
box-shadow: 0px 0px 6px #666;
}
.list.top {
top: auto;
bottom: 40px;
}
.list li a {
display: block;
color: #fff;
padding: 8px 16px;
color: #616161;
font-family: 'robotoregular';
}
</style>


Jquery:

$('.dropdown').click(function (e) {
var elem = $(this);
var offset = elem.offset();
var position = offset.top;
var btnHeight = elem.height();
var dropMenu = elem.next('ul');
var menuHeight = dropMenu.outerHeight();
var winHeight = $(window).height();
console.log(winHeight);
if(position > menuHeight && winHeight - position < btnHeight + menuHeight){
dropMenu.addClass('top');
}else{
dropMenu.removeClass('top');
}
elem.toggleClass('active');
dropMenu.fadeToggle('slow');
e.stopPropagation();
});

Loader with CSS

Hi all, Till today We used gif animated image as a pre-loader in our websites or applications. But now we can create a pre-loader with CSS3 animation property. It's purely create by HTML5 and CSS3. It is suppported by all modern browsers and fully customizable. You can change it's size, color or animation speed accordingly.

HTML:

<div id="loader"></div>

CSS:

#loader {
     width: 100px; 
     height: 100px; 
     border: 10px solid #f5f5f5;
     border-top-color: #06F; 
     border-radius: 50%;  
     position: absolute; 
     left: 50%; 
     top: 50%; 
     margin: -50px 0 0 -50px;
     animation: loader 2s linear infinite;
     -webkit-animation: loader 2s linear infinite;
     -moz-animation: loader 2s linear infinite;
     -ms-animation: loader 2s linear infinite;
}

/**** Key frame animation ****/
@keyframes loader {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@-webkit-keyframes loader {
0% {transform: rotate(0deg); -webkit-transform: rotate(0deg);}
100% {transform: rotate(360deg); -webkit-transform: rotate(360deg);}
}
@-moz-keyframes loader {
0% {transform: rotate(0deg); -moz-transform: rotate(0deg);}
100% {transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

Responsive Table with pure CSS

Hi friends, as you know in HTML4 we can not break table structure according to our window or device width. But now in HTML5 we can create a fully responsive table with simple and pure CSS trick. For responsive table we will use HTML5 data attribute and pseudo element in our CSS file and modify the table with media breakpoints(media queries).

First of all we have to create a table:

<table>
   <thead>
      <tr><th>Name</th><th>Class</th><th>Marks</th></tr>
   </thead>
   <tbody>
      <tr><td>John</td><td>VI</td><td>70%</td></tr>
      <tr><td>Dio</td><td>VI</td><td>68%</td></tr>
      <tr><td>Jimmy</td><td>VI</td><td>65%</td></tr>
      <tr><td>Rado</td><td>VI</td><td>58.5%</td></tr>
      <tr><td>Lucy</td><td>VI</td><td>56%</td></tr>
   </body>
</table>

After creating table add data attribute (data-*) in all td elements. The attribute value should be same as column head value(Name, Class, Marks).

example: <td data-label="Name">John</td>

<table>
   <thead>
      <tr><th>Name</th><th>Class</th><th>Marks</th></tr>
   </thead>
   <tbody>
      <tr>
            <td data-label="Name">John</td>
            <td data-label="Class">VI</td>
            <td data-label="Marks">70%</td>
      </tr>
      <tr>
           <td data-label="Name">Dio</td>
           <td data-label="Class">VI</td>
           <td data-label="Marks">68%</td>
      </tr>
      <tr>
           <td data-label="Name">Jimmy</td>
           <td data-label="Class">VI</td>
           <td data-label="Marks">65%</td>
      </tr>
      <tr>
          <td data-label="Name">Rado</td>
          <td data-label="Class">VI</td>
          <td data-label="Marks">58.5%</td>
      </tr>
      <tr>
         <td data-label="Name">Lucy</td>
         <td data-label="Class">VI</td>
         <td data-label="Marks">56%</td>
      </tr>
   </body>
</table>


In CSS file we will use media query to set break points for table and also set the column name for individual td with help of data attribute and pseudo element.

@media(max-width: 768px){
   table thead {
         display: none;    /* hide table head*/
   }
   table td {
         display: block; 
         position: relative; 
         padding-left: 50%;
   }
   table td:before {
        content: attr(data-label); 
        position: absolute; 
        left: 15px; 
        top: 0px; 
        color: #000; 
        font-weight: bold;
  }
  table tr {
       border-bottom: 5px solid #ffffff;   /* for row spacing */
  }
}