آموزش ساخت جدول در HTML با تگ table

توی این جلسه از دوره آموزش رایگان HTML به ساخت جدول در HTML با تگ table میپردازیم. جدول ها برای نشون دادن بعضی از اطلاعات توی سایت استفاده میشن و شما برای تبدیل شدن به یه برنامه نویس فرانت اند باید به جدول ها مسلط باشید. توی این جلسه تمام تگ های مربوط به جداول مثل td و tr و th و دیگر تگ هارو یاد میگیریم.

تگ Table در HTML

برای ساخت جدول در HTML اصلی ترین تگ Table هست. این تگ دور بقیه تگ ها قرار میگیره و میشه گفت تگ والد اونهاست. اگه با تگ های والد و فرزند آشنایی ندارید میتونید از جلسه ساختار اولیه HTML مطالعه کنید.

در اینجا با تگ های فرزند table آشنا میشیم:

• تگ tr: ما با استفاده از تگ tr که مخفف table row هست، میتونیم ردیف های افقی رو توی جدولمون قرار بدیم.
• تگ th: این تگ همونطور که از اسمش هم معلومه برای ساخت سرفصل ها و موضوعات استفاده میشه. ما میتونیم یک یا چند تا از این تگ رو داخل tr قرار بدیم و سلول های بالایی سایت رو بسازیم.
• تگ td: این تگ که مخفف table data هست یکی از مهم ترین تگ ها برای ساخت جدول در html هست و کارش قرار دادن اطلاعات در جدوله. این تگ هم مثل تگ قبلی داخل tr قرار میگیره.

در اینجا میتونید یه مثال از این تگ‌ها رو مشاهده کنید:

<table>
  <tr>
    <th>مدل گوشی</th>
    <th>قیمت</th>
  </tr>
  <tr>
    <th>iphone 15</th>
    <th>1200$</th>
  </tr>
  <tr>
    <th>S24 ULTRA</th>
    <th>1100$</th>
  </tr>
</table>

نتیجه کد به این شکله:

البته این کدها کمی استایل css هم دارن و اگر شما این کد رو بنویسید ممکنه ظاهرش فرق بکنه. اما نگران نباشید چون بعدا توی دوره css شماهم این کارو یاد میگیرید.

clospan و rowspan در جداول

شاید براتون پیش بیاد که بخواید یه سلول از جدولتون از لحاظ افقی یا عمودی جای بیشتری رو اشغال کنه. شما میتونید با استفاده از rowspan میزان فضایی که یه سلول از لحاظ عمودی لازم داره رو تعیین کنید. برای حالت افقی هم از colspan استفاده میکنیم. توی مثال زیر یه نمونه از اتریبیوت colspan رو برای سلول “اطلاعات گوشی” میبینید

<table>
  <tr colspan="2">
    <th>اطلاعات گوشی</th>
  </tr>
  <tr>
    <th>مدل گوشی</th>
    <th>قیمت</th>
  </tr>
  <tr>
    <th>iphone 15</th>
    <th>1200$</th>
  </tr>
  <tr>
    <th>S24 ULTRA</th>
    <th>1100$</th>
  </tr>
</table>

نتیجه کد به این شکله:

البته همونطور که گفتم این مثال کمی کد css هم برای درک بهتر شما همراهش داره.

تگ های بخش بندی جدول

توی html یکسری تگ برای بخش بندی جدول وجود داره. این تگ ها هم میتونن توی کدنویسی css به ما کمک کنن و هم توی مباحث مربوط به سئو سایت تاثیر زیادی بذارن و بهتره که بهشون مسلط باشیم. این تگ ها عبارتند از:

1. thead: این تگ دور بخش بالایی جدول قرار میگیره.
2. tbody: از tbody برای مشخص کردن بخش اطلاعات و بدنه جدول استفاده میشه.
3. tfoot: با استفاده از این تگ میتونیم بخش پایانی جدولمون رو مشخض کنیم.

مثال زیر یه نمونه از این تگ هارو نشون میده:

<table>
<thead>
  <tr>
    <th>شماره</th>
    <th>نام</th>
    <th>قیمت</th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>1</td>
    <td>iphone 15 promax</td>
    <td>120,000$</td>
  </tr>

  <tr>
    <td>2</td>
    <td>S24 ULTRA</td>
    <td>110,000$</td>
  </tr>

  <tr>
    <td>3</td>
    <td>honor magic6 pro</td>
    <td>110,000$</td>
  </tr>
</tbody>

<tfoot>
  <tr>
    <td colspan="2">مجموع کالا</td>
    <td>340,000$</td>
  </tr>

  <tr>
    <td colspan="3"> <a href="https://megajs.com">سایت مگا جی اس</a> </td>
  </tr>
</tfoot>

</table>

نتیجه کد به این صورته:

نکته: این تگ ها فقط برای دسته بندی هستن و توی نتیجه کد دیده نمیشن.

ساخت جدول عمودی

برای ساخت این مدل از جدول ها کافیه از تگ th اول هرکدوم از tr ها استفاده کنیم. توی کد زیر براتون یه نمونه جدول عمودی قرار داده شده:

<table>
<tr>
<th>نام:</th>
<td>حسن</td>
</tr>
<tr>
<th>تلفن:</th>
<td>09123456789</td>
</tr>
<tr>
<th>سن:</th>
<td>24</td>
</tr>
</table>

نتیجه کد به این صورته:

کاربرد جداول در HTML

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

سایت های جدول ساز

ما توی برنامه نویسی همیشه سعی میکنیم کارهامون رو با کیفیت بالا و زمان کم انجام بدیم. سایت های جدول ساز هم جدول های HTML رو در زمان کمی برای ما میسازن، شما فقط باید تعداد سطر و ستون هارو وارد کنید تا کد جدول‌تون رو دریافت کنید. سایت div table یکی از بهترین سایت ها توی این زمینه‌س. ( این متن تبلیغ نیست فقط معرفیه )

تمرین این جلسه

برای تمرین این جلسه شما باید جدول زیر رو با کدهای فقط HTML بسازید

نکته:

• از سایت های جدول ساز استفاده نکنید
• اگر استایل کد های یکی نشد مهم نیست. بعدا توی css یادمیگیریمش.
• از تگ های دسته بندی مورد نیاز استفاده کنید
• موفق باشید

سخن پایانی

حالا که به اینجا این جلسه رسیدید، میتونید که توی سایتتون هر نوع جدولی که نیاز داشتید رو قرار بدید. اگه هر جایی از این جلسه به مشکل خوردید میتونید توی کامنت ها سوالتون رو بپرسید. همچنین میتونید برای دیدن جلسه بعد از این لینک استفاده کنید:

بخش بندی کردن سایت در HTML