/

HTML / CSS / JavaScript Tutorial

HTML Element: <td>

[this page | pdf | back links]

The HTML <td> element indicates a table cell (within a table row). They appear inside <tr> elements. HTML tables contain two types of cells, i.e. header cells (<th> elements) and standard cells (<td> elements), and the two are by default formatted differently.

 

The attributes it can take (in addition to HTML global attributes and HTML event attributes) are:

 

Attribute

Description

More

colspan

Number of columns a table cell should span

Here

headers

One or more header cells a cell is related to

Here

rowspan

Number of rows a table cell should span

Here

 

It used to support the abbr, align, axis, bgcolor, char, charoff, height, nowrap, scope, valign and width attributes, but these are no longer supported by HTML 5.

 

To create or access such an element in JavaScript see here. The corresponding HTML DOM object supports standard DOM properties and methods. The default style applicable to this element is shown here.

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
table,td,th,tr,caption {border: thin solid black; border-collapse: collapse;}
th {background-color: yellow;}
thead {color: blue}
tbody {color: black}
tfoot {color: green}
</style>
</head>
<body>
Created using HTML:<br>
<table>
    <tr><td>1</td><td>2</td></tr>
</table>

<br>Created using JavaScript:<br>
<span id="element"></span>

<script>
var y2b1 = document.createElement("TD"); y2b1.textContent = "1";
var y2b2 = document.createElement("TD"); y2b2.textContent = "2";
var y2b = document.createElement("TR"); y2b.appendChild(y2b1); y2b.appendChild(y2b2);
var x = document.createElement("TABLE");
x.appendChild(y2b)
document.getElementById("element").appendChild(x);
</script>

</body>
</html>


NAVIGATION LINKS
Contents | Prev | Next | HTML Elements


Desktop view | Switch to Mobile