Tag td

The <td> tag in HTML defines a standard data cell within a table row (<tr>). It holds the actual content of the table—numbers, text, images, or other elements—and is fundamental to organizing data in rows and columns.

📌 What Is the <td> Tag?

  • <td> stands for table data.
  • It represents a single cell in a table row.
  • Usually placed inside a <tr> (table row) element.
  • Displays data that corresponds to headers (<th>) in the same column.

✅ Basic Syntax

<table>
  <tr>
    <td>Apple</td>
    <td>$1.00</td>
  </tr>
</table>

🧪 Example 1: Simple Table Row with <td>

<table border="1">
  <tr>
    <td>John Doe</td>
    <td>25</td>
    <td>Engineer</td>
  </tr>
</table>

🧩 Attributes of <td>

AttributeDescription
colspanDefines how many columns the cell should span (merge)
rowspanDefines how many rows the cell should span (merge)
headersAssociates cell with header cells (for accessibility)
abbrProvides an abbreviation for the cell’s content

🧪 Example 2: Using colspan and rowspan

<table border="1">
  <tr>
    <td rowspan="2">Alice</td>
    <td>Math</td>
    <td>90</td>
  </tr>
  <tr>
    <td>Science</td>
    <td>85</td>
  </tr>
  <tr>
    <td colspan="2">Average Score</td>
    <td>87.5</td>
  </tr>
</table>

🎨 Styling <td>

By default, browsers add padding inside cells. You can customize:

td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: center;
}

⚠️ Accessibility Tips

  • Use headers attribute when the table has complex layouts to link data cells with their headers.
  • Prefer <th> for header cells; use <td> for data.
  • Avoid using tables for layout purposes; tables should display data only.

🏁 Summary

The <td> tag is the core building block for data cells in HTML tables. Its attributes allow flexible cell merging and accessibility improvements, making tabular data easy to understand and well-structured.