Nearby lessons
16 of 24📊 HTML <table> Tag
📌 What are HTML Tables?
The <table> tag in HTML is used to create tabular data displayed in rows and columns. It's a powerful structure for presenting data clearly and semantically.
📘 Introduction to HTML Tables
HTML tables let you arrange data into rows and columns. Each cell is defined with
<td>, while headers use <th>.🧱 Table Elements
| Attribute | Description |
|---|---|
<table> | Defines the overall table structure |
<caption> | Adds a title or summary above the table |
<thead> | Groups header rows |
<tbody> | Groups main body rows |
<tfoot> | Groups footer rows |
<tr> | Defines a row |
<th> | Defines a header cell |
<td> | Defines a data cell |
<col> | Specifies column properties |
<colgroup> | Groups columns for styling |
📋 Basic Table Example
Code Example
PREVIEW READY
🧠 Semantic Table Example
Code Example
PREVIEW READY
🧮 Colspan and Rowspan Example
Code Example
PREVIEW READY
🔁 Nested Table Example
You can place a table inside another cell. Use sparingly to avoid complexity.
Code Example
PREVIEW READY
✅ Best Practices
- Use tables strictly for **data**, not layout
- Use
<th>for headers for accessibility - Include semantic tags:
<thead>,<tbody>,<tfoot> - Avoid deeply nested tables
- Style with CSS, not with
borderorbgcolor - Add a
<caption>for better accessibility
🧠 Test Your Knowledge
5 QuestionsProgress: 0 / 5
Keep Going!HTML Forms