HTML <td> Tag

The <td> tag defines a standard data cell in an HTML table. It is used within a <tr> (table row) element and holds the actual content of the table, which can be text, images, links, or any other HTML element. The <td> tag is an essential component for creating structured, tabular data on a webpage.

Syntax

<td colspan="number" rowspan="number" headers="id_value" abbr="text" scope="row|col|rowgroup|colgroup" align="left|center|right|justify" valign="top|middle|bottom|baseline"  nowrap="nowrap">
  Content
</td>

Attributes

Example

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

More Examples

Basic Table with Headings

This example uses <th> for header cells and <td> for data cells.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>30</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>25</td>
      <td>London</td>
    </tr>
  </tbody>
</table>

Table with Rowspan and Colspan

This example demonstrates the use of rowspan and colspan to create more complex layouts.

<table>
  <tr>
    <td rowspan="2">Combined cells</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
  </tr>
    <tr>
      <td colspan="2"> Spanning two columns</td>
    </tr>
</table>

Table with images and links

<table>
  <tr>
    <td><img src="image1.jpg" alt="Image 1" width="50"></td>
    <td><a href="link1.html">Link 1</a></td>
  </tr>
  <tr>
    <td><img src="image2.jpg" alt="Image 2" width="50"></td>
    <td><a href="link2.html">Link 2</a></td>
  </tr>
</table>

Styling with CSS

Using CSS is the modern way to style the appearance of table cells.

<table style="width:100%; border-collapse: collapse;">
  <tr >
    <td style="border: 1px solid black; padding: 8px; text-align:center;">Data 1</td>
     <td style="border: 1px solid black; padding: 8px; text-align:right; color:blue;">Data 2</td>
   </tr>
    <tr>
        <td style="border: 1px solid black; padding: 8px; text-align:left; font-weight:bold;">Data 3</td>
      <td style="border: 1px solid black; padding: 8px; text-align:center; background-color:#f0f0f0;">Data 4</td>
  </tr>
</table>

Browser Support

The <td> tag is supported by all modern browsers:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Notes and Tips

• While attributes like align, valign, and nowrap are still supported, it's strongly recommended to use CSS for styling instead for better separation of concerns and more control over the presentation.
• Using semantic HTML with <th> for header cells and <td> for data cells enhances accessibility and SEO.
• When using rowspan and colspan, be careful to ensure that the table structure remains understandable. Overusing these attributes can make tables difficult to manage.
• For more complex table layouts, consider using CSS Grid or Flexbox to achieve similar structures, which are often more flexible.
• Always provide alternate text (alt) for images inside table cells for accessibility purposes.
• Table headers associated to <td> can be linked by assigning id to <th> tags and using headers attributes inside <td> tags for accessibility purposes, especially on complex table scenarios.