Table of contentsBypass table of contents
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".
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.
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.
|Browser||Internet Explorer||Mozilla Firefox|
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).
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).
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.
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.
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.
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:
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.
This attribute specifies the desired width of the entire table. If the width isn't specified in any way, user agents determine its value.
Specifies which sides of the frame surrounding the table will be rendered. Possible case-insensitive values are:
Specifies which rules must be rendered between cells within a table. Possible case-insensitive values are:
Defines the width of the border of a table as a number of pixels.
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.
|Cell 1||Cell 2||Cell 3|
Defines the width of the space to be left between a cell's content and its border.
|Cell 1||Cell 2||Cell 3|
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:
See a complete list and information about events in HTML
Diseño y desarrollo: Latitud29.com