HTML <td> tagS2C Home   « HTML <td> tag

Definition

The <td> tag is used to define a table cell within a table and must be enclosed within the <tr></tr> element.

Example


<table>
  <tr>
    <th>Fruit</th>
    <th>Colour</th>
  </tr>
  <tr>
    <td>Banana</td>
    <td>Yellow</td>
  </tr>
  <tr>
    <td>Pea</td>
    <td>Green</td>
  </tr>
</table>

Required Attributes

NONE

Optional Attributes

axis no browser support - specifies a relationship between columns.

bgcolor this attribute is deprecated - use CSS instead.

char no browser support - specifies character to align cells to.

charoff no browser support - specifies offset of char character in pixels.

height this attribute is deprecated - use CSS instead.

nowrap this attribute is deprecated - use CSS instead.

width this attribute is deprecated - use CSS instead.

abbr specifies abbreviated version of a cells contents.


<td abbr="someValue">Table data content here</td> 

align specifies the horizontal alignment of cell contents.


<td align="left">Table data content here</td>   <!-- align content to the left -->
<td align="center">Table data content here</td>   <!-- align content in the centre -->
<td align="right">Table data content here</td>   <!-- align content to the right -->
<td align="justify">Table data content here</td>   <!-- stretch contents to width -->
<td align="char">Table data content here</td>   <!-- align content to a character -->

colspan specifies the number of columns a heading should span.


<td colspan="3">Table data content here</td>

headers specifies a table header related to a cell.


<td headers="someValue">Table data content here</td> 

rowspan specifies the number of rows a heading should span.


<td rowspan="3">Table data content here</td>

scope specifies a way to associate columns and rows with heading information.


<td scope="col">Table data content here</td>   <!-- cell is a column header -->
<td scope="colgroup">Table data content here</td>   <!-- cell is a column group header -->
<td scope="row">Table data content here</td>   <!-- cell is a row header -->
<td scope="rowgroup">Table data content here</td>   <!-- cell is a row group header -->

valign specifies the vertical alignment of cell contents.


<td valign="top">Table data content here</td>   <!-- align content to the top -->
<td valign="middle">Table data content here</td>   <!-- align content in the middle -->
<td valign="bottom">Table data content here</td>   <!-- align content to the bottom -->
<td valign="baseline">Table data content here</td>   <!-- bottom align different fonts -->

Common Attributes

class - specifies a classname for the element allowing you to apply the style of the predefined class to the content.


<td class="classname">Table data content here</td>

id - specifies a unique id for the element allowing you to apply the style of the predefined id to the content.


<td id="idname">Table data content here</td>

style - specifies an inline style for the element allowing you to apply the style to the content.


<td style="color:red;text-align:left">Table data content here</td>

title - specifies extra information about the content.


<td title="information about the content">Table data content here</td>

Language Attributes

dir - specifies the directional flow of the content.


<!-- The text will flow from left to right -->
<td dir="ltr">Table data content here</td>

<!-- The text will flow from right to left -->
<td dir="rtl">Table data content here</td>

lang - specifies a language code for the content of the element.


<td lang="en">Table data content here</td>

xml:lang - specifies a language code for the content of the element in XHTML documents.


<td xml:lang="fr">Table data content here</td>

Document Event Attributes

NONE

Form Event Attributes

NONE

Image Event Attributes

NONE

Keyboard Event Attributes

onkeydown - The JavaScript code to be run when an element is in focus and keyboard key is pressed.


<!-- Executes the go() function -->
<td onkeydown="go()">Table data content here</td>

onkeypress - The JavaScript code to be run when an element is in focus and keyboard key is pressed down and released.


<!-- Executes the go() function -->
<td onkeypress="go()">Table data content here</td>

onkeyup - The JavaScript code to be run when an element is in focus and keyboard key is released.


<!-- Executes the go() function -->
<td onkeyup="go()">Table data content here</td>

Mouse Event Attributes

onclick - The JavaScript code to be run when a mouse is clicked on the element.


<!-- Executes the go() function -->
<td onclick="go()">Table data content here</td>

ondblclick - The JavaScript code to be run when a mouse is double clicked on the element.


<!-- Executes the go() function -->
<td ondblclick="go()">Table data content here</td>

onmousedown - The JavaScript code to be run when the mouse button is pressed down while the cursor is over the element.


<!-- Executes the go() function -->
<td onmousedown="go()">Table data content here</td>

onmousemove - The JavaScript code to be run when the mouse button is moved.


<!-- Executes the go() function -->
<td onmousemove="go()">Table data content here</td>

onmouseout - The JavaScript code to be run when the mouse cursor moves off an element.


<!-- Executes the go() function -->
<td onmouseout="go()">Table data content here</td>

onmouseover - The JavaScript code to be run when the mouse cursor moves over an element.


<!-- Executes the go() function -->
<td onmouseover="go()">Table data content here</td>

onmouseup - The JavaScript code to be run when the mouse button is released while the cursor is over the element.


<!-- Executes the go() function -->
<td onmouseup="go()">Table data content here</td>

go to home page Homepage go to top of page Top