Welcome to HTML5-Tutorials

Our site offers a lot of HTML5 learning from absolutely beginning to advanced level.If you want to make a website with HTML,this site will completely guide you a lot.So learn HTML5 syntax and form of coding easily with this website.If you have any doubt,leave a message on us.We will return you so soon.This site includes innumerable number of references you need to do after studying their corresponding elements.

In this page,we will learn about HTML <td> tag.

Overview Content

1 Use of <td> tag
2 Example of <td> tag
3 Supported Browsers
4 Full code Example
5 Attributes of <td> tag
     5.1 abbr
     5.2 align
     5.3 axis
     5.4 bgcolor
     5.5 char
     5.6 charoff
     5.7 colspan
     5.8 headers
     5.9 height
     5.10 nowrap
     5.11 rowspan
     5.12 scope
     5.13 valign
     5.14 width

Use of <td> tag

The <td> tag defines a cell (not heading cell) that contains data of a table.
It should be defined within the <tr> element.

Some related elements of <td> element:
1. <tr>: It defines a table row.
2. <th>: It defines a table heading.
3. <caption>: It defines a table name.
4. <table>: It defines a HTML table.
5. <col>: It defines a column in table and used in defining the properties of each columns within <colgroup> element.
6. <colgroup>: It defines a group of columns in a table.
7. <thead>: It defines a set of rows that defines header section in a table.
8. <tbody>: It defines a set of rows that defines body section in a table.
9. <tfoot>: It defines a set of rows that defines foot section in a table.

Example of <td> tag

   <tr>
     <td> Tom </td>
     <td> $190 </td>
   </tr>

Supported Browsers.

Tag
<td> Yes Yes Yes Yes Yes

Full Code example

<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse:collapse;
}
table, th, td {
border:1px solid blue;
}
td {
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th> Name </th>
<th> Age </th>
</tr>
<tr>
<td> Tom </td>
<td> 21 </td>
</tr>
<tr>
<td> Bruce </td>
<td> 24 </td>
</tr>
</table>
</body>
</html>

Attributes of <td> tag

Tag Value Notes
abbr text It defines short abbreviated description of the cell's content.
align left
center
right
justify
char
It defines the horizontal alignment of the cell content with respect to its cell.
axis category_name It is used to classified cells.
bgcolor rgb(x,x,x)
#xxxxxx
color_name
It defines the background color of a cell.
char character It defines the alignment of the content to a character in a column.
charoff number It defines the number of characters the content will be aligned from the character specified by the char attribute.
colspan number It defines the number of columns that a cell should extend.
headers header_id It defines a list of space-separated strings.
height pixels It defines the height of the cell.
nowrap nowrap It defines the content inside a cell that should not wrap.
rowspan number It defines the number of rows that a cell should span.
scope col
colgroup
row
rowgroup
It defines the header of a cell(within the <th>) is related either with rows or columns or group of columns or rows.
valign top
middle
bottom
baseline
It defines the vertical alignment of the cell content with respect to its cell..
width pixels It defines the width of a cell.

1. abbr attribute

Explaination:The abbr attribute defines short abbreviated description of the cell's content.
The abbr attribute is not supported in HTML5.You can put the abbreviated texts inside the cell or either to the value of the title attribute.
You should know that this attribute has no visual effect on the ordinary web-browsers but helps in screen-reader.

Syntax:

<td abbr="text">

Example:

<table>
<tr>
<td abbr="name"> John Mayer </td>
<td abbr="expenditure"> $230 </td>
</tr>
</table>

Supported Browsers

Attribute
abbr Yes Yes Yes Yes Yes

2. align attribute

Explaination:The align attribute defines the horizontal alignment of the column-cell content with respect to its cell.
Default value without mentioning align attribute is left.
The align attribute is not supported in HTML5.Use CSS property - "text-align" like
<td style="text-align:center">

Syntax:

<td align="left | center | right | justify | char">

Example:

<table>
<tr>
<td align="center"> John Mayer </td>
<td align="left"> $230 </td>
</tr>
</table>

Supported Browsers

Attribute
align Yes Yes Yes Yes Yes
Attribute values
Attribute Notes
left It defines left alignment content.
center It defines center alignment content.
right It defines right alignment content.
justify It defines equal lines in length.
character It defines content alignment to a specific character.

3. axis attribute

Explaination:The axis attribute is used to define classified cells.
This attribute is not supported in HTML5.
According to W3C, it contains a list of space-separated strings. It also helps in defining group-related columns.

Syntax:

<td axis="category_name">

Example:

<table>
<tr>
<th axis="name"> First Name </th>
<th axis="name"> Last Name </th>
<th axis="age"> Age </th>
</tr>
<tr>
<td axis="name"> Tom </td>
<td axis="name"> Cruise </td>
<td axis="age"> 23 </td>
</tr>
</table>

Supported Browsers

Attribute
axis Yes Yes Yes Yes Yes

4. bgcolor attribute

Explaination:The bgcolor attribute defines the background-color of a cell.
This attribute is not supported in HTML5.Use CSS property "background-color" like
<td style="background-color:red">
Click here, to learn more about HTML color.

Syntax:

<td bgcolor="color_name | hex_number | rgb_number">

Example:

<table>
<tr>
<td bgcolor="red"> Tom </td>
<td bgcolor="blue"> 21 </td>
</tr>
</table>

Supported Browsers

Attribute
bgcolor Yes Yes Yes Yes Yes
Attribute values
Attribute Notes
colorname It defines the background-color with a color name like red, green etc.
hex_number It defines the background color with a hex code (like "#ff0700").
rgb_number It defines the background color with a rgb code (like "rgb(255,255,255)").

5. char attribute

Explaination: The char attribute defines the alignment of the content to a character in a column. This attribute is valid only when the align attribute is set to char.
This attribute is not supported in HTML5.Use CSS property instead.

Syntax:

<td char="character">

Example:

<table>
<tr>
<td> Tom </td>
<td align="char" char="."> 21 </td>
</tr>
</table>

Supported Browsers

Attribute
char Not Supported Not Supported Not Supported Not Supported Not Supported

6. charoff attribute

Explaination: The charoff attribute defines the number of characters the content will be aligned from the character specified by the char attribute.
This attribute is valid only when the align attribute is set to char.
This attribute is not supported in HTML5.Use CSS property instead.

Syntax:

<td charoff="number">

Example:

<table>
<tr>
<td align="char" char="." charoff="2"> Total </td>
<td> $230 </td>
</tr>
</table>

Supported Browsers

Attribute
charoff Not Supported Not Supported Not Supported Not Supported Not Supported
Attribute values
Attribute Notes
positive number It specifies alignment to the right of the character.
negative number It specifies alignment to the left of the character.

7. colspan attribute

Explaination:The colspan attribute defines the number of columns that a cell should extend.
Its default value is 1.Setting value greater than 1000 is invalid and set the value as default value(1).

Syntax:

<td colspan="number">

Example:

<table>
<tr>
<td> Tom </td>
<td> $130 </td>
</tr>
<tr>
<td> John </td>
<td> $100 </td>
</tr>
<tr>
<td colspan="2"> Sum:$230 </td>
</tr>
</table>

Supported Browsers

Attribute
colspan Yes Yes Yes Yes Yes

8. headers attribute

Explaination:The headers attribute defines a list of space-separated strings.
Each value corresponds with the value of the id attribute of the headers element.
Note that this attribute has no visual affect on the ordinary web-browsers but helps in screen readers.

Syntax:

<td headers="headers_id">

Example:

<table>
<tr>
<th id="name"> First Name </th>
<th id="name"> Last Name </th>
<th id="age"> Age </th>
</tr>
<tr>
<td headers="name"> Tom </td>
<td headers="name"> Cruish </td>
<td headers="age"> 21 </td>
</tr>
</table>

Supported Browsers

Attribute
headers Yes Yes Yes Yes Yes

9. height attribute

Explaination:The height attribute defines the height of the cell.
A table cell occupies space that has required to display the content.
The height attribute is not supported in HTML5.Use CSS property - "height" like
<td style="height:100px">

Syntax:

<td height="pixels | %">

Example:

<table>
<tr>
<td height="100"> Tom </td>
<td height="100"> 21 </td>
</tr>
</table>

Supported Browsers

Attribute
height Yes Yes Yes Yes Yes
Attribute values
Attribute Notes
pixels It defines the height of the cell in pixel.
% It defines the height of the cell in %.

10. nowrap attribute

Explaination:The nowrap attribute is a boolean attribute.
It defines the content inside a cell that should not wrap.
The nowrap attribute is not supported in HTML5.Use CSS property - "white-space" like
<td style="white-space:nowrap">

Syntax:

<td nowrap>

Example:

<table>
<tr>
<td nowrap> John Mayer is taller than Tom Cruise. </td>
<td> Tom Cruise is taller than John Mayer. </td>
</tr>
</table>

Supported Browsers

Attribute
nowrap Yes Yes Yes Yes Yes

11. rowspan attribute

Explaination:The rowspan attribute defines the number of rows that a cell should span.
Its default value is 1.If 0 is set,it extends until the end of the table section.

Syntax:

<td rowspan="number">

Example:

<table>
<tr>
<td> John Mayer </td>
<td> $100 </td>
<td rowspan="2"> $ 200 </td>
</tr>
<tr>
<td> Tom Cruise </td>
<td> $100 </td>
</tr>
</table>

Supported Browsers

Attribute
rowspan Yes Yes Yes Yes Yes

12. scope attribute

Explaination:The scope attribute defines the header of a cell(within the <th>) is related either with rows or columns or group of columns or rows.
The scope attribute is not supported in HTML5.Use CSS property instead.

Syntax:

<td scope="row | column | rowgroup | colgroup">

Example:

<table>
<tr>
<th scope="col"> Name </td>
<th scope="col"> Expenditure </td>
</tr>
<tr>
<td> Tom Cruise </td>
<td> $130 </td>
</tr>
</table>

Supported Browsers

Attribute
scope Yes Yes Yes Yes Yes
Attribute values
Attribute Notes
row It defines the cells that the header relates to all cells of the row it belongs to.
col It defines the cells that the header relates to all cells of the column it belongs to.
rowgroup It defines the header belongs to a rowgroup and relates to all of its cells.
colgroup It defines the header belongs to a colgroup and relates to all of its cells.

13. valign attribute

Explaination: The valign attribute defines the vertical alignment of the cell content of column element.
This attribute is not supported in HTML5.Use CSS property "vertical-align" like
<td style="vertical-align:bottom">.

Syntax:

<td valign="top | middle | bottom | baseline">

Example:

<table>
<tr>
<td valign="bottom"> Tom </td>
<td valign="bottom"> $100 </td>
</tr>
</table>

Supported Browsers

Attribute
valign Yes Yes Yes Yes Yes
Attribute values
Attribute Notes
top It puts the text to the top of the cell as much as it can.
middle It puts the text to the center of the cell.
bottom It puts the text to the bottom of the cell as much as it can.
baseline It also puts the text to the bottom of the cell as much as it can but mainly align to the baseline of the characters
You will notice the difference between bottom and baseline when the font-sizes are of different sizes like Explain

With bottom attribute,Exclaim

With baseline attribute,Exclaim

14. width attribute

Explaination: The width attribute defines the width of a cell.
This attribute is not supported in HTML5.Use CSS property "width" like
<td style="width:100">.

Syntax:

<td width="pixels | %">

Example:

<table>
<tr>
<td width="40%"> Tom </td>
<td width="60%"> $130 </td>
</tr>
</table>

Supported Browsers

Attribute
width Yes Yes Yes Yes Yes
Attribute values
Attribute Notes
pixels It defines the width of a cell in pixels.
% It defines the width of a cell in %.