HTML 5 <table> Tag

The HTML <table> tag is used for defining a table. The <table> tag contains other tags that define the structure of the table.

Table Elements

Tables consist of the <table> element as well as other table-related elements. These other elements are nested inside the <table> tags to determine how the table is constructed.

The <table> element can contain the following elements (and in this order):

  1. optionally a <caption> tag
  2. followed by zero or more <colgroup> tags
  3. followed optionally by a <thead> tag
  4. followed optionally by a <tfoot> tag
  5. followed by either zero or more <tbody> tags or one or more <tr> tags
  6. followed optionally by a <tfoot> tag (but there can only be one <tfoot> tag child in total)
  7. optionally intermixed with one or more script-supporting elements (i.e. either <script> tag or <template>) tag

Each <tr> element represents a row in the table. A row can have one or more <td> or <th> elements, which determine the columns in the table. Specifically, <td> represents table data and <th> represents a table header.

Demo

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
borderSpecifies whether the table cells should have borders or not.

Possible values:

  • [Empty String]
  • 1

Note that the WHATWG HTML Living Standard does not support the border attribute. However, the W3C HTML5 and HTML 5.1 specifications both support the border attribute.

Also, W3C states that the border attribute is used to explicitly indicate that the table element is not being used for layout purposes.

Generally, unless you have a specific reason to use the border attribute, use the CSS border property instead (or any other border-related CSS property).

sortableSpecifies that the data in the table can be sorted.

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 sortable or sortable="sortable").

Possible values:

  • [Empty string]
  • sortable

Also see the sorted attribute of the <th> element.

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.