🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEhtml

html Documentation

LOADING ENGINE...

<td>

AI & DATA SCIENCE // td-tag

The <td> element represents a standard data cell in a table, holding one piece of tabular data.

Syntax

<tr>
  <td>Alice</td>
  <td>30</td>
</tr>

Deep Dive Course

**`<td>`** ("table data") holds an individual value within a table row — as opposed to `<th>`, which holds a header labeling that value. Two important attributes let a cell span multiple positions: **`colspan`** merges it across multiple columns, and **`rowspan`** merges it down across multiple rows — useful for grouping related data or creating a cell that applies to several rows/columns at once.

1Understanding <td>

`<td>` ("table data") holds an individual value within a table row — as opposed to <th>, which holds a header labeling that value. Two important attributes let a cell span multiple positions: `colspan` merges it across multiple columns, and `rowspan` merges it down across multiple rows — useful for grouping related data or creating a cell that applies to several rows/columns at once.

💡

When using colspan or rowspan, remember every OTHER row still needs the correct number of cells to keep the table's grid consistent — a merged cell effectively 'removes' that many cell slots from the rows/columns it spans.

editor.html
<table>
  <tr><th>Item</th><th>Qty</th></tr>
  <tr><td>Pen</td><td>3</td></tr>
  <tr><td>Notebook</td><td>1</td></tr>
</table>
localhost:3000

2Practical Example

Here is a real-world application of <td> showing how it is used in production HTML.

editor.html
<!-- Merging a cell across two rows -->
<tr>
  <td rowspan="2">Shared value</td>
  <td>Row 1 detail</td>
</tr>
<tr>
  <td>Row 2 detail</td>
</tr>
localhost:3000

3Best Practices

Follow these guidelines when working with <td>:

1. Use <td> for actual data values, and <th> for labels/headers — don't use <td> for headers

2. Use colspan/rowspan to merge related cells instead of duplicating content across cells

3. Keep cell content concise; move lengthy explanations outside the table when possible

⚠️

Tip: When using colspan or rowspan, remember every OTHER row still needs the correct number of cells to keep the table's grid consistent — a merged cell effectively 'removes' that many cell slots from the rows/columns it spans.

editor.html
<table>
  <tr><th>Item</th><th>Qty</th></tr>
  <tr><td>Pen</td><td>3</td></tr>
  <tr><td>Notebook</td><td>1</td></tr>
</table>
localhost:3000

Examples

Example 01Basic Usage
<table>
  <tr><th>Item</th><th>Qty</th></tr>
  <tr><td>Pen</td><td>3</td></tr>
  <tr><td>Notebook</td><td>1</td></tr>
</table>
Example 02Advanced Example
<!-- Merging a cell across two rows -->
<tr>
  <td rowspan="2">Shared value</td>
  <td>Row 1 detail</td>
</tr>
<tr>
  <td>Row 2 detail</td>
</tr>

Best Practices

  • Use for actual data values, and for labels/headers — don't use for headers
  • Use colspan/rowspan to merge related cells instead of duplicating content across cells
  • Keep cell content concise; move lengthy explanations outside the table when possible

Interview Question

If a <td> uses rowspan="2", how does that affect the number of cells the following <tr> needs?

Hint: Think about the merged cell 'occupying' a slot in the row below it too.

A rowspan="2" cell in one row visually occupies that same column position in the NEXT row too, so the following <tr> should have one fewer <td>/<th> in its markup than it otherwise would, since that column slot is already filled by the spanning cell from the row above. Forgetting this is a common source of misaligned table columns.

Exercises

EasyPractice using <td> in a real scenario.
View Solution
<table>
  <tr><th>Item</th><th>Qty</th></tr>
  <tr><td>Pen</td><td>3</td></tr>
  <tr><td>Notebook</td><td>1</td></tr>
</table>

Frequently Asked Questions

If a <td> uses rowspan="2", how does that affect the number of cells the following <tr> needs?

A rowspan="2" cell in one row visually occupies that same column position in the NEXT row too, so the following should have one fewer / in its markup than it otherwise would, since that column slot is already filled by the spanning cell from the row above. Forgetting this is a common source of misaligned table columns.

Related Functions

table-tagtr-tagth-tag