درس پنجم: جداول (Tables) و سازماندهی داده‌ها

در این درس از CSLearn.ir یاد می‌گیریم چطور داده‌های پیچیده را به صورت سطر و ستونی منظم کنیم. جداول به ما کمک می‌کنند تا اطلاعات را به شکلی قابل فهم و حرفه‌ای به کاربر نمایش دهیم.

📊 ۱. اجزای اصلی یک جدول

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

🔴 <table>: تگ اصلی برای شروع جدول.
🔴 <tr>: مخفف Table Row، برای ایجاد یک ردیف.
🔴 <th>: مخفف Table Header، برای عناوین ستون‌ها (متن را ضخیم می‌کند).
🔴 <td>: مخفف Table Data، برای خانه‌های معمولی جدول.

💻 نمونه کد یک جدول استاندارد

به نحوه چیدمان تگ‌ها برای ساخت یک لیست قیمت ساده دقت کنید:

<table border="1" style="width:100%; border-collapse: collapse;">
  <tr>
    <th>نام دوره</th>
    <th>مدرس</th>
    <th>قیمت</th>
  </tr>
  <tr>
    <td>آموزش HTML</td>
    <td>تیم CSLearn</td>
    <td>رایگان</td>
  </tr>
</table>

💡 ۲. ادغام خانه‌ها (Colspan & Rowspan)

گاهی نیاز است یک خانه را بزرگتر کنیم تا چند ستون یا ردیف را پوشش دهد:

colspan: ادغام چند ستون کنار هم (افقی).
rowspan: ادغام چند ردیف زیر هم (عمودی).

🚩 تمرین درس پنجم:

یک جدول ۳ در ۳ بسازید که برنامه مطالعاتی شما را نشان دهد. ستون اول “روز”، ستون دوم “ساعت” و ستون سوم “موضوع مطالعه” باشد. از تگ <th> برای ردیف اول استفاده کنید.

درس قبلی

بازگشت به دوره

درس بعدی