Home » HTML td Tag

HTML <td> tag

HTML <td> tag is used to specify the cells of an HTML table which contain data of the table. The <td> tag must be the child element of <tr> (table row) tag. Each table row can contain multiple <td> data elements.

The grouped <td> elements of a <tr> tag renders as a single row in the table. The content of the <td> elements is regular and left-aligned in the table by default.

Syntax

Display Inline
Start tag/End tag Start and End tag
Usage Table content

Example

Test it Now

Output:

HTML td tag

Fixed column width using <td> tag in a table

In an HTML table, the dimensions of the rows and columns in a table are automatically adjusted by the browser so that the contents fit in the row. However, there can be a situation where the width of the columns needs to be fixed or equal-sized. So there are various techniques to fix the width of the column.

<td> tag width attribute: The <td> tag width attribute is used to fix the width of a particular column. With this, we can assign a numeric value to this attribute or in terms of percentage.

Following is an example of fixing the column width using the <td> tag width attribute.

Example 1

Explanation:

In the above example, we have created an example of fixing the column width using the <td> tag width attribute.

Output:

Following is the output of this example.

HTML td tag

Example 2:

Explanation:

In the above example, we have created an example of equal size column width using <td> tag.

Output:

Following is the output of this example.

HTML td tag

Fixed column width using <col> tag in a table

<col> tag: The <col> tag in a table is used to fix the width of a particular column. With this, we can assign a numeric value to this attribute or in terms of percentage.

Following is an example of how to fix the column width using the <col> tag.

Example 1:

Explanation:

In the above example, we have created an example of fixing the column width using the <col> tag.

Output:

Following is the output of this example.

HTML td tag

Attribute:

Tag-specific attributes:

Attribute Value Description
abbr text It defines the abbreviated version of content of the cell. (Not Supported in HTML5)
align left
right
center
justify
char
It specifies the alignment of the content of the cell. (Not Supported in HTML5)
axis category_name It Categorizes Cells. . (Not Supported in HTML5)
bgcolor rgb(x,x,x)
#xxxxxx
Color_name
It sets the background color of the cell. (Not Supported in HTML5)
char character It specifies the alignment of the content of cell to the character. (Not Supported in HTML5)
charoff number It determines the number of characters the content aligned from the character specified by the char attribute. (Not Supported in HTML5)
colspan number It determines the number of columns a cell should span.
headers header_id It determines one or more header cells to which a cell is related.
height %
pixels
It determines the height of a table cell. (Not Supported in HTML5)
nowrap nowrap If it sets then content inside the cell should not wrap. (Not Supported in HTML5)
rowspan number It determines the number of rows a cell should span.
scope col
colgroup
row
rowgroup
It specifies the cells that the header element relates to. (Not Supported in HTML5)
valign top
middle
bottom
baseline
It determines the vertical alignment of the cell content. (Not Supported in HTML5)
width %
pixels
It determines the width of the cell.(Not Supported in HTML5)

Global attribute:

The <td> tag supports the Global attributes in HTML.

Event attribute:

The <td> tag supports the Event attributes in HTML.

Supporting Browsers

Element chrome browser Chrome ie browser IE firefox browser Firefox opera browser Opera safari browser Safari
<td> Yes Yes Yes Yes Yes

Next TopicHTML template Tag

You may also like