HTML <td> Tag
➔ An HTML table contains two types of cells. Header cells defined by <th> element and Data cells defined by <td> element.
➔ The top heading row represents the header that contain cells <th> for the table column name.
➔ The <td> element represents a cell in a table that contains data.
td tag syntax
<table>
<tr>
<th>Header text</th>
<th>Header text</th>
</tr>
<tr>
<td>Cell data</td>
<td>Cell data</td>
</tr>
</table>
Best use and good practice
➔ Using the TD tag is the ideal way to create data in tables.
➔ In HTML tables, td helps define the structure of a table along with other table elements where td actually holds the data.
➔ td means table data and acts as a data cell for the table.
➔ The td can contain text data, images, links, lists, or any other HTML element as child data.
➔ The td should be set inside the tr tag and the data should be rendered in a default text style with left alignment and normal font weight. Although the visual style of table data can be customized using CSS.
➔ The td tag example.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML td tag example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<h3>HTML td tag example</h3>
<p>The td tag contains the table data.</p>
<table>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
</tr>
<tr>
<td>1001</td>
<td>Maria</td>
<td>Petrov</td>
</tr>
<tr>
<td>1002</td>
<td>Lucas</td>
<td>Martin</td>
</tr>
</table>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Element Attributes
| Attribute | Value | Description |
|---|---|---|
colspan |
number | This specifies how many columns the cell extends. |
headers |
header_id | This attribute contains a list of strings corresponding to the id attribute of the th elements. |
rowspan |
number | This specifies how many rows the cell extends. |
Supported Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>,
<class>,
<contenteditable>,
<contextmenu>,
<data-*>,
<dir>,
<draggable>,
<dropzone>,
<hidden>,
<id>,
<lang>,
<spellcheck>,
<style>,
<tabindex>,
<title>,
<translate>.
Supported Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>,
<onautocomplete>,
<onautocompleteerror>,
<onblur>,
<oncancel>,
<oncanplay>,
<oncanplaythrough>,
<onchange>,
<onclick>,
<onclose>,
<oncontextmenu>,
<oncuechange>,
<ondblclick>,
<ondrag>,
<ondragend>,
<ondragenter>,
<ondragleave>,
<ondragover>,
<ondragstart>,
<ondrop>,
<ondurationchange>,
<onemptied>,
<onended>,
<onerror>,
<onfocus>,
<oninput>,
<oninvalid>,
<onkeydown>,
<onkeypress>,
<onkeyup>,
<onload>,
<onloadeddata>,
<onloadedmetadata>,
<onloadstart>,
<onmousedown>,
<onmouseenter>,
<onmouseleave>,
<onmousemove>,
<onmouseout>,
<onmouseover>,
<onmouseup>,
<onmousewheel>,
<onpause>,
<onplay>,
<onplaying>,
<onprogress>,
<onratechange>,
<onreset>,
<onresize>,
<onscroll>,
<onseeked>,
<onseeking>,
<onselect>,
<onshow>,
<onsort>,
<onstalled>,
<onsubmit>,
<onsuspend>,
<ontimeupdate>,
<ontoggle>,
<onvolumechange>,
<onwaiting>.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<tr>
<td>Lex</td>
<td>De Haan</td>
<td>AD_VP</td>
<td>17000</td>
</tr>
<tr>
<td>Bruce</td>
<td>Ernst</td>
<td>IT_PROG</td>
<td>6000</td>
</tr>
Click on the "Try it Now" button to see how it works.