HTML Table Data Cell element Tutorial - Usage, Syntax, Attributes, faq and Example

INTRODUCTION

The <td> element is used to define table data cell within a table row (<tr>). It holds the actual content of the table.

<table border="1">
    <tr>
        <th scope="col">Name</th>
        <th scope="col">Age</th>
        <th scope="col">Country</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
        <td>USA</td>
    </tr>
    <tr>
        <td>Emma</td>
        <td>30</td>
        <td>UK</td>
    </tr>
</table>

Attributes

1. colspan

The colspan attribute in HTML is used to merge multiple columns in a table, allowing a single cell to extend across multiple columns.

The value of colspan attribute should be an non-negative integer indicating how many columns the cell spans or extends. Its default value is 1. Any value greater than 1000 is dismissed by browsers and defaults to 1 in such case.

<table>
  <thead>
    <tr>
        <th>Fruit</td>
        <th>Price</td>
        <th>Quantity</td>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Apple</td>
        <td>$1</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Banana</td>
        <td>$0.5</td>
        <td>100</td>
    </tr>
  </tbody> 
  <tfoot>
    <tr>
        <td>Total Cost</td>
        <td colspan="2">$100</td>
        
    </tr>
  </tfoot>   
</table>

2. headers

The headers attribute specifies which table headers (<th>) a table data cell (<td>) is associated with. This attribute Works alongside the id attribute in <th> elements.

Its value is a list of space-separated list of id attribute, with each corresponding to the <th> elements. It implies that an single table cell can be associated with multiple table headers when colspan or rowspan is used.

It improves accessibility by helping screen readers understand the relationship between data and headers.

<table>
 <thead>
  <tr>
    <th id="name">Name</th>
    <th id="age">Age</th>
    <th id="country">Country</th>
  </tr>
 </thead>
 <tbody>
  <tr>
    <td headers="name">John</td>
    <td headers="age">25</td>
    <td headers="country">USA</td>
  </tr>
  <tr>
    <td headers="name">Emma</td>
    <td headers="age">30</td>
    <td headers="country">UK</td>
  </tr>
 </tbody>
</table>

3. rowspan

The rowspan attribute in HTML is used to merge multiple rows in a table, allowing a single cell to extend across multiple rows.

The value of rowspan attribute should be an non-negative integer indicating how many rows the cell spans or extends. Its default value is 1. The maximum value is 65534. Any value greater than 65534 defaults to 65534 in such case. If the value is set to 0, the cell will extends to the end of the table.

<table>
    <tr>
        <th rowspan="2">Brand</th>
        <th rowspan="2">Model</th>
        <th colspan="2">Sales</th>
    </tr>
    <tr>
        <th>2023</th>
        <th>2024</th>
    </tr>
    <tr>
        <td rowspan="2">Toyota</td>
        <td>Corolla</td>
        <td>150,000</td>
        <td>160,000</td>
    </tr>
    <tr>
        <td>Camry</td>
        <td>120,000</td>
        <td>125,000</td>
    </tr>
    <tr>
        <td rowspan="2">Ford</td>
        <td>F-150</td>
        <td>200,000</td>
        <td>210,000</td>
    </tr>
    <tr>
        <td>Mustang</td>
        <td>90,000</td>
        <td>95,000</td>
    </tr>
</table>

Deprecated Attributes

The following attribute are Deprecated and is advised to not use them.

• abbr
• align
• axis
• bgcolor
• char
• charoff
• height
• scope
• valign
• width

Tag Omission

The start tag is required. The end tag can be omitted if it is directly followed by a <th> or <td> element or if its parent element contains no additional data.

Permitted parents

The permitted parent of <td> element is <tr> element.