آموزش HTML – معرفی جدول ها

جدول ها در HTML

با کمک جداول در اچ‌تی‌ام‌ال به راحتی می‌توانید ساختارهای منظمی ایجاد کنید. بخش‌های خاصی را با کمک خواص موجود در جدول‌ها به طور ساده پیاده سازی کنید.

حتما قبل از بررسی جدول ها در HTML نوشته ی مطالب قبلی این دوره‌ی آموزشی را با هشتگ #دوره_آموزشی_HTML در سایت ما را مطالعه کنید.

آموزش HTML – معرفی جدول ها

خب برای ساخت جدول ابتدا با تگ دوتایی <table> آغاز کنید. قطعا هر جدول دارای سطرها و ستون‌هایی است که البته تعداد آن‌ها متغیر است و حتما نباید هم اندازه ایجاد شود. برای ساخت سطر در جدول بین تگ <table> باید از تگ <tr> استفاده کنید.

مثال:

<table>
   <tr></tr>
   <tr></tr>
   <tr></tr>
</table>

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

مثال:

<table>
   <tr>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
   </tr>
</table>

در مثال بالا شما یک جدول خالی با تعداد ۳ سطر دارید که در هر سطر هم ۲ ستون وجود دارد که مجموع خانه‌های این حدول ۳*۲ یعنی ۶ خانه است. پس با توضیحات بالا به سادگی متوجه ساخت جدول شدید و در نتیجه می‌توانید به نکات زیر اتکا کنید.

1. شما برای ساخت هر جدول نیاز به تگ باز و بسته‌ی table دارید.
2. هر سطر شامل سطرهایی است که تگ باز و بسته ی tr آن‌ها را مشخص می‌کند.
3. ستون‌ها حتما داخل تگ‌های سطرها هستند که با تگ باز و بسته‌ی td مشخص می‌شوند.

مثال کاربردی:

<table>
   <tr>
      <td>نام</td>
      <td>نام خانوادگی</td>
      <td>سال تولد</td>
   </tr>
   <tr>
      <td>علی</td>
      <td>احمدی</td>
      <td>1370</td>
   </tr>
   <tr>
      <td>رضا</td>
      <td>رحیمی</td>
      <td>1374</td>
   </tr>
</table>

حاصل جدول بالا به شکل زیر است:

امیدوارم از این جلسه بهره‌ی کافی ببرید؛ با دوستانتان به اشتراک بگذارید.