HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB /// HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB /// HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB ///

Create Tables

Structure complex data with rows and cells. Learn the grid system of the web.

tables.html
1 / 14
12345
📊

Tutor:Data isn't always linear. Sometimes we need grids. HTML uses the <table> tag to create a container for tabular data. It's not for layout, but for data.


Skill Matrix

UNLOCK NODES BY BUILDING GRIDS.

Concept: The Grid

Tables start with <table>. They are collections of rows.

System Check

What is the direct child of a table element?

Community Holo-Net

Showcase Your Grids

ACTIVE

Built a complex data table? Share your semantic layouts.

Support Us

HTML Tables & Data Grids

Author

Pascual Vila

Frontend Instructor // Code Syllabus

Tables are not for layout. Repeat: Tables are not for layout. They are for structured, multi-dimensional data.

Structure

A table is defined by <table>. Inside, we don't think in columns, we think in rows (tr).

Headers vs Data

The first row usually contains headings. Use <th> for these cells. For regular data, use <td>.

Grouping

To help screen readers and styling, group your rows into <thead> (header rows), <tbody> (data rows), and <tfoot> (summary rows).

View Full Transcript+

This section contains the full detailed transcript of the video lessons for accessibility purposes. It covers the hierarchy of table, tr, th, td, and the grouping elements like thead and tbody.

Table Syntax Glossary

<table>
The root container for any HTML table. It establishes the tabular context.
<tr>
Table Row. Every piece of data must live inside a row to be valid.
<th>
Table Header. Defines a header cell, usually bold and centered by default.
<td>
Table Data. The standard container for a single data point in the grid.
colspan
Attribute that allows a cell to stretch horizontally across multiple columns.
<caption>
Provides a title or summary for the table. Must be the first child of <table>.