درس ششم: ساخت جدول‌ها در HTML

سلام دوباره به شما علاقه‌مندان به HTML! امیدوارم مطالب درس‌های قبلی براتون مفید بوده باشه و حسابی با تگ‌های پایه، لینک‌ها، تصاویر و لیست‌ها کار کرده باشید.

توی درس ششم، می‌خوایم یاد بگیریم چطور اطلاعاتمون رو به صورت جدول در صفحات وب نمایش بدیم. جدول‌ها ابزار قدرتمندی برای سازماندهی و نمایش داده‌های جدولی مثل اطلاعات آماری، برنامه‌ها، لیست قیمت‌ها و… هستن.

هر جدول در HTML از سطرها و ستون‌ها تشکیل شده، درست مثل جدول‌هایی که توی نرم‌افزارهایی مثل اکسل یا وورد دیدید.

برای ساخت یک جدول ساده در HTML به چند تا تگ اصلی نیاز داریم:

1. <TABLE>: این تگ اصلی‌ترین تگ برای تعریف کل جدول هست. هر چیزی که بین تگ باز <table> و تگ بسته </table> قرار بگیره، بخشی از جدول ما محسوب میشه.
2. <TR>: این تگ برای تعریف یک سطر در جدول استفاده میشه. هر سطر جدیدی که می‌خواید به جدولتون اضافه کنید، باید با تگ <tr> شروع و با </tr> تموم بشه. (TR مخفف Table Row هست).
3. <TH>: این تگ برای تعریف سلول سربرگ (Header Cell) در جدول استفاده میشه. معمولاً برای عنوان ستون‌ها یا سطرها از این تگ استفاده میشه و متن داخل اون به صورت پیش‌فرض پررنگ و وسط‌چین نشون داده میشه. (TH مخفف Table Header هست).
4. <TD>: این تگ برای تعریف سلول داده (Data Cell) در جدول استفاده میشه. این سلول‌ها حاوی اطلاعات واقعی جدول شما هستن. (TD مخفف Table Data هست).

ساختار کلی یک جدول ساده:

<table>
  <tr>
    <th>سربرگ 1</th>
    <th>سربرگ 2</th>
    <th>سربرگ 3</th>
  </tr>
  <tr>
    <td>داده 1</td>
    <td>داده 2</td>
    <td>داده 3</td>
  </tr>
  <tr>
    <td>داده 4</td>
    <td>داده 5</td>
    <td>داده 6</td>
  </tr>
</table>

حالا بیاید یک مثال واقعی‌تر رو با هم ببینیم:

فرض کنید می‌خواید یک جدول ساده برای نمایش اطلاعات چند دانش‌آموز (نام و نمره) بسازید.

<h2>جدول اطلاعات دانش‌آموزان</h2>

<table border="1"> <!-- افزودن border="1" باعث میشه که خطوط جدول نمایش داده بشن. البته بهتره استایل‌دهی با CSS انجام بشه، ولی برای شروع اینجوری واضح‌تره. -->
  <tr> <!-- سطر اول: سربرگ‌ها -->
    <th>نام دانش‌آموز</th>
    <th>نمره درس ریاضی</th>
  </tr>
  <tr> <!-- سطر دوم: اطلاعات دانش‌آموز اول -->
    <td>علی احمدی</td>
    <td>18</td>
  </tr>
  <tr> <!-- سطر سوم: اطلاعات دانش‌آموز دوم -->
    <td>مریم رضایی</td>
    <td>19.5</td>
  </tr>
  <tr> <!-- سطر چهارم: اطلاعات دانش‌آموز سوم -->
    <td>رضا کریمی</td>
    <td>17</td>
  </tr>
</table>

توضیحات مثال بالا:

• با تگ <table> جدول رو شروع کردیم. ویژگی border="1" رو برای نمایش کادر جدول اضافه کردیم (بعداً با CSS یاد می‌گیریم چطور بهتر این کار رو انجام بدیم).
• اولین سطر (<tr>) رو برای سربرگ‌های جدول تعریف کردیم و داخلش از تگ‌های <th> برای “نام دانش‌آموز” و “نمره درس ریاضی” استفاده کردیم.
• سطرهای بعدی رو هم با <tr> تعریف کردیم و داخل هر سطر، از تگ‌های <td> برای قرار دادن اطلاعات مربوط به هر دانش‌آموز استفاده کردیم.

ادغام سلول‌ها (Colspan و Rowspan):

گاهی اوقات لازم میشه که یک سلول چند ستون یا چند سطر رو پوشش بده (ادغام بشه). برای این کار از ویژگی‌های colspan و rowspan استفاده می‌کنیم:

• colspan: تعداد ستون‌هایی که یک سلول باید در راستای افقی پوشش بده.
• rowspan: تعداد سطرهایی که یک سلول باید در راستای عمودی پوشش بده.

مثال با colspan و rowspan:

<h2>جدول با سلول‌های ادغام شده</h2>

<table border="1">
  <tr>
    <th colspan="2">اطلاعات کلی</th> <!-- این سلول دو ستون را پوشش می‌دهد -->
    <th>نمره</th>
  </tr>
  <tr>
    <td rowspan="2">شخص 1</td> <!-- این سلول دو سطر را پوشش می‌دهد -->
    <td>نام: سارا</td>
    <td>19</td>
  </tr>
  <tr>
    <td>شهر: تهران</td>
    <td>20</td>
  </tr>
</table>

توضیحات مثال بالا:

• در سطر اول، سلول “اطلاعات کلی” با استفاده از colspan="2" دو ستون اول را پوشش داده است.
• در سطر دوم، سلول “شخص 1” با استفاده از rowspan="2" دو سطر را پوشش داده است. بنابراین، در سطر سوم دیگر نیازی به تعریف سلول اول نیست.

خب، این هم از درس ششم ما در مورد ساخت جدول‌ها در HTML. با استفاده از تگ‌های <table>، <tr>، <th> و <td> و همچنین ویژگی‌های colspan و rowspan می‌تونید انواع جدول‌ها رو برای نمایش داده‌هاتون بسازید.

ساخت جدول‌ها در ابتدا ممکنه کمی چالش‌برانگیز به نظر برسه، مخصوصاً وقتی با ادغام سلول‌ها کار می‌کنید، اما با تمرین خیلی زود بهش مسلط میشید.