Simple Example of Editable Table in HTML5

This tutorial i will tell you, how to work with inline editable attribute in HTML5.It’s magic of HTML5,with help of editable attribute you can edit any column field of table like inline editing with help of jQuery.
When you add below attribute on any column in table.

1
contenteditable="true"


After that you are able to edit column.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<table width="100%" class="table table-bordered table-hover" id="_addFiveTable">
<thead>
  <tr>
    <th>Item</th>
    <th>Item details</th>
    <th>phase</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td contenteditable="true">Editable</td>
    <td contenteditable="true">&nbsp;</td>
    <td contenteditable="true">&nbsp;</td>
  </tr>
</tbody>
</table>

Result :

editable

New tag introduced in HTML5

Hi now i am discussing difference beetween HTML5 and HTML4.
Now we are working in web 2.0 so need some exciting technology to improve user experiance.
HTML5 is well tech for developer as well as users.

Tag Description HTML4 HTML5
<comment> Defines a comment HTML4 HTML5
<DOCTYPE> Defines the document type HTML4 HTML5
<a> Defines a hyperlink HTML4 HTML5
<abbr> Defines an abbreviation HTML4 HTML5
<acronym> Not supported. Defines an acronym HTML4  
<address> Defines an address element HTML4 HTML5
<applet> Not supported. Defines an applet HTML4  
<area> Defines an area inside an image map HTML4 HTML5
<article> Defines an article   HTML5
<aside> Defines content aside from the page content   HTML5
<audio> Defines sound content   HTML5
<b> Defines bold text HTML4 HTML5
<base> Defines a base URL for all the links in a page HTML4 HTML5
<basefont> Not supported. Use CSS instead HTML4  
<bdo> Defines the direction of text display HTML4 HTML5
<big> Not supported. Defines big text HTML4  
<blockquote> Defines a long quotation HTML4 HTML5
<canvas> Defines graphics   HTML5
<caption> Defines a table caption HTML4 HTML5
<center> Not supported. Defines centered text HTML4  
<cite> Defines a citation HTML4 HTML5
<code> Defines computer code text HTML4 HTML5
<col> Defines attributes for table columns HTML4 HTML5
<body> Defines the body element HTML4 HTML5
<br> Inserts a single line break HTML4 HTML5
<button> Defines a push button HTML4 HTML5
<colgroup> Defines groups of table columns HTML4 HTML5
<command> Defines a command button   HTML5
<datagrid> Defines data in a tree-list   HTML5
<datalist> Defines a dropdown list   HTML5
<datatemplate> Defines a data template   HTML5
<dd> Defines a definition description HTML4 HTML5
<div> Defines a section in a document HTML4 HTML5
<dfn> Defines a definition term HTML4 HTML5
<del> Defines deleted text HTML4 HTML5
<details> Defines details of an element   HTML5
<dialog> Defines a dialog (conversation)   HTML5
<dir> Not supported. Defines a directory list HTML4  
<dl> Defines a definition list HTML4 HTML5
<dt> Defines a definition term HTML4 HTML5
<em> Defines emphasized text HTML4 HTML5
<embed> Defines external interactive content or plugin   HTML5
<eventsource> Defines a target for events sent by a server   HTML5
<fieldset> Defines a fieldset HTML4 HTML5
<figure> Defines a group of media content, and their caption   HTML5
<font> Deprecated. Defines text font, size, and color HTML4  
<footer> Defines a footer for a section or page   HTML5
<form> Defines a form HTML4 HTML5
<frame> Not supported. Defines a sub window (a frame) HTML4  
<frameset> Not supported. Defines a set of frames HTML4  
<h1> to <h6> Defines header 1 to header 6 HTML4 HTML5
<head> Defines information about the document HTML4 HTML5
<header> Defines a header for a section or page   HTML5
<hr> Defines a horizontal rule HTML4 HTML5
<html> Defines an html document HTML4 HTML5
<i> Defines italic text HTML4 HTML5
<iframe> Defines an inline sub window (frame) HTML4 HTML5
<img> Defines an image HTML4 HTML5
<input> Defines an input field HTML4 HTML5
<ins> Defines inserted text HTML4 HTML5
<isindex> Not supported. Defines a single-line
input field
HTML4  
<kbd> Defines keyboard text HTML4 HTML5
<label> Defines a label for a form control HTML4 HTML5
<legend> Defines a title in a fieldset HTML4 HTML5
<li> Defines a list item HTML4 HTML5
<meta> Defines meta information HTML4 HTML5
<meter> Defines measurement within a predefined range   HTML5
<link> Defines a resource reference HTML4 HTML5
<mark> Defines marked text   HTML5
<map> Defines an image map HTML4 HTML5
<menu> Defines a menu list HTML4 HTML5
<nav> Defines navigation links   HTML5
<nest> Defines a nestingpoint in a datatemplate   HTML5
<noframes> Not supported. Defines a noframe section HTML4  
<noscript> Defines a noscript section HTML4 HTML5
<object> Defines an embedded object HTML4 HTML5
<ol> Defines an ordered list HTML4 HTML5
<optgroup> Defines an option group HTML4 HTML5
<option> Defines an option in a drop-down list HTML4 HTML5
<output> Defines some types of output   HTML5
<p> Defines a paragraph HTML4 HTML5
<param> Defines a parameter for an object HTML4 HTML5
<pre> Defines preformatted text HTML4 HTML5
<progress> Defines progress of a task of any kind   HTML5
<q> Defines a short quotation HTML4 HTML5
<rule> Defines the rules for updating a template   HTML5
<s> Not supported. Defines strikethrough text HTML4  
<samp> Defines sample computer code HTML4 HTML5
<script> Defines a script HTML4 HTML5
<section> Defines a section   HTML5
<select> Defines a selectable list HTML4 HTML5
<small> Defines small text HTML4 HTML5
<source> Defines media resources   HTML5
<span> Defines a section in a document HTML4 HTML5
<strike> Not supported. Defines strikethrough text HTML4  
<strong> Defines strong text HTML4 HTML5
<style> Defines a style definition HTML4 HTML5
<sub> Defines subscripted text HTML4 HTML5
<sup> Defines superscripted text HTML4 HTML5
<table> Defines a table HTML4 HTML5
<tbody> Defines a table body HTML4 HTML5
<td> Defines a table cell HTML4 HTML5
<textarea> Defines a text area HTML4 HTML5
<tfoot> Defines a table footer HTML4 HTML5
<th> Defines a table header HTML4 HTML5
<thead> Defines a table header HTML4 HTML5
<time> Defines a date/time   HTML5
<u> Not supported. Defines underlined text HTML4  
<ul> Defines an unordered list HTML4 HTML5
<var> Defines a variable HTML4 HTML5
<video> Defines a video   HTML5
<xmp> Not supported. Defines preformatted text HTML4  
<title> Defines the document title HTML4 HTML5
<tr> Defines a table row HTML4 HTML5
<tt> Not supported. Defines teletype text HTML4  

HTML5 mobile web development

Hello,
Now i am discussing how to create mobile app with help of HTML5,now every body using tabs, iPhone etc,so web development technology is also updated. to build mobile apps using several HTML5 features—including the new semantic elements, geolocation, audio and video tags, local storage capacity, web forms, and the canvas 2D drawing surface. During the course, you’ll combine HTML5 elements with JavaScript and CSS3 to create apps for Twitter, movie trailers, and an address book.
You can also style your apps to respond to a device’s vertical and horizontal orientation, take advantage of global positioning, draw your own controls and create basic animations.

html5-mobile-game

HTML 5 supported browsers list

Now this era of web 2.0 and HTML5 is very excellent discovery of w3,only Apples Safari is fully HTML 5 fully supported browser.The Microsoft internet explorer still does not reconize HTML 5 where as Mozilla/chrome also not fully supported to html5.HTML 5 has been designed to make things easier for browsers to render a web page, powerful applications, rich multimedia and stunning designs.

browser-support-html5

W3C tests HTML5 browser compatibility:

html5 new element list

HTML5 is a markup language for structuring and presentation layer for World Wide Web.HTML5 is 5th revision of HTML. the HTML standard (created in 1990 and standardized as HTML4 as of 1997) and, as of May 2012, is still under development.

There are following type of new tag introduced:


Tag Description
<ruby> Defines a ruby annotation (for East Asian typography)
<rt> Defines an explanation/pronunciation of characters (for East Asian
typography)
<article> Defines an article
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<summary> Defines a visible heading for a <details> element
<rp> Defines what to show in browsers that do not support ruby annotations
<section> Defines a section in a document
<time> Defines a date/time
<wbr> Defines a possible line-break
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code
listings, etc.
<figcaption> Defines a caption for a <figure> element
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<bdi> Isolates a part of text that might be formatted in a different direction
from other text outside it
<command> Defines a command button that a user can invoke
<progress> Represents the progress of a task
<audio> Defines sound content
<video> Defines a video or movie
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
<source> Defines multiple media resources for <video> and <audio>
<embed> Defines a container for an external application or interactive content (a plug-in)
<track> Defines text tracks for <video> and <audio>
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation

New Features of Html5

Now we are discussing about HTML5. However, the major browsers support many of the new HTML5 elements and APIs.HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).

New Features of Html5
  • The <canvas> element for 2D drawing
  • The <video> and <audio> elements for media playback
  • Support for local storage
  • New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
  • New form controls, like calendar, date, time, email, url, search

What is doctype in html

A doctype is refers to a Document Type Definition (DTD) and declaration of the HTML.It is an instruction to the web browser about what version of HTML the page is written in.The DTD specifies the rules for the markup language, so that the browsers render the content correctly based on HTML version.

HTML2:
  1. <!DOCTYPE HTML PUBLIC ”-//IETF//DTD HTML 2.0 Level 2//EN”>  

HTML3:
  1. <!DOCTYPE HTML PUBLIC “-//IETF//DTD HTML 3.0//EN”>  

HTML4:
  1. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>  

HTML5:
  1. <!DOCTYPE html>  

table sorting with help of jquery sorter

table sorting with help of jquery sorter.

  1. <script type=“text/javascript” src=“{$SITEURL}egg_admin/js/jquery-latest.js”></script>  
  2.  <script type=“text/javascript” src=“{$SITEURL}egg_admin/js/jquery.tablesorter.pager.js”></script>  
  3.    
  4.  <script type=“text/javascript” src=“{$SITEURL}egg_admin/js/jquery.tablesorter.js”>  
  5.   
  6.   
  7.   
  8. <script>  
  9.    $(document).ready(function() {  
  10.     // call the tablesorter plugin  
  11.     $(“#myTable”).tablesorter({  
  12.         // sort on the first column and third column, order asc  
  13.         //sortList: [[0,0],[1,0]]  
  14.    headers: {  
  15.             // assign the secound column (we start counting zero)  
  16.             3: {  
  17.                 // disable it by setting the property sorter to false  
  18.                 sorter: false  
  19.             },  
  20.    0: {  
  21.                 // disable it by setting the property sorter to false  
  22.                 sorter: false  
  23.             }  
  24.    }  
  25.     });  
  26.    
  27.    
  28. });  
  29. </script>  
  30.      
  31. <table>  
  32.   
  33. <thead>  
  34.       <tr>  
  35.       <th>test</th><tr></thred><table>