5 Easy Steps to Create a Fixed Header

This jQuery plugin just clones current header and place on top of the table. Follow below 5 steps to create a fixed header row of a normal HTML table or ASP.Net GridView/Datagrid.

Step 1: Include the jQuery library JavaScript file on header section of web page.

Download file (jquery-1.2.6.js)

Step 2: Include the jQuery Fixed Header JavaScript file on header section of web page.

Download file (jquery.fixedheader.js)

Step 3: Add this CSS code in stylesheet or header section of web page.

<style type="text/css">
.dataTable { font-family:Verdana, Arial, Helvetica, sans-serif; border-collapse: collapse; border:1px solid #999999; width: 750px; font-size:12px;}
.dataTable td, .dataTable th {border: 1px solid #999999; padding: 3px 5px; margin:0px;}
.dataTable thead th { background-color:#cccccc; color:#444444; font-weight:bold; text-align:left;}
.dataTable thead a {text-decoration:none; color:#444444; }
.dataTable thead a:hover { text-decoration: underline;}

/* Firefox has missing border bug! https://bugzilla.mozilla.org/show_bug.cgi?id=410621 */
/* Firefox 2 */
html</**/body .dataTable, x:-moz-any-link {margin:1px;}
/* Firefox 3 */
html</**/body .dataTable, x:-moz-any-link, x:default {margin:1px}
</style>

Step 4: Add this JavaScript code in header section of web page.

<script type="text/javascript">
$(document).ready(function(){
$("#data").fixedHeader({
width: 500,height: 300
});
})
</script>

Step 5: Create an HTML table on the page, including THEAD and TBODY sections. This plug-in uses the THEAD to create the fixed rows, and TBODY is our data.

<table id="data" class="dataTable">

<thead>
<tr>
<th> ….. <\th>
<th> ….. <\th>
</tr>
</thead>

<tbody>
<tr>
<td> ….. <\td>
<td> ….. <\td>
</tr>
</tbody>

</table>

Note: For ASP.Net GridView/Datagrid you have to keep the header part in THEAD and put your Gridview/Datagrid in the TBODY section of table but without Grid header.

Our table or GridView with fixed header is now ready to view.

jQuery Plugin for Fixed Header
jQuery Plugin for Fixed Header

Features
1. Allow horizontal scroll
2. Auto hide box when scroll in IE6
3. Allow to adjust header cell width with your own implementation

Requires
jQuery 1.2.6

Compatibility
IE6/7, Firefox 3.0/3.1, Opera 9.5, Chrome 0.2, Safari 3.1.2

HTML 5: the next version of the HTML

World Wide Web Consortium released the first working draft for HTML 5 this year in January. It is a fifth major revision of the HTML we all use every day. When HTML 5 is expressed in XML, it is called XHTML 5. The current version of HTML is 4 which developed in 1999.

Apple, Opera, and the Mozilla Foundation – major browser vendors – came together as a group called Web Hypertext Application Technology Working Group (WhatWG) to build up an updated and upgraded version of HTML. W3C took note of these developments and started its own next-generation HTML effort with many of the same members.

This new version HTML 5 also goes under the name Web Applications 1.0 and it would be immediately familiar to existing HTML programmers. There are no namespaces or schemas. Elements don’t have to be closed. Browsers are forgiving of errors. A p is still a p, and a table is still a table. At the same time, we would come across some new and confusing elements. Our div remain, but now HTML includes section, header, footer, and nav as well. em, code, and strong are still present, but so are meter, time, and m. img and embed continue to be used, but now there are video and audio too. However, closer inspection by the html programmer would reveal that these elements aren’t that different. This can also be an effort to make HTML more developer friendly; the datagrid controls seem similar to those of ASP.NET in name and possibly functionality too.

It was explicitly designed to degrade gracefully in browsers that don’t support it. It provides real benefits to programmers today while promising even more for future page visitors.

But remember that HTML 5 is still a draft and this draft may not be finalized for years, work on HTML 5 continues. Perhaps it will be in our browsers in December 2010.

» View draft recommendation