Quackit Logo
HTML
CSS
Scripting
Database
Hosting
Design
XML
Website builder

HTML 5 <datagrid> Tag

Since this article was written, this tag has now been removed from the HTML5 specification (which is still in draft status at time of writing). Rather than remove this article altogether, I have decided to keep it here for reference.

The HTML <datagrid> tag is used for specifying a datagrid.

A datagrid represents an interactive representation of tree, list, or tabular data. The data being presented can come from one of the following:

  • Its own content (as elements given as children of the datagrid element). The <datagrid> element can contain other HTML elements. These elements are its children. The contents of its children is the data that is being presented.
  • From a scripted data provider given by the data DOM attribute.

The <datagrid> tag was introduced in HTML 5.

Data Model Structure

In a datagrid, data is structured as a set of rows representing a tree, each row being split into a number of columns.

Each row can have child rows. Child rows may be hidden or shown, by closing or opening (respectively) the parent row.

Each column can have a caption (which are not considered rows in their own right).

Rows are referred to by zero-based indices - meaning item positions are counted as 0,1,2,3... etc, (NOT as 1,2,3,4... etc).

Example

In this example, the datagrid's content is an ordered list. Because <datagrid> uses zero-based indices, the first row is row 0 and the next row is row 1. Row 1 has a child, which is referred to as row 1,0.

Note: At the time of writing, the <datagrid> element has limited (if any) browser support. This example is based on the W3C HTML 5 Working Draft, and is solely to demonstrate the context of this tag.

Source CodeResult

Attributes

HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double quotes. Here's an example, style="color:black;".

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The attributes that you can add to this tag are listed below.

Element-Specific Attributes

The following table shows the attributes that are specific to this tag/element.

AttributeDescription
disabledSpecifies if the datagrid is disabled or not.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either disabled or disabled="disabled").

Possible values:

  • [Empty string]
  • disabled
multipleIndicates whether the user can select multiple rows at once.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either multiple or multiple="multiple").

Possible values:

  • [Empty string]
  • multiple

Global Attributes

The following attributes are standard across all HTML 5 tags.

accesskey draggable style
class hidden tabindex
contenteditable id title
contextmenu lang  
dir spellcheck  

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Here are the standard HTML 5 event handler content attributes.

onabort onerror* onmousewheel
onblur* onfocus* onpause
oncanplay onformchange onplay
oncanplaythrough onforminput onplaying
onchange oninput onprogress
onclick oninvalid onratechange
oncontextmenu onkeydown onreadystatechange
ondblclick onkeypress onscroll
ondrag onkeyup onseeked
ondragend onload* onseeking
ondragenter onloadeddata onselect
ondragleave onloadedmetadata onshow
ondragover onloadstart onstalled
ondragstart onmousedown onsubmit
ondrop onmousemove onsuspend
ondurationchange onmouseout ontimeupdate
onemptied onmouseover onvolumechange
onended onmouseup onwaiting

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Also see the HTML 4.01 tags


Enjoy this page?

  1. Add this page to your Favorites
  2. Link to this page (copy/paste into your own website or blog):
  3. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!