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
Output:
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.
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.
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.
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 | IE | Firefox | Opera | Safari |
<td> | Yes | Yes | Yes | Yes | Yes |