Description

The HTML element <table> is used to define an HTML table, which is used to organize data in rows and columns.

  • It can be used to organize data like text, images, links, forms, media elements, tables, etc.,
  • A basic table can be generated using one or more <tr>, <th>, and <td> elements.
  • A complex table may include <col>, <colgroup>, <caption>, <thead>, <tfoot>, and <tbody> elements.

Table element can contain one or more <tr>, <th>, and <td> elements.

  • Element <tr> defines a table row
  • Element <th> defines a table header
  • Element <td> defines a table cell

It may even contain the below elements.

  • Element <caption> defines table title
  • Element <col> defines table column
  • Element <colgroup> defines a group of columns
  • Element <thead> defines table header section
  • Element <tfoot> defines table footer section
  • Element <tbody> defines table body section

The below table summarizes its usage.

Usage Details
Placement It is displayed as a Block element.
Contents It can contain the elements like <tr>, <th>, <td>, <thead>, <tfoot>, <tbody>, <caption>, <col>, and <colgroup>.
Tags Both opening and closing tags are required.
Versions HTML 3.2, 4, 4.01, 5

Syntax

Here is the basic syntax of the <table> element.

<table>...</table>

Examples

Run this on IDE

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example - HTML Element table</title>
</head>
<body>
    <table>
        <caption>Products List</caption>
        <thead>
            <tr>
                <th>Product</th>
                <th>Sales</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Bread</td>
                <td>10000</td>
            </tr>
            <tr>
                <td>Butter</td>
                <td>3000</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Attributes

The following table shows the list of supported and unsupported attributes for the <table> element.

Attribute Type Details
Element-Specific Attributes The tag <table> has some element-specific attributes listed in the below table.
Global Attributes Like all other HTML tags, the tag <table> supports the HTML Global Attributes.
Event Attributes The tag <table> also supports the HTML Event Attributes.

Here is a list of attributes that are specific to the <table> element.

Attribute Value Required Description
align left
center
right		 No Obsolete
Specifies the alignment of the table with respect to the document.
bgcolor color No Obsolete
Sets the background color of the table.
border 1, 0 No Obsolete
Specifies whether the table cells should have borders or not.
cellpadding length No Obsolete
Specifies the space between the edge of a cell and its content.
cellspacing length No Obsolete
Specifies the amount of space between individual cells.
frame above, below, border, box, hsides, lhs, rhs, void, vsides No Obsolete
Specifies which sides of the border frame surrounding a table will be visible.
rules all
cols
groups
none
rows		 No Obsolete
Specifies which parts of the inside borders will appear between cells within a table.
sortable sortable No Enables a sorting interface for the table.
summary text No Obsolete
Specifies a summary of the content of a table.
width length No Obsolete
Specifies the width of the entire table.

Browser Compatibility

The tag <table> is supported in all modern browsers.

  • Google Chrome 1+
  • Internet Explorer or Edge 2+
  • Firefox 1+
  • Apple Safari 1+
  • Opera 4+

Related Links