HTML <table> Tag – Data Tables
📌 Introduction
The <table> tag is used to display data in rows and columns.
It is commonly used for:
- Reports
- Schedules
- Pricing tables
- Data comparison
- Admin dashboards
🧱 Table Structure
A basic table uses these tags:
<table>→ main container<tr>→ table row<th>→ table header<td>→ table data
💡 Basic Syntax
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<h2>Students Table</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>yourname</td>
<td>20</td>
<td>Algeria</td>
</tr>
<tr>
<td>Sara</td>
<td>22</td>
<td>Morocco</td>
</tr>
</table>
</body>
</html>
🖥️ Output Explanation
<th>= column headers (bold by default)<td>= actual data<tr>= each row
🎯 Important Structure Rule
👉 Tables always follow this structure:
table
├── tr (row)
│ ├── th or td
│ └── td
⚙️ Important Tags
1. <tr> (Table Row)
<tr>
<td>Row data</td>
</tr>
✔ Creates a horizontal row
2. <th> (Header Cell)
<th>Name</th>
✔ Used for column titles ✔ Usually bold and centered
3. <td> (Data Cell)
<td>yourname</td>
✔ Used for normal data
🎨 Styling Example
<table style="width:100%; border-collapse: collapse;">
<tr>
<th style="border:1px solid black;">Name</th>
<th style="border:1px solid black;">Age</th>
</tr>
</table>
🚫 Common Mistakes
- Forgetting
<tr>❌ - Using
<td>outside table ❌ - Not structuring rows properly ❌
🧪 Mini Exercise
Create a table with:
3 columns:
- Name
- Age
- Job
At least 3 rows of data
Add borders to the table
Make headers bold