جداول HTML

جداول HTML

جداول HTML به توسعه‌دهندگان وب اجازه می‌دهند تا داده‌ها را در سطرها و ستون‌ها مرتب کنند.

مثال

شرکت | تماس | کشور
---|---|---
آلفردز فوترکیسته | ماریا آندرس | آلمان
سنترو کومرشیال موکتزوما | فرانسیسکو چانگ | مکزیک
ارنست هندل | رولاند مندل | اتریش
آیلند تریدینگ | هلن بنت | بریتانیا
لافینگ باکوس واین‌سلارز | یوشی تناموری | کانادا
مگاتسینی آلیمنتاری ریونیتی | جیووانی روولی | ایتالیا

تعریف یک جدول HTML

یک جدول در HTML از خانه‌های جدول (cells) درون سطرها (rows) و ستون‌ها (columns) تشکیل شده است.

مثال

یک جدول ساده HTML:

<table>
    <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
    </tr>
    <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
    </tr>
</table>

خانه‌های جدول (Table Cells)

هر خانه جدول با تگ‌های <td> و </td> تعریف می‌شود. td مخفف "table data" (داده جدول) است. هر چیزی بین <td> و </td> محتوای یک خانه جدول است.

مثال

<table>
    <tr>
        <td>Emil</td>
        <td>Tobias</td>
        <td>Linus</td>
    </tr>
</table>

نکته: یک خانه جدول می‌تواند انواع مختلفی از عناصر HTML را در خود جای دهد: متن، تصاویر، لیست‌ها، لینک‌ها، جداول دیگر و غیره.

سطرهای جدول (Table Rows)

هر سطر جدول با تگ <tr> شروع و با تگ </tr> پایان می‌یابد. tr مخفف "table row" (سطر جدول) است.

مثال

<table>
    <tr>
        <td>Emil</td>
        <td>Tobias</td>
        <td>Linus</td>
    </tr>
    <tr>
        <td>16</td>
        <td>14</td>
        <td>10</td>
    </tr>
</table>

شما می‌توانید به هر تعداد که می‌خواهید سطر در یک جدول داشته باشید؛ فقط مطمئن شوید که تعداد خانه‌ها در هر سطر یکسان باشد.

نکته: گاهی اوقات یک سطر می‌تواند خانه‌های کمتر یا بیشتری نسبت به سطر دیگر داشته باشد. در فصل‌های بعدی در این مورد بیشتر خواهید آموخت.

سربرگ‌های جدول (Table Headers)

گاهی اوقات می‌خواهید خانه‌های شما سلول‌های سربرگ جدول باشند. در این موارد به جای تگ <td> از تگ <th> استفاده کنید: th مخفف "table header" (سربرگ جدول) است.

مثال

اجازه دهید سطر اول سلول‌های سربرگ جدول باشد:

<table>
    <tr>
        <th>Person 1</th>
        <th>Person 2</th>
        <th>Person 3</th>
    </tr>
    <tr>
        <td>Emil</td>
        <td>Tobias</td>
        <td>Linus</td>
    </tr>
    <tr>
        <td>16</td>
        <td>14</td>
        <td>10</td>
    </tr>
</table>

به طور پیش‌فرض، متن در عناصر <th> پررنگ و وسط‌چین است، اما می‌توانید آن را با CSS تغییر دهید.

تگ‌های جدول HTML