جداول (Tables)
«جدول (Table)» یعنی چیدن داده ها در سطر و ستون. مثل برنامه زنگ مدرسه که روزها سطرند و کلاس ها ستون. با جدول، اطلاعات مرتب و خوانا می شود.
ساخت یک جدول ساده
هر جدول با تگ <table> شروع می شود. سپس سطرها با <tr> و سرستون ها با <th> می آیند. خانه ها را هم تگ <td> می سازد.
<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>
خانه های جدول (td)
«td» یعنی «Table Data». هر چیزی بین <td> و </td> محتوای یک خانه است. می تواند متن، لینک، یا حتی تصویر باشد.
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
نکته: هر خانه می تواند هر المان HTML داشته باشد. پس دستت باز است.
سطرهای جدول (tr)
«tr» یعنی «Table Row». هر سطر با <tr> شروع و با </tr> تمام می شود. داخلش چند <td> یا <th> می آید.
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
هشدار: معمولاً تعداد خانه های هر سطر برابر است. اما بعدها با ادغام خانه ها آشنا می شویم.
سرستون ها (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>
گام های عملی سریع
- موضوع جدول را مشخص کن.
- اسکلت
<table>و سطرها را بساز. - سرستون ها را با
<th>بنویس. - داده ها را با
<td>پر کن.
برای ادامه کار با جداول HTML بیشتر تمرین کن. سپس برای زیباسازی سر بزن به مرز جدول و بعداً به عنوان صفحه.
جمع بندی سریع
<table>ظرف جدول است.<tr>سطر می سازد.<th>سرستون را نشان می دهد.<td>داده های هر خانه است.