تگ <td></td> در html - وب سایت PNLdev

نمونه کد

HTML یک نمونه کد ساده از تگ <td>

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

آزمایشگاه

تعریف و کاربرد

تگ <td> سلول های تگ <table> را تشکیل می دهد.

متن داخل تگ <td> به طور پیش فرض در تراز چپ است.

برای اطلاعات بیشتر راجع به این تگ ها به صفحه ی آموزش table ها بروید.

سازگاری با مرورگر

#	کروم	ادج	فایرفاکس	سافاری	اپرا
<td>

ویژگی ها

ویژگی ها	مقادیر	توضیحات
colspan	number	تعداد ستون هایی که یک سلول در جدول محتوایی در آنها قرار می گیرد را مشخص می کند.
headers	header-id	یک و یا چند سلول سر صفحه را تعیین می کند که به یک سلول داخل جدول مربوط می شود.
rowspan	number	تعداد سطر هایی را که یک سلول در جدول محتوایی باید تحت پوشش قرار دهد را مشخص می کند.

ویژگی های سراسری

تگ td از ویژگی های سراسری HTML پشتیبانی می کند.

ویژگی های رویداد

تگ td از ویژگی های رویداد HTML پشتیبانی می کند.

نمونه کد های بیشتر

نمونه کد

تگ <td> در HTML با استایل اختصاصی- مثال شماره 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>

آزمایشگاه

نمونه کد

تگ <td> در HTML با استایل اختصاصی- مثال شماره 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>

آزمایشگاه

نمونه کد

تگ <td> در HTML با استایل اختصاصی- مثال شماره 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>

آزمایشگاه

نمونه کد

تگ <td> در HTML با استایل اختصاصی- مثال شماره 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>

آزمایشگاه

نمونه کد

تگ <td> در HTML با استایل اختصاصی- مثال شماره 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>

آزمایشگاه

نمونه کد

تگ <td> در HTML با استایل اختصاصی- مثال شماره 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>

آزمایشگاه

نمونه کد

تگ <td> در HTML با استایل اختصاصی- مثال شماره 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>

آزمایشگاه

نمونه کد

تگ <td> در HTML با استایل اختصاصی- مثال شماره 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>

آزمایشگاه

نمونه کد

تگ <td> با استفاده از تگ <caption> در HTML - مثال شماره 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>

آزمایشگاه

استایل css پیش فرض

بیشتر مرورگر ها تگ td را با استایل پیشفرض زیر نمایش می دهند:

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

تگ <td> در HTML <td></td> tag HTML

نمونه کد

تعریف و کاربرد

سازگاری با مرورگر

ویژگی ها

ویژگی های سراسری

ویژگی های رویداد

نمونه کد های بیشتر

نمونه کد

نمونه کد

نمونه کد

نمونه کد

نمونه کد

نمونه کد

نمونه کد

نمونه کد

نمونه کد

استایل css پیش فرض

تگ <td> در HTML
<td></td> tag HTML