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):
- optionally a
<caption>tag - followed by zero or more
<colgroup>tags - followed optionally by a
<thead>tag - followed optionally by a
<tfoot>tag - followed by either zero or more
<tbody>tags or one or more<tr>tags - followed optionally by a
<tfoot>tag (but there can only be one<tfoot>tag child in total) - 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.
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.
| Attribute | Description |
|---|---|
| border | Specifies whether the table cells should have borders or not.
Possible values:
Note that the WHATWG HTML Living Standard does not support the Also, W3C states that the Generally, unless you have a specific reason to use the |
| sortable | Specifies 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 Possible values:
Also see the |
Global Attributes
The following attributes are standard across all HTML 5 tags (although the tabindex attribute does not apply to dialog elements).
accesskeyautocapitalizeclasscontenteditabledata-*dirdraggablehiddenidinputmodeisitemiditempropitemrefitemscopeitemtypelangpartslotspellcheckstyletabindextitletranslate
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.
onabortonauxclickonbluroncanceloncanplayoncanplaythroughonchangeonclickoncloseoncontextmenuoncopyoncuechangeoncutondblclickondragondragendondragenterondragexitondragleaveondragoverondragstartondropondurationchangeonemptiedonendedonerroronfocusonformdataoninputoninvalidonkeydownonkeypressonkeyuponlanguagechangeonloadonloadeddataonloadedmetadataonloadstartonmousedownonmouseenteronmouseleaveonmousemoveonmouseoutonmouseoveronmouseuponpasteonpauseonplayonplayingonprogressonratechangeonresetonresizeonscrollonsecuritypolicyviolationonseekedonseekingonselectonslotchangeonstalledonsubmitonsuspendontimeupdateontoggleonvolumechangeonwaitingonwheel
For a full list of event handlers, see HTML 5 event handler content attributes.