Demon Tech Roadmap

HTML

HTML Tables

HTML tables organize structured data into rows and columns.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

HTML tables display data in a grid format. The `` element wraps rows, headers, and data cells. Developers organize complex tables with header, body, and footer sections.

Syntax

1<!-- table structure -->
2<table>
3  <caption>Monthly Sales</caption>
4  <thead>
5    <tr>
6      <th scope="col">Month</th>
7    </tr>
8  </thead>
9</table>

Example

1<!-- this defines a table -->
2<!DOCTYPE html>
3<html lang="en">
4  <head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Tables</title>
8  </head>
9  <body>
10    <table>
11      <thead>
12        <tr><th scope="col">Name</th></tr>
13      </thead>
14      <tbody>
15        <tr><td>Alice</td></tr>
16      </tbody>
17    </table>
18  </body>
19</html>

Try it Yourself

Hands-on Practice

Modify the code below to see how it affects the output. This is the best way to learn!

Interactive Editor

1234567891011121314151617181920

Live Preview

Key Points

The `

` element creates data grids.

The `

` tag defines table rows.