فصل ۱۶ | لیست‌ها و جدول‌ها

ساخت جدول با table

جدول برای نمایش داده‌های ردیفی و ستونی استفاده می‌شود. سه عنصر اصلی آن <table> برای بدنه‌ی جدول، <tr> برای هر ردیف و <td> برای هر سلول هستند.

basic-table.html
<table>
    <tr>
        <td>ردیف ۱، ستون ۱</td>
        <td>ردیف ۱، ستون ۲</td>
    </tr>
    <tr>
        <td>ردیف ۲، ستون ۱</td>
        <td>ردیف ۲، ستون ۲</td>
    </tr>
</table>

سربرگ جدول با th

برای مشخص کردن سلول‌های سربرگ (عنوان ستون یا ردیف)، به‌جای <td> از <th> استفاده می‌شود؛ مرورگر این سلول‌ها را به‌طور پیش‌فرض پررنگ و وسط‌چین نمایش می‌دهد.

table-header.html
<table>
    <tr>
        <th>نام</th>
        <th>سن</th>
    </tr>
    <tr>
        <td>سارا</td>
        <td>۲۸</td>
    </tr>
</table>

ادغام سلول‌ها

با ویژگی colspan یک سلول می‌تواند چند ستون را با هم ادغام کند و با rowspan چند ردیف را.

table-span.html
<tr>
    <th colspan="2">اطلاعات تماس</th>
</tr>
نکته: جدول‌ها فقط برای نمایش داده‌ی جدولی مناسب‌اند، نه برای چیدمان کلی صفحه؛ برای چیدمان از CSS (مثل Flexbox یا Grid) استفاده کنید.