Go to main content
Bypass navigation bar HTML Reference HTML Tags HTML Tutorials
Bypass language selection
Bypass location bar

Location: Home > HTML Reference > HTML Tags > HTML table tag

Bypass main content

HTML table tag

Note: If you don't know what an element/tag is and/or how you must use it we recommend you to read our HTML tags and attributes tutorial that you can find in our HTML tutorials section.

Bypass main content

Description

The HTML table element inserts a table in the document. Tables are a very useful and powerful feature of the HTML language, as they give a solution for inserting any type of tabulated data in the document.

This element is the main container of a table, but many other elements are needed to define a table correctly. Other elements that constitute a table are:

An HTML table can be basically considered as a set of rows containg cells and not backwards. This is because the HTML tr element are designed to contain cell elements (HTML td element and HTML th element).

A table can be divided horizontally, defining these sections:

Besides, columns can be thematically grouped using the HTML colgroup element.

Finally, the HTML col element can be used to apply style attributes to all cells in a number of consecutive columns at once.

Note that the "align" attribute for this element has been deprecated in HTML 4.01 in favor of style sheets. It's use is no longer recommended.

To expand this information read our tutorial "Tables in HTML".

Examples

The following example shows a simple table with the container (HTML table element), rows (HTML tr element) and the cells in each row (HTML td element). A summary ("summary" attribute for the HTML table element) and a caption (HTML caption element) are also provided.

Code
<table summary="Representation of how the pages of the website work in different versions of Internet Explorer">
<caption>Compatibility of the website in Internet Explorer</caption>
<tr>
<th>Name</th>
<th>4.0</th>
<th>5.0</th>
<th>6.0</th>
</tr>
<tr>
<td>index.html</td>
<td>Ok</td>
<td>Ok</td>
<td>Ok</td>
</tr>
<tr>
<td>fullfunc.html</td>
<td>Bad</td>
<td>Partial</td>
<td>Ok</td>
</tr>
<tr>
<td>nofunc.html</td>
<td>Ok</td>
<td>Ok</td>
<td>Ok</td>
</tr>
<tr>
<td>panel.html</td>
<td>Bad</td>
<td>Partial</td>
<td>Ok</td>
</tr>
</table>
View
Compatibility of the website in Internet Explorer
Name 4.0 5.0 6.0
index.html Ok Ok Ok
fullfunc.html Bad Partial Ok
nofunc.html Ok Ok Ok
panel.html Bad Partial Ok

In the next example, the table is expanded to add another browser. In this case the columns are grouped thematically (Internet explorer and Mozilla Firefox). A header (HTML thead element) and a body (HTML tbody element) are also defined.

Many other features are used in this example that aren't described in this page. You can learn about them by reading the reference for the other table elements.

Code
<table summary="Representation of how the pages of the website work in different versions of Internet Explorer and Mozilla firefox">
<caption>Compatibility of the website in IE and FF</caption>
<colgroup></colgroup>
<colgroup span="3"></colgroup>
<colgroup span="2"></colgroup>
<thead>
<tr>
<th scope="row">Browser</th>
<th scope="col" colspan="3">Internet Explorer</th>
<th scope="col" colspan="2">Mozilla Firefox</th>
</tr>
<tr>
<th scope="col">Name</th>
<th scope="col">4.0</th>
<th scope="col">5.0</th>
<th scope="col">6.0</th>
<th scope="col">2.0</th>
<th scope="col">3.0</th>
</tr>
</thead>
<tbody>
<tr>
<td>index.html</td>
<td>Ok</td>
<td>Ok</td>
<td rowspan="4">Ok</td>
<td>Ok</td>
<td rowspan="4">Ok</td>
</tr>
<tr>
<td>fullfunc.html</td>
<td>Bad</td>
<td>Partial</td>
<td>Partial</td>
</tr>
<tr>
<td>nofunc.html</td>
<td>Ok</td>
<td>Ok</td>
<td>Ok</td>
</tr>
<tr>
<td>panel.html</td>
<td>Bad</td>
<td>Partial</td>
<td>Partial</td>
</tr>
</tbody>
</table>
View
Compatibility of the website in IE and FF
Browser Internet Explorer Mozilla Firefox
Name 4.0 5.0 6.0 2.0 3.0
index.html Ok Ok Ok Ok Ok
fullfunc.html Bad Partial Partial
nofunc.html Ok Ok Ok
panel.html Bad Partial Partial

Attributes

id (name)

The "id" attribute assigns an identifier to the associated element. This identifier must be unique in the document and can be used to refer to that element in other instances (e.g., from client-side scripts).

<p id="paragraph1">This is the first paragraph, named "paragraph1". To dynamically change its properties use this identifier.</p>

class (cdata)

The "class" attribute assigns a class name (or a list of class names separated by spaces) to the container element. It's used together with style sheets and tells the browser the class (or classes) to which the element is associated with.

A class gives presentational attributes to elements (read more at the Cascading Style Sheets tutorial).

<p class="references">This article is based on the book "Wind in the trees" by Jhon L. Brooks</p>
<p class="references important">This article is based on the book "Wind in the trees" by Jhon L. Brooks... and is more important than the one before.</p>

style (style)

This attribute is used to define presentational attributes for the containing element, and its value should be composed by style sheets properties. Although, in some cases, it can become useful, a better practice is to place presentational attributes in external files, relating them to elements with the "class" attribute. This way you keep the semantic and presentational parts of your document separated.

You can find more information about presentational attributes at the Cascading Style Sheets tutorial.

<p style="color: #0000FF; font-size: 12pt">This is a paragraph with a defined style.</p>
<p>And this is another text without style.</p>

title (text)

The purpose of this attribute is to provide a title for the element. Its value must be a short and accurate description of the element. Browsers usually render it as a "tool tip" when the user puts the mouse pointer over the element for a small period of time.

Code
<a title="HTMLQuick.com" href="http://www.htmlquick.com">HTML code</a>
View

lang (langcode)

Specifies the language of an element's content. The default value in "unknown".

When writing XHTML 1.0 documents, the attribute used to specify the language of an elements is "xml:lang". For forward and backward compatibility both attributes can be used simultaneously like in the example below. Note, that in XHTML 1.1 the "lang" attribute has been completely replaced by "xml:lang" and its use is no longer valid.

<p lang="en" xml:lang="en">This is a paragraph in english.</p>
<p lang="es" xml:lang="es">Este es un párrafo en español.</p>

dir

This attribute indicates the direction in which the texts of the element must be read. This includes content, attribute values and tables. It has two possible values that are case-insensitive:

  • RTL: Right to left.
  • LTR: Left to right.
<q lang="he" dir="rtl">...an Hebrew quotation...</q>

summary (text)

Provides summary of the table's purpose and structure. The information in this attribute is supposed to expand the contents of the HTML caption element.

Summaries should be as short, accurate and descriptive as possible, as their are key to help blind people interpreting the content of the table.

<table summary="List of users registered in HTMLQuick.com from 11-05-10 to 12-05-10">

width (length)

This attribute specifies the desired width of the entire table. If the width isn't specified in any way, user agents determine its value.

<table width="50%">

frame

Specifies which sides of the frame surrounding the table will be rendered. Possible case-insensitive values are:

  • void: No sides. This is the default value.
  • above: The top side only.
  • below: The bottom side only.
  • hsides: The top and bottom sides only.
  • vsides: The right and left sides only.
  • lhs: The left-hand side only.
  • rhs: The right-hand side only.
  • box: All four sides.
  • border: All four sides.
<table frames="box">

rules

Specifies which rules must be rendered between cells within a table. Possible case-insensitive values are:

<table rules="groups">

border (pixels)

Defines the width of the border of a table as a number of pixels.

<table border="2">

cellspacing (length)

Defines the width of the space to be left between cells. It also refers to the space between the border of a table and the adjacent cells.

Code
<table cellspacing="20">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
View
Cell 1 Cell 2 Cell 3

cellpadding (length)

Defines the width of the space to be left between a cell's content and its border.

Code
<table cellpadding="20">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
View
Cell 1 Cell 2 Cell 3

align

This attribute has been deprecated in HTML 4.01. Therefore its use is no longer recommended.

It decides the horizontal alignment of the table. Possible values (case-insensitive) are:

  • left: The table is aligned to the left margin.
  • right: The table is aligned to the right margin.
  • center: The table is centered.
<table align="right">

Events

  • onclick
  • ondblclick
  • onmousedown
  • onmouseup
  • onmouseover
  • onmousemove
  • onmouseout
  • onkeypress
  • onkeydown
  • onkeyup

See a complete list and information about events in HTML

Diseño y desarrollo: Latitud29.com

Links and logos|Contact|Beyond HTML|Tools and resources|Sitemap|Webmaster|Donate