<td></td> tag HTML

Example

HTML A simple code example of <td> tag

<table>
    <tr>
      <td>Espresso</td>
      <td>masala tea</td>
    </tr>
    <tr>
      <td>Latte</td>
      <td>Saffron tea</td>
    </tr>
</table>

Laboratory

description & Usage

The <td> tag forms the cells of the <table> tag.

The text inside the <td> tag is left aligned by default.

Browser compatibility and Support

#	Chrome	Edge	Firefox	Safari	Opera
<td>

Attributes

Attributes	Values	Description
colspan	number	en
headers	header-id	en
rowspan	number	en

Global Attributes

The td tag supports the HTML Global Attributes.

Event Attributes

The td tag supports the HTML Event Attributes.

More Examples

Example

HTML <td> tag with custom style -Example #1

<table style="width:100%">
    <tr>
        <th>Coffee</th>
        <th>Tea</th>
    </tr>
    <tr>
        <td>Espresso</td>
        <td style="text-align:right">masala tea</td>
    </tr>
    <tr>
        <td>Latte</td>
        <td style="text-align:right">Saffron tea</td>
    </tr>
</table>

Laboratory

Example

HTML <td> tag with custom style -Example #2

<head>
    <style>
        table, th, td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <table style="width:100%">
        <tr>
            <th>Coffee</th>
            <th>Tea</th>
        </tr>
        <tr>
            <td>Espresso</td>
            <td style="text-align:right">masala tea</td>
        </tr>
        <tr>
            <td>Latte</td>
            <td style="text-align:right">Saffron tea</td>
        </tr>
    </table>
</body>

Laboratory

Example

HTML <td> tag with custom style -Example #3

<tr>
    <th>Coffee</th>
    <th>Tea</th>
</tr>
<tr>
    <td style="background-color: #38ff00;">Espresso</td>
    <td style="background-color: #ffa700;">masala tea</td>
</tr>
<tr>
    <td style="background-color: #19d4ff;">Latte</td>
    <td style="background-color: #7d3ab5;">Saffron tea</td>
</tr>

Laboratory

Example

HTML <td> tag with custom style -Example #4

<tr>
    <th>Coffee</th>
    <th>Tea</th>
</tr>
<tr>
    <td style="height:100px">Espresso</td>
    <td style="height:100px">masala tea</td>
</tr>
<tr>
    <td style="height:100px">Latte</td>
    <td style="height:100px">Saffron tea</td>
</tr>

Laboratory

Example

HTML <td> tag with custom style -Example #5

<tr>
	<th>HTML</th>
</tr>
<tr>
	<td style="white-space:nowrap">HTML: Web markup language for structuring and communicating content on web pages</td>
</tr>

Laboratory

Example

HTML <td> tag with custom style -Example #6

<table style="width:25%;">
<tr>
    <th>Coffee</th>
    <th>Tea</th>
</tr>
<tr style="height:100px">
    <td style="vertical-align:bottom">Espresso</td>
    <td style="vertical-align:bottom">masala tea</td>
</tr>

Laboratory

Example

HTML <td> tag with custom style -Example #7

<table style="width:100%;">
<tr>
    <th>Coffee</th>
    <th>Tea</th>
</tr>
<tr>
    <td style="width:65%;">Espresso</td>
    <td style="width:35%;">masala tea</td>
</tr>

Laboratory

Example

HTML <td> tag with custom style -Example #8

<head>
    <style>
        tbody, th, td{
        	border: 1px solid black;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>name</th>
            <th>email</th>
            <th>tel</th>
        </tr>
        <tr>
            <td>ali heydari</td>
            <td>aliheydari@gmail.com</td>
            <td>09124552545</td>
        </tr>
    </table>
    <hr>
    <table>
        <tr>
            <th>name</th>
            <td>ali heydari</td>
        </tr>
        <tr>
            <th>email</th>
            <td>aliheydari@gmail.com</td>
        </tr>
        <tr>
            <th>tel</th>
            <td>09124552545</td>
        </tr>
    </table>
</body>

Laboratory

Example

HTML The <td> tag using the <caption> tag - Example #9

<table>
    <caption>All kinds of tea and coffee</caption>
    <tr>
        <th>Coffee</th>
        <th>Tea</th>
    </tr>
    <tr>
        <td>Espresso</td>
        <td>masala tea</td>
    </tr>
    <tr>
        <td>Latte</td>
        <td>Saffron tea</td>
    </tr>
</table>

Laboratory

Default CSS

Most browsers will display the td tag with the following default style:

td {
    display: table-cell;
    vertical-align: inherit;
}