HTML `` Element: Creating and Styling Data Cells in Tables

Learn how to use the HTML `` (table data cell) element to structure and present data within your HTML tables. This tutorial explains its purpose, key attributes (`colspan`, `rowspan`, etc.), and demonstrates styling table data cells using CSS for creating visually appealing and well-organized tables.

Understanding the HTML <td> Element

What is the <td> Element?

The HTML <td> tag (table data cell) defines a standard data cell in an HTML table. Tables consist of two cell types: header cells (<th>) and data cells (<td>). Data cells contain the table's actual data. By default, text within a <td> is left-aligned and regular text.

Basic Table Example:

HTML

<table>
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
  <tr>
    <td>Cell C</td>
    <td>Cell D</td>
  </tr>
</table>

<td> Attributes

The <td> element supports several attributes:

Attribute Value Description
colspan number Specifies how many columns the cell should span.
headers header_id Links the cell to one or more header cells (using their IDs).
rowspan number Specifies how many rows the cell should span.

In addition to these, <td> also supports standard global and event attributes.

Styling <td> Elements with CSS

You can style table data cells using CSS to control alignment, background colors, padding, and more. This gives you fine-grained control over the visual appearance of your tables.

Examples:

  • Text alignment (text-align)
  • Background color (background-color)
  • Cell height (height)
  • Preventing word wrapping (white-space: nowrap;)
  • Vertical alignment (vertical-align)
  • Cell width (width)