HTML & CSS - Mastery / HTML Advanced Elements

Tables: <table>, <tr>, <td>, <th>

🗂️ Tables in HTML

Tables in HTML are used to display data in a structured, row-column format — just like how you'd see in Excel.

Let’s break down the main parts:

🧱 <table> – The container for the entire table

  • This tag wraps around everything — rows, headers, data.

  • Think of it like the frame that holds all the table info.

🧩 <tr> – Table Row

  • Short for "table row"

  • Each row in your table goes inside one <tr> tag.

📦 <td> – Table Data Cell

  • This is the actual data inside the row.

  • Every cell (not header) is created with <td>

🏷️ <th> – Table Header

  • This defines the heading of a column.

  • Usually bold and centered by default.

✅ Example Code

🔍 Result:

Name

Age

City

Aliya

22

Delhi

Rehan

25

Mumbai

✅ What are rowspan and colspan?

Attribute

Purpose

rowspan

Merges rows (vertical merge)

colspan

Merges columns (horizontal merge)

Example with rowspan

Explanation: Age spans 2 rows.

Example with colspan

✅ Combined Example

✨ Pro Tips

You can add border, cellpadding, cellspacing, and styles using CSS to make it look better.

Always use <th> for headings — it improves accessibility and SEO.