table HTML Tag

HTML tables are wrapped by the <table> starting and </table> closing tag. These tags are mandatory elements of HTML tables which also need to contain at least one <tr><th>, and <td> elements.

Syntax

<table>
  <tr>
    <td>cell</td>
  </tr>
</table>

Every major web browser supports the table tag, but it's recommended to use structured div tags instead, because HTML tables can't be made responsive very easily.

<table>
  <thead>
    <tr>
      <td>Model</td>
      <td>Price</td>
      <td>Range</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Model S</td>
      <td>$83,900</td>
      <td>651 km</td>
    </tr>
    <tr>
      <td>Model 3</td>
      <td>$42,900</td>
      <td>437 km</td>
    </tr>
    <tr>
      <td>Model X</td>
      <td>$99,990</td>
      <td>564 km</td>
    </tr>
    <tr>
      <td>Model Y</td>
      <td>$54,990</td>
      <td>531 km</td>
    </tr>
  </tbody>
</table>
Model Price Range
Model S $83,900 651 km
Model 3 $42,900 437 km
Model X $99,990 564 km
Model Y $54,990 531 km

A simple demo with header and 4 rows
<table border="5" cellpadding="5px"
       cellspacing="5px" bgcolor="#fff0f0" 
       width="250" height="200"
       style="vertical-align: middle;
       text-align: center;">
  <tr>
    <td>Centered text</td>
  </tr>
</table>
Centered text

It's a common practice to use tables to center text or images vertically

HTML Table Tag Attributes

The HTML <table> tag also supports the following additional attributes which are all considered to be deprecated and it's recommended to use CSS styles instead.

Besides the attributes listed below, table tags support global attributes: accesskey, class, contenteditable, data-*, dir, draggable, hidden, id, lang, spellcheck, style, tabindex, title, translate

  1. abbrstring: Defines an abbreviated version of the content in the element.
  2. alignright, left, center, justify, char: Visual alignment of elements contained inside.
  3. bgcolorrgb(255,255,255), #FF00FF, colorname: Background color of the table.
  4. bordernumeric value in pixels: Sets the border width. 0 means no border.
  5. cellpaddingpixels or %: Specifies the space between the cell borders and their contents.
  6. cellspacingpixels or %: Specifies the space between cells.
  7. framevoid, above, below, hsides, lhs, rhs, vsides, box, border: Used in conjunction with the border attribute, specifies which side of the frame that makes up the border surrounding the table is displayed.
  8. rulesnone, groups, rows, cols, all: Used in conjunction with the border attribute, specifies which rules appear between the cells of the table.
  9. summarytext: The summary of the content.
  10. widthpixels or %: The width of the table.

HTML Table Generator

Use the online HTML table generator below to create and style a new table according to your needs. Click a cell to get the code for the desired size.

2 × 2

Table

Style Name
Georgia
Georgia
Palatino
Times New Roman
Arial
Arial Black
Comic Sans
Impact
Lucida Sans
Tahoma
Trebuchet
Verdana
Courier
Lucida Console
Left Center Right
px
px

Body

Left Center Right

HTML
Preview Apply »
HTML Copy
CSS « Apply