HTML <td> Tag
Syntax:
<td>........</td>
Types of cells:
Cells |
Description |
---|---|
It contains header information(tags used for this is <th>). The text in <th> elements is bold and centered for heading by default. |
|
Standard cells |
It contains data(tags used for this is <td>). The text in <td> elements are regular and left-aligned for data by default. |
Attributes Values :
Attributes Values |
Description |
---|---|
It specifies the number of rows covered by the cell. |
|
It determines the number of columns covered by the cell. |
|
It identifies the data cell uniquely in the table. |
|
It specifies the CSS class to style the cell. |
|
It gives the visual appearance of the cell through CSS properties. |
There are many attributes supported by HTML4.1 but removed from HTML5 are listed below:
Removed from HTML 5 |
Description |
---|---|
This attribute is used as an abbreviated version of the text content in a header cell. |
|
It sets the alignment the text content within the table. |
|
It categorizes header cells in the table. |
|
It sets the background color of a header cell. |
|
Aligns the content in a header cell to a character. |
|
It is used to sets the number of characters that will be aligned from the character specified by the char attribute. The value of these attributes are in numeric form. |
|
Number of columns a header cell should span. |
|
Specifies multiple header cells a cell is related to. |
|
It sets the height of a header cell in the table. |
|
It specifies that the content inside a header cell should not wrap. |
|
It is used to specify the score of header content. |
|
sorted |
It is used to sort the direction of a column. |
It is used to set the vertical alignment of text content. |
|
It is used to set the width of a header cell. |
Example 1: This example showcases the use of the <td>
tag within a table structure, emphasizing a simple representation of user data in a visually stylized manner using CSS for border and text color styling.
html
<!DOCTYPE html> < html > < head > < title >td tag</ title > < style > body { text-align: center; } h1 { color: green; } th { color: blue; } table, tbody, td { border: 1px solid black; border-collapse: collapse; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < h2 >td Tag</ h2 > < table > < thead > < tr > < th >Name</ th > < th >User Id</ th > </ tr > </ thead > < tbody > < tr > < td >Shashank</ td > < td >@shashankla</ td > </ tr > < tr > < td >w3wiki</ td > < td >@Beginner</ td > </ tr > </ tbody > </ table > </ center > </ body > </ html > |
Output:
Example 2 :In this example, we will change background color and set the height of table cell.
HTML
<!DOCTYPE html> < html > < head > < title >td tag</ title > </ head > < body > < center > < table border = "1" > < tr > < td style = "background-color: lightblue; height: 40p" > Cell 1 </ td > < td >Cell 2</ td > </ tr > </ table > </ center > </ body > </ html > |
Output:
Output
Example 3: In this example, we will change width of a table cell and vertical align content inside <td>.
HTML
<!DOCTYPE html> < html > < head > < title >td tag</ title > </ head > < body > < center > < table border = "1" style = "width:100%; border: 1px solid black; border-collapse: collapse;" > < tr > < th style = "width:50%" > Category </ th > < th style = "width:30%" > Amount </ th > < th style = "width:20%" > Percentage </ th > </ tr > < tr > < td style = "vertical-align:bottom; height:100px;" > Groceries </ td > < td style = "vertical-align:bottom" > Rs250 </ td > < td style = "vertical-align:bottom" > Rs50 </ td > </ tr > < tr > < td style = "vertical-align:bottom;" > Salary </ td > < td style = "vertical-align:bottom" > Rs200 </ td > < td style = "vertical-align:bottom" > 40 </ td > </ tr > </ table > </ center > </ body > </ html > |
Output:
Supported Browsers
- Google Chrome 1
- Edge 12
- Firefox 1
- Safari 12.1
- Opera 1
Contact Us