HTML 5 <datagrid> Tag

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:

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.

Editor Preview

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 (although the tabindex attribute does not apply to dialog elements).

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.

For a full list of event handlers, see HTML 5 event handler content attributes.