HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

HTML Tags

HTML <table> Tag

The <table> tag in HTML defines a table - a structured arrangement of data in rows and columns.
It serves as the container for all related elements like <tr>, <th>, <td>, <thead>, <tbody>, and <tfoot>

Syntax

html

<table>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Attributes

AttributeDescription
borderSpecifies the border width around table cells (deprecated, use CSS).
cellpaddingSpace between cell content and its border (deprecated, use CSS).
cellspacingSpace between cells (deprecated, use CSS).
widthSets the table’s width (deprecated, use CSS).
summaryProvides a summary of the table’s purpose (deprecated, use <caption> instead).

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Tag Example</title>
  <style>
    table {
      width: 60%;
      border-collapse: collapse;
      margin: 20px auto;
    }
    th, td {
      border: 1px solid #555;
      padding: 10px;
      text-align: center;
    }
    th {
      background-color: #29AB87;
      color: white;
    }
  </style>
</head>
<body>

  <h2>HTML Table Example</h2>

  <table>
    <tr>
      <th>Language</th>
      <th>Type</th>
      <th>Year Introduced</th>
    </tr>
    <tr>
      <td>HTML</td>
      <td>Markup</td>
      <td>1993</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Style Sheet</td>
      <td>1996</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>Programming</td>
      <td>1995</td>
    </tr>
  </table>

</body>
</html>

Output

Browser Output

html

Displays a well-formatted table with 3 columns and 3 rows, styled using CSS.
Please use our TryIt editor to see the actual rendering.

Browser Support

Chrome
Edge
Firefox
Safari
Opera
IE9+
YesYesYesYesYesYes

All major browsers fully support the <table> element.

Notes

  • The <table> element is the parent container for all table-related elements.
  • Use <thead>, <tbody>, and <tfoot> for semantic grouping.
  • CSS should be preferred for styling (borders, spacing, alignment).
  • For accessibility, include a <caption> or use scope attributes in header cells.

Conclusion

The <table> tag is the backbone of tabular data in HTML.
When combined with semantic child elements and proper CSS, it allows for both well-structured and visually appealing data presentation.

PreviousHTML <area> TagNextHTML <caption> Tag