{{HTMLRef}}
The HTML Table Element (<table>
) represents tabular data - i.e., information expressed via two dimensions or more.
Note: Prior to the creation of CSS, HTML {{HTMLElement("table")}} elements were often used as a method for page layout. This usage has been discouraged since HTML 4.
However, HTML emails are an exception where tables are still commonly used for layout purposes. The reason for this is poor CSS support in popular email clients.
However, HTML emails are an exception where tables are still commonly used for layout purposes. The reason for this is poor CSS support in popular email clients.
Usage context
Content categories | Flow content |
Permitted content |
In this order:
|
Tag omission | None, both start and end tag are mandatory |
Permitted parent elements | Any element that accepts flow content |
Normative document | HTML5, section 4.9.1 (HTML4.01, section 11.2.1) |
Attributes
This element includes global attributes. The following attributes listed on this page are now deprecated.
- {{htmlattrdef("align")}} {{Deprecated_inline}}
- This enumerated attribute indicates how the table must be aligned inside the containing document. It may have the following values:
- left: the table is displayed on the left side of the document;
- center: the table is displayed in the center of the document;
- right: the table is displayed on the right side of the document.
Usage Note- Do not use this attribute, as it has been deprecated. The {{HTMLElement("table")}} element should be styled using CSS. Set {{cssxref("margin-left")}} and {{cssxref("margin-right")}} to
auto
or {{cssxref("margin")}} to0 auto
to achieve an effect that is similar to the align attribute. - Prior to Firefox 4, Firefox also supported, in quirks mode only, the values
middle
,absmiddle
, andabscenter
as synonyms ofcenter
.
- {{htmlattrdef("bgcolor")}} {{Deprecated_inline}}
- This attribute defines the background color of a table. It consists of a 6-digit hexadecimal code as defined in sRGB and is prefixed by '#'. This attribute may be used with one of sixteen predefined color strings :
black = "#000000" green = "#008000" silver = "#C0C0C0" lime = "#00FF00" gray = "#808080" olive = "#808000" white = "#FFFFFF" yellow = "#FFFF00" maroon = "#800000" navy = "#000080" red = "#FF0000" blue = "#0000FF" purple = "#800080" teal = "#008080" fuchsia = "#FF00FF" aqua = "#00FFFF"
- {{htmlattrdef("border")}} {{Deprecated_inline}}
- This integer attribute defines, in pixels, the size of the frame surrounding the table. If set to 0, the {{htmlattrxref("frame", "table")}} attribute is set to void.
Usage note: Do not use this attribute, as it has been deprecated. The {{HTMLElement("table")}} element should be styled using CSS. To create an effect similar to the border attribute, the {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} and {{cssxref("border-style")}} properties in CSS should be used.
- {{htmlattrdef("cellpadding")}} {{Deprecated_inline}}
- This attribute defines the space between the content of a cell and the border, displayed or not, of it. If it is a pixel length, this pixel-sized space will be applied on all four sides; if it is a percentage length, the content will be centered and the total vertical space (top and bottom) will represent this percentage. The same is true for the total horizontal space (left and right).
Usage note: Do not use this attribute, as it has been deprecated. The {{HTMLElement("table")}} element should be styled using CSS. To create an effect similar to the cellpadding attribute, use the CSS property {{cssxref("border-collapse")}} with the value collapse on the {{HTMLElement("table")}} element itself, and the property {{cssxref("padding")}} on the {{HTMLElement("td")}}.
- {{htmlattrdef("cellspacing")}} {{Deprecated_inline}}
- This attribute defines the size, in percentage or in pixels, of the space between two cells (both horizontally and vertically), between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row.
Usage note: Do not use this attribute, as it has been deprecated and the {{HTMLElement("table")}} element should be styled using CSS. To give an effect similar to the cellspacing attribute, use the CSS property {{cssxref("border-spacing")}} on the {{HTMLElement("table")}} element itself. Border-spacing does not have any effect if {{cssxref("border-collapse")}} is set to collapse.
- {{htmlattrdef("frame")}} {{Deprecated_inline}}
- This enumerated attribute defines which side of the frame surrounding the table must be displayed. It may have the following values:
above below hsides vsides lhs rhs border box void
- {{htmlattrdef("rules")}} {{Deprecated_inline}}
- This enumerated attribute defines where rules, i.e. lines, should appear in a table. It can have the following values:
- none, which indicates the no rules will be displayed; it is the default value;
- groups, which will make the rules to be displayed between row groups (defined by the {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} and {{HTMLElement("tfoot")}} elements) and between column groups (defined by the {{HTMLElement("col")}} and {{HTMLElement("colgroup")}} elements) only;
- rows, which will make the rules to be displayed between rows;
- columns, which will make the rules to be displayed between columns;
- all, which wil make the rules to be displayed between rows and columns.
Note:- The styling of the rules is browser-dependant and cannot be modified.
- Do not use this attribute, as it has been deprecated and the rules should be defined and styled using CSS. Use the CSS property {{cssxref("border")}} on the adequate {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}} or {{HTMLElement("colgroup")}} elements.
- {{htmlattrdef("summary")}} {{Deprecated_inline}}
- This attribute defines an alternative text use to describe the table in user-agent unable to display it. Typically, it contents a description of it to allow visually impaired people, like blind people browsing the web using Braille screen, to get the information in it. If the information added in this attribute may also be useful for non-visually impaired people, consider using the {{HTMLElement("caption")}} instead. The summary attribute is not mandatory and may be omitted when a {{HTMLElement("caption")}} element fulfills its role.
Usage Note: Do not use this attribute, as it has been deprecated. Instead, use one of these way of describing a table:
- In prose, surrounding the table (this is the less semantic-conveying way of doing it).
- In the table's {{HTMLElement("caption")}} element.
- In a {{HTMLElement("details")}} element, inside the table's {{HTMLElement("caption")}} element.
- Include the {{HTMLElement("table")}} element in a {{HTMLElement("figure")}} element and add the description in prose next to it.
- Include the {{HTMLElement("table")}} element in a {{HTMLElement("figure")}} element and add the description in prose inside a {{HTMLElement("figcaption")}} element.
- Adjust the table so that such description is no more needed, by using {{HTMLElement("th")}} and {{HTMLElement("thead")}} elements for example.
- {{htmlattrdef("width")}} {{Deprecated_inline}}
- This attribute defines the width of the table. It may either be a pixel length or a percentage value, representing the percentage of the width of its container that the table should use.
DOM interface
This element implements the HTMLTableElement
interface.
Examples
Simple Table
<table> <tr> <td>John</td> <td>Doe</td> </tr> <tr> <td>Jane</td> <td>Doe</td> </tr> </table>
{{EmbedLiveSample('Simple_Table', '100%', '100', '', 'Web/HTML/Element/table')}}
More Examples
<p>Simple table with header</p> <table> <tr> <th>First name</th> <th>Last name</th> </tr> <tr> <td>John</td> <td>Doe</td> </tr> <tr> <td>Jane</td> <td>Doe</td> </tr> </table> <p>Table with thead, tfoot, and tbody</p> <table> <thead> <tr> <th>Header content 1</th> <th>Header content 2</th> </tr> </thead> <tfoot> <tr> <td>Footer content 1</td> <td>Footer content 2</td> </tr> </tfoot> <tbody> <tr> <td>Body content 1</td> <td>Body content 2</td> </tr> </tbody> </table> <p>Table with colgroup</p> <table> <colgroup span="4"></colgroup> <tr> <th>Countries</th> <th>Capitals</th> <th>Population</th> <th>Language</th> </tr> <tr> <td>USA</td> <td>Washington D.C.</td> <td>309 million</td> <td>English</td> </tr> <tr> <td>Sweden</td> <td>Stockholm</td> <td>9 million</td> <td>Swedish</td> </tr> </table> <p>Table with colgroup and col</p> <table> <colgroup> <col style="background-color: #0f0"> <col span="2"> </colgroup> <tr> <th>Lime</th> <th>Lemon</th> <th>Orange</th> </tr> <tr> <td>Green</td> <td>Yellow</td> <td>Orange</td> </tr> </table> <p>Simple table with caption</p> <table> <caption>Awesome caption</caption> <tr> <td>Awesome data</td> </tr> </table>
table { border-collapse: collapse; border-spacing: 0px; } table, th, td { padding: 5px; border: 1px solid black; }
{{EmbedLiveSample('More_Examples', '100%', '700', '', 'Web/HTML/Element/table')}}
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | {{CompatGeckoDesktop("1")}} | 4.0[1] | 7.0 | 1.0 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 1.0 | {{CompatGeckoMobile("1")}} | 6.0[1] | 6.0 | 1.0 |
[1] There is an Internet Explorer 9 rendering bug involving {{HTMLElement("table")}} and {{cssxref(":hover")}}; see the "Browser compatibility" section of the :hover
article for details.
See also
- Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};
- CSS properties that may be specially useful to style the
<table>
element:- {{cssxref("width")}} to control the width of the table;
- {{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}} to control the aspect of cell borders, rules and frame;
- {{cssxref("margin")}} and {{cssxref("padding")}} to style the individual cell content;
- {{cssxref("text-align")}} and {{cssxref("vertical-align")}} to define alignment of text and cell content.