Categories
Learn HTML

HTML td tag

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:

  1. accesskey: This attribute is used to assign an access key to the cell.
  2. class: This attribute is used to assign a class name to the cell.
  3. contenteditable: This attribute is used to indicate whether the content of the cell can be edited.
  4. data-*: This attribute is used to store custom data private to the page or application.
  5. dir: This attribute is used to specify the direction of the text within the cell.
  6. headers: This attribute is used to specify one or more header cells associated with the current data cell.
  7. hidden: This attribute is used to hide the cell.
  8. id: This attribute is used to assign a unique identifier to the cell.
  9. lang: This attribute is used to specify the language of the content within the cell.
  10. rowspan: This attribute is used to specify the number of rows that the cell should span.
  11. scope: This attribute is used to specify the scope of the header cell associated with the current data cell.
  12. style: This attribute is used to specify inline CSS styles for the cell.
  13. tabindex: This attribute is used to specify the tabbing order of the cell.
  14. title: This attribute is used to specify a tooltip for the cell.
  15. valign: This attribute is used to specify the vertical alignment of the content within the cell.
  16. 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:

  1. onblur: This event is triggered when the cell loses focus.
  2. onclick: This event is triggered when the cell is clicked.
  3. ondblclick: This event is triggered when the cell is double-clicked.
  4. onfocus: This event is triggered when the cell gains focus.
  5. onkeydown: This event is triggered when a key is pressed down while the cell has focus.
  6. onkeypress: This event is triggered when a key is pressed while the cell has focus.
  7. onkeyup: This event is triggered when a key is released while the cell has focus.
  8. onmousedown: This event is triggered when the mouse button is pressed down while the pointer is over the cell.
  9. onmousemove: This event is triggered when the mouse pointer moves while it is over the cell.
  10. onmouseout: This event is triggered when the mouse pointer moves out of the cell.
  11. onmouseover: This event is triggered when the mouse pointer moves over the cell.
  12. 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:

  1. abbr: This attribute is used to provide an abbreviated version of the content of the cell.
  2. 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.
  3. axis: This attribute is used to specify the categories to which the header cell associated with the current data cell belongs.
  4. bgcolor: This attribute is used to specify the background color of the cell. However, it is deprecated in HTML5 and should not be used.
  5. char: This attribute is used to specify the character used for aligning the content of the cell horizontally.
  6. charoff: This attribute is used to specify the number of characters used for aligning the content of the cell horizontally.
  7. colspan: This attribute is used to specify the number of columns that the cell should span.
  8. headers: This attribute is used to specify one or more header cells associated with the current data cell.
  9. 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.
  10. rowspan: This attribute is used to specify the number of rows that the cell should span.
  11. scope: This attribute is used to specify the scope of the header cell associated with the current data cell.
  12. valign: This attribute is used to specify the vertical alignment of the content within the cell.
  13. 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:

  1. The td tag is used to define a single data cell within a row of an HTML table.
  2. The content of the td tag can include text, images, links, and other HTML elements.
  3. The td tag can have various attributes, including global attributes, event attributes, and other attributes specific to the td tag.
  4. The colspan attribute can be used to make a cell span multiple columns, while the rowspan attribute can be used to make a cell span multiple rows.
  5. 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.
  6. The scope attribute can be used to specify the scope of a header cell associated with the current data cell.
  7. Some attributes, such as align, bgcolor, nowrap, and valign, are deprecated in HTML5 and should not be used.
  8. The td tag can be styled using CSS to control the appearance of the cell, including its size, color, and borders.
  9. The td tag should only be used within the context of an HTML table.
  10. 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:

  1. Chrome
  2. Internet Explorer (IE)
  3. Opera
  4. Safari (WebKit)
  5. Firefox (Gecko)
  6. Android
  7. Firefox Mobile (Gecko)
  8. Edge Mobile
  9. Opera Mobile
  10. 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.

  • HTML5
  • HTML4
  • XHTML

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.

  1. HTML5
  2. HTML4
  3. XHTML

 

 

 

HTML5 Document

Here’s an example of how to use the td tag in an HTML5 document to create a table with two rows and two columns:

<!DOCTYPE html>
<html>
<head>
<title>HTML5 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 we have not used any attributes with the td tag in this example. However, you can add various attributes to the td tag as needed, such as colspan, rowspan, headers, and scope, as well as various styling attributes.

 

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.