The <td> tag defines a table data cell. It goes inside <tr>. Use <th> for header cells (bold) and <td> for data. Each row should have the same number of cells (or use colspan/rowspan).

<td>

Step 2: Table Data Cell Implementation

Example: <table><tr><th>Name</th><th>Score</th></tr><tr><td>Alice</td><td>95</td></tr></table>. <td> holds the content of a cell. Use thead/tbody for structure. <th> vs <td>: th = header, td = data.

<tr>
  <td>Alice</td>
  <td>95</td>
</tr>

Step 3: Table Data Cell Implementation

colspan and rowspan: <td colspan="2"> spans two columns. <td rowspan="2"> spans two rows. Use headers attribute on <td> to list associated th ids for screen readers.

<td colspan="2">Merged</td>

Step 4: Table Data Cell Implementation

In the browser, <td> cells render as normal-weight text. <th> is bold by default. Keep rows consistent; use colspan/rowspan when you need merged cells.

<table><tr><th>Name</th></tr><tr><td>Alice</td></tr></table>

Step 5: Table Data Cell Implementation

Checkpoint: Which element represents a data cell (not a header) in a table?

<td>

Step 6: Table Data Cell Implementation

Correct! <td> is for data cells. <th> is for header cells. Both go inside <tr>. Use colspan and rowspan on <td> to merge cells.

<td>Data</td>

Step 7: Table Data Cell Implementation

You now know <td>. Complete the challenges below to master table data cells!

td.html

1 / 7

📋

Tutor:The <td> tag defines a table data cell. It goes inside <tr>. Use <th> for header cells (bold) and <td> for data. Each row should have the same number of cells (or use colspan/rowspan).

⭐ 0 EXP

TD Mastery

Table data cells: td, colspan, rowspan, headers.

Concept 1: The TD Tag

The <td> tag defines a table data cell. It goes inside <tr>. Use <th> for header cells (bold) and <td> for data.

System Check

Which element represents a data cell (not a header) in a table?

Community Holo-Net

TD & Table Patterns

Using colspan, rowspan, headers? Share your patterns.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML <td> Tag

Pascual Vila

Frontend Instructor.

The <td> tag defines a table data cell. It must appear inside a <tr> (row). Use <th> for header cells (bold by default) and <td> for data. Each row should have a consistent number of cells, or use colspan and rowspan to merge cells.

colspan and rowspan

colspan makes a cell span multiple columns; rowspan spans multiple rows. Example: <td colspan="2"> or <td rowspan="2">. When you merge cells, omit the corresponding <td> or <th> in the next row or column.

Accessibility

Use the headers attribute on <td> to list the id values of associated <th> cells (space-separated). This helps screen readers associate data cells with their headers. Use scope on <th> as well.

TD Tag Glossary

<td>: Table data cell. Goes inside <tr>. Holds the content of one cell. Use <th> for header cells.
colspan / rowspan: colspan = number of columns the cell spans. rowspan = number of rows. Use on <td> or <th> to merge cells.
headers: Attribute on <td> listing space-separated id values of associated <th> cells. Improves accessibility for screen readers.

📖 INDEX