W3docs
en
Log in

HTML <table> Tag

The <table> tag defines an HTML table. It contains other HTML elements that determine the structure of the table.

The <table> tag defines an HTML table. It contains other HTML elements that determine the structure of the table.

The <tr> tag determines table rows. A row can have one or more <td> or <th> elements, which define a table cell and a table header respectively.

The <th> tag is placed in the first row of the table. The text in it is bold and centered by default.

Tip

The <th> tag is not a mandatory element in the table, but we recommend using it, as it helps to have better table layout as well as helps search engines better index the content of the table.

A more complex table can also include <caption>, <thead>, <tbody>, <tfoot>, or <colgroup> elements.

Danger

It’s recommended not to use tables for page layout. Sometimes tables are misused in HTML for controlling a page layout. For that, you can use CSS as an alternative to HTML tables.

Syntax

The <table> tag comes in pairs. The content is written between the opening (<table>) and closing (</table>) tags.

Example of the HTML <table> tag:

HTML <table> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>Month</th>
        <th>Date</th>
      </tr>
      <tr>
        <td>June</td>
        <td>10.06.2018</td>
      </tr>
      <tr>
        <td>July</td>
        <td>15.07.2018</td>
      </tr>
    </table>
  </body>
</html>
Try it Yourself »

Result

table example

Attributes

Danger

The attributes of the <table> tag are not supported in HTML5. For styling tables use CSS properties listed below.

AttributeValueDescriptionCSS property
alignleft center rightDefines how the table must be aligned according to the surrounding text. Not supported in HTML5.margin
bgcolorrgb(x,x,x) #xxxxxx colornameDefines the background color for a table. Not supported in HTML5.background-color
border1 0Defines the size of the frame surrounding the table. Not supported in HTML5.border
cellpaddingpixelsDefines the space between the cell wall and the cell content. Not supported in HTML5.padding
cellspacingpixelsDefines the space between cells. Not supported in HTML5.border-spacing
framevoid above below hsides lhs rhs vsides box borderDefines which side of the frame surrounding the table must be displayed. Not supported in HTML5.border-style border-width
rulesnone groups rows cols allDefines which parts of inside borders should be visible. Not supported in HTML5.border (Use this property correspondingly with thead, tbody, tfoot, col or colgroup HTML tags).
widthpixelsDefines the width of a table. Not supported in HTML5.width

The <table> also supports the Global Attributes and the Event Attributes.

Practice

Practice

What are the uses of the <table>, <tr>, <td>, and <th> tags in HTML?