HTML <table> Tag for HTML Tables

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <table> Tag in HTML 5

Creating tables in HTML

The <table> tag is used to create a table in HTML, which provides a way to lay out data in table rows and columns.

HTML Table Example

Table Caption
	Multiple Column Heading
	First Column Heading	Second Column Heading
This is an example of an HTML table footer.
Row 1	Row 1 Column 1	Row 1 Column 2
Row 2	Row 2 Column 1	Row 2 Column 2

This is an actual working demo of the table example code below. (Do View Source to verify that this page is using the HTML 5 DOCTYPE. You can also verify it is Valid HTML 5 using the HTML Validator. Try using it to validate URLs with HTML examples from other places that claim to be HTML 5 web sites!)

See the tutorial on Creating HTML Tables for full details on how to create an HTML table using the HTML table tags together.

Tables should not be used to layout non-tabular content. In fact, the HTML specification says:

Tables must not be used as layout aids. Historically, some Web authors have misused tables in HTML as a way to control their page layout. This usage is non-conforming, because tools attempting to extract tabular data from such documents would obtain very confusing results. In particular, users of accessibility tools like screen readers are likely to find it very difficult to navigate pages with tables used for layout.

<table> Tag Syntax

<body>
   ...
   ... flow content expected ...
   <table>
      <tr>
         <td>...</td>
         ...
      </tr>
   </table>
   ...
</body>

Rules for coding the HTML `table` element

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

Code the table element where flow content is expected.
Begin the table element with a starting <table> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
Inside the table element, code the appropriate child elements described below.
End the table element with a matching </table> closing tag.

Child Elements of the <table> tag

The HTML specifications require that the child elements be coded in the order shown by this ordered list:

1. an optional <caption> tag: to add a caption above the table
2. optional <colgroup> tags and/or <col/> tags: which define the table columns
3. an optional <thead> tag: for the table header, which is displayed at the top of the table and, when printed, may appear on each page containing any part of the table body
4. an optional <tfoot> tag: The single tfoot element, described below, can be coded either before or after the table body.
5. one or more <tr> tags either directly under the table element or inside a tbody element: for the rows in the body of the table
6. an optional <tfoot> tag: for the table footer, which is displayed at the bottom of the table and, when printed, may appear on each page containing any part of the table body

<table> Tag Attributes

Attributes of the <table> tag

global attributes In addition to the personal attributes of the <table> tag below, any of the common HTML attributes can also be coded.

border=""
border="1"

indicates that the table is being used for tabular data and not for layout of content

The <table border> attribute is included in the HTML specification for compatibility with a significant number of web sites that use the attribute and because it provides a good indication that the table is being properly used for tabular content rather than for layout of content. Omitting the attribute provides no indication one way or the other.

Note that the primary purpose of this attribute is not to specify whether or not the table should have a border. The CSS border property should be used to specify the table border style.

border="": Indicates that the table is being used for tabular data and not for layout of content. If there is no CSS style information for the table, some browsers will display the table without a border.
border="1": Indicates that the table is being used for tabular data and not for layout of content. If there is no CSS style information for the table, some browsers will display the table with a border.

<table> Tag Examples

Examples of the <table> tag in HTML 5

Here is the HTML code for the table demo above:

<table class="border" style="width: 100%">
   <caption>Table Caption</caption>
   <colgroup>
      <col style="width: 20%"/>
      <col style="width: 80%"/>
   </colgroup>
   <thead>
      <tr>
         <th rowspan="2"></th>
         <th colspan="2">Multiple Column Heading</th>
      </tr>
      <tr style="vertical-align: bottom">
         <th>First Column Heading</th>
         <th>Second Column Heading</th>
      </tr>
   </thead>
   <tfoot>
      <tr><td colspan="2">This is an example of an HTML table footer.</td></tr>
   </tfoot>
   <tbody>
      <tr>
         <td>Row 1 Column 1</td>
         <td>Row 1 Column 2</td>
      </tr>
      <tr>
         <td>Row 2 Column 1</td>
         <td>Row 2 Column 2</td>
      </tr>
   </tbody>
</table>

Changes in HTML 5 - <table> Tag

What's new in HTML 5

Differences between HTML 5 and earlier versions of HTML

The following attributes should not be coded on the <table> tag because they either have been deprecated or were never officially supported:

align
bgcolor
frame
summary

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the table element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5