RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html-td-tag/ below:

HTML td Tag - GeeksforGeeks

HTML td Tag

Last Updated : 12 Jul, 2025

The <td> tag defines a standard data cell in an HTML table, used to contain content such as text, images, or numbers within a table row (<tr>).

HTML


 <html>
<body>
	<table>
		<tr>
			<td>Row 1, Cell 1</td>
			<td>Row 1, Cell 2</td>
		</tr>
		<tr>
			<td>Row 2, Cell 1</td>
			<td>Row 2, Cell 2</td>
		</tr>
	</table>
</body>
</html>

<table>: Defines the table container.
<tr>: Represents a table row.

Types of cells

Cells

Description

Header cells

It contains header information(tags used for this is <th>). The text in <th> elements is bold and centered for heading by default.

Standard cells

It contains data(tags used for this is <td>). The text in <td> elements are regular and left-aligned for data by default.

Attributes Values

Attributes Values

Description

rowspan

It specifies the number of rows covered by the cell.

colspan

It determines the number of columns covered by the cell.

It identifies the data cell uniquely in the table.

class

It specifies the CSS class to style the cell.

style

It gives the visual appearance of the cell through CSS properties.

There are many attributes supported by HTML4.1 but removed from HTML5 are listed below:

Removed from HTML 5

Description

abbr

This attribute is used as an abbreviated version of the text content in a header cell.

align

It sets the alignment the text content within the table.

axis

It categorizes header cells in the table.

bg color

It sets the background color of a header cell.

char

Aligns the content in a header cell to a character.

charoff

It is used to sets the number of characters that will be aligned from the character specified by the char attribute. The value of these attributes are in numeric form.

colspan

Number of columns a header cell should span.

headers

Specifies multiple header cells a cell is related to.

height

It sets the height of a header cell in the table.

nowrap

It specifies that the content inside a header cell should not wrap.

scope

It is used to specify the score of header content.

sorted

It is used to sort the direction of a column.

valign

It is used to set the vertical alignment of text content.

width

It is used to set the width of a header cell.

More Example of HTML td tag

Using rowspan to Merge Cells Vertically html


 <html>
<body>
	<table border="1">
		<tr>
			<th>Item</th>
			<th>Description</th>
		</tr>
		<tr>
			<td rowspan="2">Laptop</td>
			<td>Brand: XYZ</td>
		</tr>
		<tr>
			<td>Price: $999</td>
		</tr>
	</table>
</body>
</html>

In this Example:

The <td rowspan="2"> attribute makes the "Laptop" cell span two rows, effectively merging them vertically.
This technique is useful for grouping related information under a single category.

Styling Table Cells with Background Color and Padding HTML


 <html>
<head>
    <style>
        table {
            border-collapse: collapse;
        }
        td {
            border: 1px solid black;
            padding: 8px;
        }
        td:nth-child(even) {
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>Alice</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>25</td>
        </tr>
    </table>
</body>
</html>

In this Example:

padding: 8px;: Adds space inside each table cell.
background-color: #f9f9f9;: Adds a light grey background to every even-numbered table cell.
border: 1px solid black;: Adds a black border around each table cell.

Best Practices for HTML td tag

Use Proper Padding: Apply padding within <td> to improve readability and ensure text is not cramped against borders.
Add Borders for Clarity: Always include borders around table cells for clear separation of data, especially in tables with multiple rows and columns.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4