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

نمونه کد

یک مثال کد ساده با استفاده از تگ‌های thead، tbody و tfoot در HTML

<table>
    <thead>
        <tr>
            <th>expenses</th>
            <th>amount spent</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>home rent</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>road fare</td>
            <td>$250</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Food</td>
            <td>$80</td>
        </tr>
    </tfoot>
</table>

آزمایشگاه

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

برای گروه بندی محتوای داخل بدنه تگ <table> از تگ <tbody> استفاده می کنیم.

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

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

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

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

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

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

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

نمونه کد

یک مثال کد ساده با استفاده از تگ‌های thead، tbody و tfoot در HTML با استایل اختصاصی- مثال شماره 1

<head>
    <style>
        thead {color:rgb(0 76 255);}
        tbody {color:rgb(255 0 233);}
        tfoot {color:#607D8B;}

        table, th, td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>expenses</th>
                <th>amount spent</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>home rent</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>road fare</td>
                <td>$250</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Food</td>
                <td>$80</td>
            </tr>
        </tfoot>
    </table>    
</body>

آزمایشگاه

نمونه کد

یک مثال کد ساده با استفاده از تگ‌های thead، tbody در HTML با استایل اختصاصی- مثال شماره 2

<table style="width:100%">
    <thead>
        <tr>
            <th>expenses</th>
            <th>amount spent</th>
        </tr>
    </thead>
    <tbody style="text-align:right">
        <tr>
            <td>home rent</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>road fare</td>
            <td>$250</td>
        </tr>
    </tbody>
</table>

آزمایشگاه

نمونه کد

یک مثال کد ساده با استفاده از تگ‌ tbody در HTML با استایل اختصاصی- مثال شماره 3

<table style="width:50%">
      <tr>
          <th>expenses</th>
          <th>amount spent</th>
      </tr>
    <tbody style="vertical-align:bottom">
        <tr style="height: 100px;">
            <td>home rent</td>
            <td>$100</td>
        </tr>
        <tr style="height: 100px;">
            <td>road fare</td>
            <td>$250</td>
        </tr>
    </tbody>
</table>

آزمایشگاه

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

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

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

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

نمونه کد

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

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

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

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

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

نمونه کد

نمونه کد

نمونه کد

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

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