HTML Tags
Advertisements

HTML <table> Tag

Topic: HTML5 Tags ReferencePrev|Next

Description

The <table> tag is used to represents data in a grid-like fashion (in rows and columns).

The following table summarizes the usages context and the version history of this tag.

Placement: Block
Content: An optional <caption>, zero or more <col> or <colgroup> tags, optional <thead> and <tfoot>, zero or more <tbody> tags and at least one <tr>
Start/End Tag: Start tag: required, End tag: required
Version: HTML 3.2, 4, 4.01, 5

Usage Notes

  • Tables are used to organize data like, text, images, links, forms, form fields, other tables, etc. into rows and columns of cells.

  • At its most basic, a table is built using the <table> element and one or more, <tr>, <th> and <td> elements. Where the <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.

  • A more complex table may also include a <caption>, <col> and <colgroup> elements; and the structural <thead>, <tbody>, and <tfoot> elements, which are used to identify the different regions in the table.


Syntax

The basic syntax of the <table> tag is given with:

HTML / XHTML: <table> ... </table>

The example below shows the <table> tag in action.

<table>
    <caption>User Details</caption>
    <thead>
        <tr>
            <th>No.</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John Carter</td>
            <td>johncarter@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Peter Parker</td>
            <td>peterparker@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John Rambo</td>
            <td>johnrambo@mail.com</td>
        </tr>
    </tbody>
</table>

Tip: Consider describing the structure of the table in a <caption> element or, simplify the structure of the table so that no description is needed.


Tag-Specific Attributes

The following table shows the attributes that are specific to the <table> tag.

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

Global Attributes

Like all other HTML tags, the <table> tag supports the global attributes in HTML5.


Event Attributes

The <table> tag also supports the event attributes in HTML5.


Browser Compatibility

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

Browsers Icon

Basic Support—

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

Further Reading

See tutorial on: HTML Tables.

Other table-related tags: <thead>, <tfoot>, <tbody>, <caption>, <colgroup>, <col>, <tr>, <th>, <td>.

Advertisements
Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties