HTML Basics

HTML Tables

Create structured data tables in HTML with headers, rows, cells, and proper accessibility attributes.

HTML Tables

HTML tables allow web developers to arrange data into rows and columns. A table in HTML consists of table cells inside rows and columns.

Table Elements

Element	Description
`<table>`	Defines the table
`<thead>`	Groups header content
`<tbody>`	Groups body content
`<tfoot>`	Groups footer content
`<tr>`	Defines a table row
`<th>`	Defines a header cell
`<td>`	Defines a data cell
`<caption>`	Table caption

Table Headers

Table headers are used to define what each column represents. Use <th> elements inside a <tr> element to define table headers. By default, the text in <th> elements are bold and centered.

Cell Spanning

Use colspan to make a cell span multiple columns, and rowspan to span multiple rows.

Table Accessibility

For accessibility, always use:

<th scope="col"> for column headers
<th scope="row"> for row headers
<caption> to describe the table

Example

html

<!DOCTYPE html>
<html lang="en">
<body>
  <table>
    <caption>Programming Languages Popularity</caption>
    <thead>
      <tr>
        <th scope="col">Language</th>
        <th scope="col">Category</th>
        <th scope="col">Year Created</th>
        <th scope="col">Popularity</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Python</td>
        <td>General Purpose</td>
        <td>1991</td>
        <td>Very High</td>
      </tr>
      <tr>
        <td>JavaScript</td>
        <td>Web</td>
        <td>1995</td>
        <td>Very High</td>
      </tr>
      <tr>
        <td>Rust</td>
        <td>Systems</td>
        <td>2010</td>
        <td>Growing</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="4">Source: Developer Survey 2025</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

Try it yourself — HTML