آموزش 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>

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

امیدوارم از این جلسه بهره ی کافی ببرید؛

در صورت وجود هرگونه سوال یا ابهام از بخش نظرات این نوشته با ما در تعامل باشید.

موفق و پیروز باشید.