`<td>` - table data cell

Basics of the <td> Tag

The <td> tag is a core element in HTML tables, used to define table data cells. It must be nested within a <tr> (table row) tag and, together with <th> (table header cell), forms the basic structure of table content. A typical table consists of multiple <td> cells, with each cell representing the data at the intersection of a row and column.

<table border="1">  
  <tr>  
    <td>Apple</td>  
    <td>Red</td>  
    <td>5kg</td>  
  </tr>  
</table>  

Detailed Explanation of Core Attributes

colspan and rowspan

These attributes control the merging of cells across columns or rows:

• colspan="2" merges the cell horizontally across two columns.
• rowspan="3" merges the cell vertically across three rows.

<table border="1">  
  <tr>  
    <td colspan="2">Merged Two Columns</td>  
    <td>Normal Cell</td>  
  </tr>  
  <tr>  
    <td rowspan="2">Merged Two Rows</td>  
    <td>A</td>  
    <td>B</td>  
  </tr>  
  <tr>  
    <td>C</td>  
    <td>D</td>  
  </tr>  
</table>  

headers Attribute

Used to associate table header cells for better accessibility. The value corresponds to the id of the <th>:

<table>  
  <tr>  
    <th id="name">Name</th>  
    <th id="age">Age</th>  
  </tr>  
  <tr>  
    <td headers="name">John</td>  
    <td headers="age">28</td>  
  </tr>  
</table>  

Other Important Attributes

• scope: Only valid in <th> but often used with <td>.
• abbr: Provides an abbreviated version of the cell content.
• align (deprecated): Use CSS text-align instead.
• valign (deprecated): Use CSS vertical-align instead.

Styling Practices

Basic Styling Example

Control cell appearance with CSS:

td {  
  padding: 12px 15px;  
  border-bottom: 1px solid #e0e0e0;  
  transition: background 0.3s;  
}  

td:hover {  
  background-color: #f5f5f5;  
}  

Responsive Table Handling

Make cells stack on small screens:

@media (max-width: 600px) {  
  td {  
    display: block;  
    border: none;  
    position: relative;  
    padding-left: 50%;  
  }  

  td::before {  
    content: attr(data-label);  
    position: absolute;  
    left: 10px;  
    font-weight: bold;  
  }  
}  

Dynamic Content Handling

JavaScript Interaction Example

Modify cell content via DOM manipulation:

// Get the first td of the second tr  
const cell = document.querySelector('tr:nth-child(2) td:first-child');  

// Update content  
cell.textContent = 'Updated Value';  

// Add CSS class  
cell.classList.add('highlight');  

// Dynamically calculate and display data  
const priceCells = document.querySelectorAll('.price');  
priceCells.forEach(cell => {  
  const quantity = cell.previousElementSibling.textContent;  
  cell.textContent = quantity * 10 + '¥';  
});  

Advanced Use Cases

Nested Table Structure

Embed sub-tables within cells:

<table>  
  <tr>  
    <td>  
      Main Data  
      <table style="width:100%">  
        <tr>  
          <td>Sub-table A</td>  
          <td>Sub-table B</td>  
        </tr>  
      </table>  
    </td>  
  </tr>  
</table>  

Combining with Form Elements

Create editable table cells:

<table>  
  <tr>  
    <td contenteditable="true">Directly Editable</td>  
    <td>  
      <input type="text" value="Form Input">  
    </td>  
  </tr>  
</table>  

Performance Optimization Tips

1. Avoid Excessive Nesting: Deep table hierarchies reduce rendering performance.
2. Use scope Attribute: Clarify cell relationships.
3. Virtual Scrolling: Render only visible cells for large datasets.
4. Optimize CSS Selectors: Avoid complex selectors for cells.

// Virtual scrolling example  
const table = document.getElementById('large-table');  
table.addEventListener('scroll', function() {  
  const visibleRows = Math.ceil(table.clientHeight / rowHeight);  
  // Render only visible cells  
});  

Accessibility Best Practices

1. Always add <caption> to data tables.
2. Use headers and id for complex tables.
3. Ensure sufficient color contrast in cells.
4. Provide ARIA labels for non-text content like icon buttons.

<table>  
  <caption>Monthly Sales Data</caption>  
  <tr>  
    <th id="month">Month</th>  
    <th id="sales">Sales</th>  
  </tr>  
  <tr>  
    <td headers="month">January</td>  
    <td headers="sales" aria-label="January Sales">¥15,000</td>  
  </tr>  
</table>  

Modern CSS Techniques

Using CSS Grid for Layout

table {  
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));  
}  

tr {  
  display: contents;  
}  

td {  
  grid-column: span 1;  
  /* Special cell spanning */  
  &.wide {  
    grid-column: span 2;  
  }  
}  

Sticky Table Headers

thead th {  
  position: sticky;  
  top: 0;  
  background: white;  
  box-shadow: 0 2px 2px -1px rgba(0,0,0,0.4);  
}  

Common Problem Solutions

Text Overflow Handling

td {  
  white-space: nowrap;  
  overflow: hidden;  
  text-overflow: ellipsis;  
  max-width: 200px;  
}  

Zebra Striping

tr:nth-child(even) td {  
  background-color: #f9f9f9;  
}  

Cell Border Merging

table {  
  border-collapse: collapse;  
}  

td {  
  border: 1px solid #ddd;  
}  

Browser Compatibility Notes

1. All modern browsers fully support <td>.
2. Older IE versions may handle colspan/rowspan differently.
3. Mobile browsers may treat fixed-width tables inconsistently.
4. Print styles require special consideration:

@media print {  
  td {  
    background-color: transparent !important;  
    page-break-inside: avoid;  
  }  
}