HTML <td> Tag – Table Data Cell
📌 Introduction
The <td> tag defines a data cell in an HTML table.
It is used to store the actual content inside a table row.
👉 It always works inside a <tr> (table row).
🧱 Syntax
<table>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>TD Example</title>
</head>
<body>
<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
<td>contains the actual table data- Each
<tr>row contains multiple<td>cells - Data is displayed in columns
🎯 Why <td> is Important
1. 📊 Stores Table Data
Everything inside a table (except headers) uses <td>.
2. 🧱 Builds Rows
Each row is made of multiple <td> elements.
3. ⚙️ Works with All Table Sections
Used inside:
<thead><tbody><tfoot>
🧩 Example Structure
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>yourName</td>
<td>20</td>
</tr>
</table>
⚖️ <td> vs <th>
| Tag | Purpose | Style |
|---|---|---|
<td> |
Data cell | Normal text |
<th> |
Header cell | Bold + centered |
🎯 Advanced Usage
Merging Columns
<tr>
<td colspan="2">Merged Cell</td>
</tr>
✔ Combines multiple columns
Merging Rows
<tr>
<td rowspan="2">Merged Row</td>
<td>Data</td>
</tr>
✔ Combines multiple rows
🎨 Styling Example
<td style="padding:10px; background:#f9f9f9;">yourName</td>
🚫 Common Mistakes
- Using
<td>outside<tr>❌ - Confusing
<td>with<th>❌ - Missing table structure ❌
🧪 Mini Exercise
Create a table with:
- 3 columns (Name, Age, City)
- At least 3 rows using
<td> - Add borders
- Try using
colspanin one row