HTML Table Cells - Web4learners

HTML table cells are used to display information inside an HTML table. A table cell can contain text, numbers, links, images, and other HTML elements. Table cells are arranged inside table rows to organize information into columns.

HTML provides two main elements for creating table cells: <td> for standard data cells and <th> for header cells. Understanding these elements helps you create structured tables for student records, employee details, product lists, and other types of data.

In this tutorial, you will learn how to create HTML table cells, add content, style cells with CSS, control spacing, merge cells, and work with practical examples.

What Is an HTML Table Cell?

An HTML table cell is an individual box inside a table that contains information. Each cell belongs to a table row created using the <tr> element.

For example, a table displaying student details may contain separate cells for a student’s name, age, and course.

<table>
  <tr>
    <td>Rahul</td>
    <td>21</td>
    <td>HTML</td>
  </tr>
</table>

In this example, the table contains one row and three data cells. Each <td> element represents a separate cell.

HTML Table Cell Elements

HTML provides two main elements for creating table cells.

Element	Description
`<td>`	Defines a standard table data cell
`<th>`	Defines a table header cell

The <td> element is used for ordinary data, while <th> identifies headings that describe related rows or columns.

HTML Table Data Cells

The <td> element stands for table data. It defines a standard cell inside an HTML table row.

You can use <td> to display text, numbers, prices, dates, links, images, and other content.

<table>
  <tr>
    <td>Apple</td>
    <td>₹100</td>
    <td>Available</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>₹60</td>
    <td>Available</td>
  </tr>
</table>

In this example, each row contains three data cells displaying the product name, price, and availability.

HTML Table Cells Example

The following example demonstrates how to create a complete HTML table using header cells and data cells.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Table Cells Example</title>
</head>
<body>

  <h2>Product Details</h2>

  <table>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
    <tr>
      <td>Keyboard</td>
      <td>₹800</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td>₹400</td>
      <td>10</td>
    </tr>
    <tr>
      <td>Monitor</td>
      <td>₹12,000</td>
      <td>3</td>
    </tr>
  </table>

</body>
</html>

The first row contains three header cells. The remaining rows contain data cells for the product name, price, and quantity.

HTML Table Cells with Text

You can place text directly inside a <td> element. This is useful for displaying names, descriptions, categories, and other textual information.

<table>
  <tr>
    <th>Name</th>
    <th>Department</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>Information Technology</td>
  </tr>
  <tr>
    <td>Priya</td>
    <td>Human Resources</td>
  </tr>
</table>

Each <td> element displays a piece of information associated with the corresponding column heading.

HTML Table Cells with Links

A table cell can contain an HTML link created using the <a> element. This is useful when displaying website addresses, document links, or navigation options inside a table.

<table>
  <tr>
    <th>Website</th>
    <th>Link</th>
  </tr>
  <tr>
    <td>Web4Learners</td>
    <td>
      <a href="https://web4learners.com/">Visit Website</a>
    </td>
  </tr>
</table>

In this example, the second cell contains a clickable link that opens the Web4Learners website.

HTML Table Cells with Images

You can also display images inside table cells using the <img> element. This is helpful for product catalogs, profile directories, and image galleries.

<table>
  <tr>
    <th>Product</th>
    <th>Image</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>
      <img src="laptop.jpg" alt="Laptop" width="100">
    </td>
  </tr>
</table>

The image appears inside the second cell. The src attribute specifies the image location, while alt provides alternative text if the image cannot be displayed or is being interpreted by assistive technology.

HTML Table Cells with CSS

CSS allows you to customize table cells by changing their borders, background colors, padding, alignment, and text appearance.

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #ccc;
    padding: 12px;
    text-align: left;
  }

  td {
    background-color: #f5f9ff;
  }
</style>

The th, td selector applies borders, padding, and text alignment to both header and data cells. The td selector adds a light background color to regular data cells.

HTML Table Cell Padding

Padding is the space between the content of a cell and its border. Adding padding improves readability by preventing text from appearing too close to the edges.

<style>
  td {
    padding: 15px;
    border: 1px solid #333;
  }
</style>

The padding: 15px declaration adds 15 pixels of internal space on all four sides of each data cell.

You can adjust the value to make cells more compact or spacious.

HTML Table Cell Alignment

You can use CSS to control the horizontal and vertical alignment of content inside table cells.

<style>
  td {
    text-align: center;
    vertical-align: middle;
    height: 60px;
  }
</style>

The text-align: center property centers content horizontally. The vertical-align: middle property aligns the content vertically within the cell.

Common alignment values include:

CSS Property	Value	Purpose
`text-align`	`left`	Aligns text to the left
`text-align`	`center`	Centers text horizontally
`text-align`	`right`	Aligns text to the right
`vertical-align`	`top`	Aligns content to the top
`vertical-align`	`middle`	Centers content vertically
`vertical-align`	`bottom`	Aligns content to the bottom

HTML Table Cells with Colspan

The colspan attribute allows a cell to span across multiple columns. It is useful when you need to display a heading or message across several columns.

<table>
  <tr>
    <th colspan="3">Student Information</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>21</td>
    <td>HTML</td>
  </tr>
</table>

The colspan="3" attribute makes the header cell occupy the width of three columns.

HTML Table Cells with Rowspan

The rowspan attribute allows a cell to span across multiple rows. It is useful when one piece of information applies to several rows.

<table>
  <tr>
    <th>Name</th>
    <th>Subject</th>
  </tr>
  <tr>
    <td rowspan="2">Priya</td>
    <td>HTML</td>
  </tr>
  <tr>
    <td>CSS</td>
  </tr>
</table>

In this example, the Priya cell spans two rows. The second row contains only the CSS cell because the name cell already occupies that position.

Difference Between HTML Table Cells and Table Rows

Table cells and table rows perform different functions in an HTML table.

Feature	Table Row (`<tr>`)	Table Cell (`<td>` or `<th>`)
Purpose	Groups cells into a row	Holds individual information
Position	Contains table cells	Appears inside a table row
Example	`<tr>...</tr>`	`<td>Rahul</td>`
Number	A row can contain multiple cells	Each cell represents one position in the row

A table row organizes cells horizontally, while each cell contains a specific heading or piece of data.

Common HTML Table Cell Mistakes

Avoid these common mistakes when working with HTML table cells:

Using <td> for headings when <th> is more appropriate.
Forgetting to place table cells inside a <tr> element.
Using incorrect colspan or rowspan values.
Adding too much content without providing enough space for readability.
Forgetting alternative text for meaningful images inside cells.
Using outdated HTML attributes for styling instead of CSS.
Creating inconsistent table structures that make information difficult to compare.

HTML Table Cells Best Practices

Follow these practices when creating table cells:

Use <td> for standard data and <th> for meaningful headers.
Apply CSS for borders, padding, colors, and alignment.
Use colspan and rowspan only when they improve the organization of information.
Keep the content clear and concise.
Add meaningful alt text to images when necessary.
Use semantic table elements to improve accessibility.
Test tables on mobile devices, especially when cells contain long text or images.

HTML Table Cells Exercises

Practice the following exercises to improve your understanding of HTML table cells.

Exercise 1: Create a table containing three columns: Name, Age, and City. Add three data rows.

Exercise 2: Create a product table with product names, prices, and images.

Exercise 3: Use CSS to add borders, padding, and centered text to all data cells.

Exercise 4: Create a table cell that spans two columns using colspan.

Exercise 5: Create a table cell that spans two rows using rowspan.