HTML: <td> tag
In this series of learning HTML, we will teach you how to use HTML td tag with proper syntax and lots of examples. Let’s start on the HTML td tag.
Description of HTML td tag
The HTML td
tag is used to define a standard cell within an HTML table. The td
tag should be used within a tr
(table row) element to define the contents of each cell in the row.
Here's an example of how to use the td tag in HTML:
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
In this example, the td
tag is used to define three cells within a single table row. When rendered in a web browser, it might look something like this:
| Cell 1 | Cell 2 | Cell 3 |
Note that the td
tag is commonly used in conjunction with the th
tag to define table headers and table data, respectively. The td
tag can be styled with CSS to control the appearance of the table cell, such as the background color, border, and font properties.
Syntax of HTML td tag
The HTML <td>
tag is used to define a cell within an HTML table. The syntax of the <td>
tag is as follows:
<tr>
<td>Cell content goes here</td>
</tr>
Here, the <td>
tag is used to define a single cell within a table row (<tr>
). The cell content is typically text or other HTML elements.
The <td>
tag is often used in conjunction with other table-related tags, such as <tr>
for table rows and <table>
for the overall table structure.
Example:
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Product A</td>
<td>$10.00</td>
</tr>
<tr>
<td>Product B</td>
<td>$12.50</td>
</tr>
<tr>
<td>Product C</td>
<td>$8.99</td>
</tr>
</table>
In this example, the <td>
tag is used to define the cells within each row of a table that displays product names and prices. Each row contains two cells, one for the product name and one for the price. The table also includes a header row (<th>
) that labels the columns.
Global Attributes
The td
tag in HTML is used to define a cell in an HTML table. It represents a single data cell within a row of a table. The following are the global attributes that can be used with the td
tag in HTML:
accesskey
: This attribute is used to assign an access key to the cell.class
: This attribute is used to assign a class name to the cell.contenteditable
: This attribute is used to indicate whether the content of the cell can be edited.data-*
: This attribute is used to store custom data private to the page or application.dir
: This attribute is used to specify the direction of the text within the cell.headers
: This attribute is used to specify one or more header cells associated with the current data cell.hidden
: This attribute is used to hide the cell.id
: This attribute is used to assign a unique identifier to the cell.lang
: This attribute is used to specify the language of the content within the cell.rowspan
: This attribute is used to specify the number of rows that the cell should span.scope
: This attribute is used to specify the scope of the header cell associated with the current data cell.style
: This attribute is used to specify inline CSS styles for the cell.tabindex
: This attribute is used to specify the tabbing order of the cell.title
: This attribute is used to specify a tooltip for the cell.valign
: This attribute is used to specify the vertical alignment of the content within the cell.width
: This attribute is used to specify the width of the cell.
Event Attributes
The td
tag in HTML is used to define a cell in an HTML table. It represents a single data cell within a row of a table. The following are the event attributes that can be used with the td
tag in HTML:
onblur
: This event is triggered when the cell loses focus.onclick
: This event is triggered when the cell is clicked.ondblclick
: This event is triggered when the cell is double-clicked.onfocus
: This event is triggered when the cell gains focus.onkeydown
: This event is triggered when a key is pressed down while the cell has focus.onkeypress
: This event is triggered when a key is pressed while the cell has focus.onkeyup
: This event is triggered when a key is released while the cell has focus.onmousedown
: This event is triggered when the mouse button is pressed down while the pointer is over the cell.onmousemove
: This event is triggered when the mouse pointer moves while it is over the cell.onmouseout
: This event is triggered when the mouse pointer moves out of the cell.onmouseover
: This event is triggered when the mouse pointer moves over the cell.onmouseup
: This event is triggered when the mouse button is released while the pointer is over the cell.
These event attributes can be used to trigger JavaScript functions that perform actions in response to user interactions with the cell, such as updating the content of the cell or submitting a form.
Other Attributes
In addition to the global attributes and event attributes, the td
tag in HTML can also have other attributes that are specific to the td
tag. These include:
abbr
: This attribute is used to provide an abbreviated version of the content of the cell.align
: This attribute is used to specify the horizontal alignment of the content within the cell. However, it is deprecated in HTML5 and should not be used.axis
: This attribute is used to specify the categories to which the header cell associated with the current data cell belongs.bgcolor
: This attribute is used to specify the background color of the cell. However, it is deprecated in HTML5 and should not be used.char
: This attribute is used to specify the character used for aligning the content of the cell horizontally.charoff
: This attribute is used to specify the number of characters used for aligning the content of the cell horizontally.colspan
: This attribute is used to specify the number of columns that the cell should span.headers
: This attribute is used to specify one or more header cells associated with the current data cell.nowrap
: This attribute is used to prevent the cell content from wrapping to the next line. However, it is deprecated in HTML5 and should not be used.rowspan
: This attribute is used to specify the number of rows that the cell should span.scope
: This attribute is used to specify the scope of the header cell associated with the current data cell.valign
: This attribute is used to specify the vertical alignment of the content within the cell.wrap
: This attribute is used to control whether or not the cell content can wrap to the next line. However, it is deprecated in HTML5 and should not be used.
It’s important to note that some of these attributes, such as align
, bgcolor
, and nowrap
, are deprecated and should not be used in modern HTML.
Notes on HTML td tag
Here are some important notes on the td
tag in HTML:
- The
td
tag is used to define a single data cell within a row of an HTML table. - The content of the
td
tag can include text, images, links, and other HTML elements. - The
td
tag can have various attributes, including global attributes, event attributes, and other attributes specific to thetd
tag. - The
colspan
attribute can be used to make a cell span multiple columns, while therowspan
attribute can be used to make a cell span multiple rows. - The
headers
attribute can be used to associate a data cell with one or more header cells, providing additional information about the data in the cell. - The
scope
attribute can be used to specify the scope of a header cell associated with the current data cell. - Some attributes, such as
align
,bgcolor
,nowrap
, andvalign
, are deprecated in HTML5 and should not be used. - The
td
tag can be styled using CSS to control the appearance of the cell, including its size, color, and borders. - The
td
tag should only be used within the context of an HTML table. - The
td
tag should be used for tabular data, not for layout purposes. For layout purposes, CSS should be used instead.
Browser Compatibility
The HTML td tag has essential support with the following browsers:
- Chrome
- Internet Explorer (IE)
- Opera
- Safari (WebKit)
- Firefox (Gecko)
- Android
- Firefox Mobile (Gecko)
- Edge Mobile
- Opera Mobile
- Safari Mobile
Examples of HTML td tag
We will discuss the <td> tag below, exploring examples of how to use the <td> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.
We will discuss the HTML time tag below, with some examples of how to use the time tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.
HTML 4.01 Transitional Document
Here’s an example of how to use the td
tag in an HTML 4.01 Transitional document to create a table with two rows and two columns:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HTML4 Table Example</title>
</head>
<body>
<table>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
In this example, we use the table
tag to create a table, and the tr
tag to define each row in the table. Within each row, we use the td
tag to define the cells in the row. In this case, we create a table with two rows and two columns, and we put some text in each cell.
Note that the HTML 4.01 Transitional doctype is used, which allows for the use of deprecated attributes such as align
, bgcolor
, and nowrap
with the td
tag. However, it is generally recommended to use the HTML5 doctype and avoid the use of deprecated attributes in modern HTML.
XHTML 1.0 Transitional Document
Here’s an example of how to use the td
tag in an XHTML 1.0 Transitional document to create a table with two rows and two columns:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Table Example</title>
</head>
<body>
<table>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
In this example, we use the table
tag to create a table, and the tr
tag to define each row in the table. Within each row, we use the td
tag to define the cells in the row. In this case, we create a table with two rows and two columns, and we put some text in each cell.
Note that in XHTML, all tags must be properly closed, so we have used the self-closing syntax for the br
tag. We have also used the XHTML doctype, which requires all tags to be lowercase and all attributes to be quoted.
XHTML 1.0 Strict Document
Here’s an example of how to use the td
tag in an XHTML 1.0 Strict document to create a table with two rows and two columns:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>XHTML Table Example</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<table>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
In this example, we use the table
tag to create a table, and the tr
tag to define each row in the table. Within each row, we use the td
tag to define the cells in the row. In this case, we create a table with two rows and two columns, and we put some text in each cell.
Note that in XHTML 1.0 Strict, all tags must be properly closed and all attribute values must be enclosed in quotes. In addition, the document must have a specified character encoding, which is done using a meta
tag.
XHTML 1.1 Document
Here’s an example of how to use the td
tag in an XHTML 1.1 document to create a table with two rows and two columns:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>XHTML Table Example</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
</head>
<body>
<table>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
In this example, we use the table
tag to create a table, and the tr
tag to define each row in the table. Within each row, we use the td
tag to define the cells in the row. In this case, we create a table with two rows and two columns, and we put some text in each cell.
Note that in XHTML 1.1, all tags must be properly closed and all attribute values must be enclosed in quotes. In addition, the document must have a specified character encoding, which is done using a meta
tag. Finally, the content-type
attribute of the meta
tag must specify the document’s MIME type as application/xhtml+xml
.