تا حالا نحوه های مختلف ایجاد و ویرایش متن های HTML را یاد گرفتید. در این جلسه قراره نحوه ایجاد جداول به نحوه های مختلف و ویرایش آنها را یاد بدم.

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

تگ های کلی جداول از این قراراند:

table , tr , td , tbody , thead , tfoot , caption , col , colgroup

از بین تگهای بالا tbody و col و colgroup استفاده چندانی نداره و شاید بشه گفت بیشتر مواقع اصلا استفاده نمیشه. اما بقیه تگها مهم اند و باید نوعیت اونها را دونست.

برای ایجاد جدول باید در ابتدا از تگ table استفاده کنیم. برای اینکه خصوصیات کلی به جدول بدیم که در کل جدول اعمال بشه باید در این تگ اونها رو تعریف کنیم. مثلا خصوصیاتی مثل داشتن خطهای بدنه یا نداشتن اونها و بقیه چیزها.
هر جدولی از بدنه هایی بهره میبره که با خطهایی به نام Border ایجاد میشند. بعضی وقتها ممکنه ما بخوایم که جدولی که ما میسازیم این خطها رو نداشته باشه. برای اینکار باید با معین کردن خصیصه Border با مقدار صفر خطها رو از بین ببریم. اما با اینکار فقط خطها از بین میرند و فاصله بین خانه های اطلاعاتی باقی میمونند. برای اینکه این فاصله هم از بین بره و خانه های جدول هم به هم وصل بشند باید از دو خصیصه cellpadding و cellspacing استفاده کنیم و با دادن مقدار 0 به اونها این مشکل رو برطرف کنیم. در ادامه با مثالی مطلب را متوجه میشید.

برای اینکه سطرها ایجاد بشه از تگ tr استفاده می کنیم و برای اینکه خانه ها ایجاد بشند از تگ td استفاده می کنیم. به این صورت که هز td مشخص کننده یه خانه است. پس برای اینکه در یک سطر ? خانه ایجاد بشه اینجوری کدبندی می کنیم:

table>
tr>
td>خانه اول/td>td>خانه دوم/td>td>خانه سوم/td>
/tr>
/table>

اینم مثال:

با Border

بدون Border و فاصله بین خانه ها

همانطور که میبینید در جدول دوم نه خطی بین خانه وجود دارد و نه فاصله ای بین خانه.

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

همانطور که در جدول بالایی میبینید نحوه ساخت جدول هیچ فرقی با قبلی ها نمیکنه اما ظاهر چقدر در نحوه پذیرش کاربر تاثیر میذاره.

بعضی وقتها ممکنه بخوایم برای جدولمون یه نام تعریف کنیم. برای اینکار از تگ thead استفاده می کنیم. با مثال کاملا متوجه میشید.

محل قرار گرفتن نام جدول

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

برای بیان توضیحات اصلی که جاشون نباید در داخل جدول باشه و یا به نوعی به پاصفحه معروف اند هم از تگ tfoot استفاده  می کنیم.

محل قرار گرفتن این تگ هم بعد از تگ /table هست. یعنی بعد از اتمام جدول.

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

هواستون به نحوه تگ بندی باشه.

موفق باشید/.

نظر یادتون نره