HTML <table> Tag

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

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.

Syntax

The <table> tag is written as <table></table> with the various table elements nested between the start and end tags.

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.

Like this:

Examples

Basic tag usage

The following table includes table rows (<tr>), table headers (<th>) and table data cells (<td>).

I also add borders to the table with the style element.

Captions

You can use the <caption> element to provide a caption/title for your table.

Using <tbody>, <thead>, and <tfoot> Tags

You can use the <tbody>, <thead>, and <tfoot> tags to group table rows, and to add a table header and/or footer.

Here's an example:

Styles

In the previous examples I used the style element to apply CSS to the table. In this example I add some more styles and apply them via a class called myTable:

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

The <table> element accepts the following attributes.

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, but the W3C HTML 5.2 specification does.

It's recommended that you use CSS to style your tables.

Global Attributes

The following attributes are standard across all HTML elements. Therefore, you can use these attributes with the <table> tag , as well as with all other HTML tags.

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

Event Handlers

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.

Most event handler content attributes can be used on all HTML elements, but some event handlers have specific rules around when they can be used and which elements they are applicable to.

For more detail, see HTML event handler content attributes.