آموزش جدول در 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 ملاحظه کردید ویژگی هایی برای جدول تعریف کردیم. در جدول زیر ویژگی هایی که برای یک جدول میتوان تعریف کرد را به شما معرفی خواهیم نمود :