آموزش جدول در Html-جلسه پنجم

آموزش جدول در  Html-جلسه پنجم
 ۱۳۹۷/۹/۳ | ۲۲:۳۵
خلاصه این مطلب: جلسه پنجم آموزش Html را با ساخت جدول آغاز میکنیم آشنایی با تگ های مربوط به جدول و بررسی ویژگی های هر کدام در این جلسه آمده است

ساخت جدول با Html

در طراحی یک سایت با Html جداول از اجزاء با اهمیت شمرده می شوند که مسئول چارچوب بندی و نظم دهی به سایر بخش های سایت هستند. در گذشته از جداول برای طبقه بندی و اسکلت بندی چارچوب کلی سایت استفاده می شد اما امروزه این روش منسوخ شده و از جداول عموما برای ساخت فرم ها، طبقه بندی بخشی کوچک از صفحه و ... استفاده میشود. 

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

table : این تگ اصلی ساخت جدول است که ابتدا و انتهای یک جدول را مشخص کرده و عناصر جدول بین تگ باز بسته ی آن قرار میگیرد. 

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

td : این تگ که در داخل تگ tr قرار میگیرد باعث ایجاد سلول های جدول در هر سطر میشود.  

در طراحی جدول با Html بايد به نکات زير اهمیت داد :

  • هنگام درست کردن يک سطر با استفاده از تگ < tr > ، قبل از ايجاد یک سطر جديد لزوما بايد تگ  < tr > قبلی بسته شده باشد و داخل هر سطر هم در صورت ايجاد سلول با تگ  < td > قبل از ايجاد يک سلول جديد با این تگ حتما بايد تگ < td > قبلی بسته شود .
  • داخل تگ < table > تنها می توان تگ < tr > و داخل تگ < tr > نيز تنها می توان از تگ < td > استفاده کرد .
  • سلول ها و ردیف های يک جدول در Html منظم هستند . برای مثال نمی توانیم در يک ردیف از جدول 3 سلول و در ردیف پايينی آن 2 سلول با طول  متفاوت ايجاد کرد . در مواقع لزوم بايد میتوان از خاصيت colspan در تگ < td > استفاده کرد و ردیف با سلول کمتر ایجاد نمود.

در ذیل مثالی از کدنویسی جدول با Html و تصویر خروجی آن را ملاحظه خواهید فرمود :

 

<table align="center" border="2" cellpadding="1" cellspacing="1" style="height:100px; width:200px">
        <tr>
            <td>سلول اول</td>
            <td>سلول دوم</td>
        </tr>
        <tr>
            <td>سلول سوم</td>
            <td>سلول چهارم</td>
        </tr>
</table>

خروجی :

 

سلول اول سلول دوم
سلول سوم سلول چهارم


همانطور که در کد Html و داخل تگ table ملاحظه کردید ویژگی هایی برای جدول تعریف کردیم. در جدول زیر ویژگی هایی که برای یک جدول میتوان تعریف کرد را به شما معرفی خواهیم نمود : 

آموزش Html تگ جدول

 

  نظرات کاربران (0 نظر)
شما هم می توانید در مورد این مطلب نظر دهید نظر خود را بنویسید