Difference between td and th in HTML

In HTML, <td> and <th> are both table cell elements used within <table> elements to organize and display tabular data. While they appear similar, they serve different purposes:

<td> (Table Data Cell)

• <td> is used to define a standard data cell within a table row (<tr>).
• It contains data that is typically displayed as regular content within the table.
• <td> cells are usually styled with default text alignment (left-aligned).
• Example:
  html

  <table>
<tr>
<td>John Doe</td>


  <td>30 years old</td>


  <td>Software Engineer</td>
</tr>
</table>


<th> (Table Header Cell)

• <th> is used to define header cells within a table row (<tr>).
• It represents a header or label for a group of <td> cells.
• <th> cells are typically bold and centered by default, indicating importance or categorization of data in the column or row.
• Example:
  html

  <table>
<tr>
<th>Name</th>

  
<th>Age</th>
<th>Occupation</th>

  
</tr>
<tr>
<td>John Doe</td>


  <td>30 years old</td>


  <td>Software Engineer</td>
</tr>
</table>


Key Differences:

1. Semantics: <td> is used for regular data cells, while <th> is used for header cells that describe the content of columns or rows.
2. Styling: <th> cells are typically rendered in bold and centered by default, distinguishing them visually from <td> cells.
3. Accessibility: Using <th> appropriately helps screen readers and other assistive technologies identify headers in tables, enhancing accessibility for users with disabilities.

Best Practices:

• Use <th> for Headers: Always use <th> for header cells (such as column or row headers) to provide semantic meaning and improve accessibility.
• Use <td> for Data: Use <td> for regular data cells that contain content related to the headers defined by <th>.
• Styling: You can customize the appearance of <th> and <td> cells using CSS to meet specific design requirements while maintaining their semantic roles.