سربرگ های جداول HTML

سربرگ‌های جداول HTML

جداول HTML می‌تونن برای هر ستون یا سطر، یا برای چند ستون/سطر، سربرگ داشته باشن.

سربرگ‌های جداول HTML

سربرگ‌های جدول با عناصر <th> تعریف می‌شن. هر عنصر <th> یک سلول جدول رو نشون می‌ده.

مثال:

<table>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
</table>

سربرگ‌های عمودی جدول

برای اینکه از ستون اول به عنوان سربرگ جدول استفاده کنید، اولین سلول در هر سطر رو به عنوان یک عنصر <th> تعریف کنید:

مثال:

<table>
    <tr>
        <th>Firstname</th>
        <td>Jill</td>
        <td>Eve</td>
    </tr>
    <tr>
        <th>Lastname</th>
        <td>Smith</td>
        <td>Jackson</td>
    </tr>
    <tr>
        <th>Age</th>
        <td>94</td>
        <td>50</td>
    </tr>
</table>

تراز کردن سربرگ‌های جدول

به طور پیش‌فرض، سربرگ‌های جدول پررنگ و وسط‌چین هستن.

برای تراز کردن سربرگ‌های جدول به سمت چپ، از ویژگی CSS text-align استفاده کنید:

مثال:

th {
  text-align: left;
}

سربرگ برای چندین ستون

شما می‌تونید یک سربرگ داشته باشید که روی دو یا چند ستون امتداد پیدا کنه.

برای این کار، از ویژگی colspan روی عنصر <th> استفاده کنید:

مثال:

<table>
    <tr>
        <th colspan="2">Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
</table>

در فصل "Table colspan & rowspan" درباره colspan و rowspan بیشتر یاد می‌گیرید.

عنوان جدول (Table Caption)

می‌تونید یک عنوان به جدول اضافه کنید که به عنوان یک تیتر برای کل جدول عمل کنه.

برای اضافه کردن یک عنوان به جدول، از تگ <caption> استفاده کنید:

مثال:

<table style="width:100%">
    <caption>Monthly savings</caption>
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$50</td>
    </tr>
</table>