جدولها یکی از بهترین و مفیدترین عنصرها در صفحات وب میباشند، با استفاده از آنها ما می توانیم اطلاعات و عناصررا در یک صفحه سازمان دهی و مرتب کنیم . کلیه اطلاعات یا عناصر دیگر وب را میتوانیم داخل ردیف ها یا ستون های یک جدول قرار دهیم بدون آنکه خطوط جدول مشخص باشد و یا در صورت نیاز خطوط آنها نمایان میشود. کمتر کسی را پیدا میکنید که از این عنصر استفاده نکند و زمانیکه تجربه کافی برای طراحی یک سایت بدست آوردید به اهمیت این عنصر پی خواهید برد.
تگ جدول
تگ مشخصه جدول
میباشد. اما برای اضافه کردن ردیف به یک جدول از
|
و برای ستون از تگ
| استفاده میکنیم. پس ساختار کلی یک جدول بدین صورت میباشد:
هر چه تگهای ردیف و ستون بیشتر باشد به همان اندازه ما در جدولمان خانه خواهیم داشت. مجموعه کد بالا نشان دهنده یک جدول با یک ردیف و یک ستون است یعنی این جدول دارای یک خانه میباشد. یکی از ویژگیهای جدول که محبوبیت آنرا زیاد میکند اینست که هر خانه از آن میتواند به طور مجزا زمینه رنگی و یا عکسی در زمینه آن داشته باشد البته اندازه های هر خانه هم میتواند متفاوت باشد.
border
خب برای اینکه بتوانیم یک جدول را در مرورگر خود ببینیم باید با خصوصیت border=" " آشنا شویم. این خصوصیت دور جدول یک کادردرست میکند البته اگر این خصوصیت را برابربا صفر قرار دهیم یا آنرا ننویسیم کادر دور جدول در مرورگر نمایان نخواهد شد و هر چه عدد بزرگتری بگذاریم کادر ضخیم تری خواهیم داشت، در ضمن رنگ کادرهم با bordercolor=" " که برابر با عدد هگز رنگ است تعیین میشود. border ویژگیهای دیگری هم دارد، به طور مثال شما میتوانید خصوصیت frame=" " را به تگ
اضافه کرده و آنرا برابر با یکی از کلمات void, above, below, hsides, vsides,lhs, rhs, box قرار دهید تا کادر دور جدول را کنترل کنید. این کلمات هر کدام یک قسمت از کادر را نمایان میکنند.
rule
ویژگی دیگری هم هست ولی بهتره اول یک جدول درست کنید تا مطلب جا بیافتد، برنامه Notepad را باز کنید و کد زیر را وارد کرده و به اسم Table.htm ذخیره کنید:
l
cell 01 | cell 02 |
cell 03 | cell 04 |
l
حالا خصوصیت rules=" "را به تگ
اضافه کنید و هر بار یکی از کلمات all, none, groups, rows, cols را جلوی آن قرار دهید و فایل را دوباره ذخیره کنید تا تاثیر این خصوصیت را ببینید.
Alignment
میتوانید با استفاده از خصوصیت align=" "که در تگ مینویسید محل قرارگرفتن یک عنصر مانند متن را تعیین کنید که میتوانید این خصوصیت را با کلمات left, right, center, justify مقداردهی کنید.
height, width
با خصوصیات height=" " , width=" " هم اندازه طول و عرض یک جدول را میتوان کنترل کرد که باید آنها را برابر با عدد در مقیاس پیکسل قرار دهید در ضمن شما میتوانید از درصد % هم استفاده کنید مانند width="90%" که این جدول نود درصد عرض یک صفحه را اشغال میکند.
bgcolor
برای تعیین رنگ زمینه یک جدول ازbgcolor=" " که با عدد هگز رنگها مقدار دهی میشود استفاده میکنیم. این خصوصیت را در تگ های | و هم می توانید بکار برید.
cellspacing, cellpadding
تگ دو خصوصیت دیگر هم دارد که شما با بکار بردن آنها میتوانید فاصله بین خانه های جدول را از هم کنترل کنید یعنی فضای خالی بین خانه ها اضافه کنید، این خصوصیت این است cellspacing=" "و دیگری فاصله بین متن داخل یک خانه در جدول با لبه های چارچوب آن خانه است که خصوصیت cellpadding=" " این وظیفه را به عهده دارد. هرچه مقداردهی عددی آنها بزرگتر باشد فاصله ها بیشتر خواهد بود.
header: | l
حالا که با درست کردن ردیف و ستون در جدول آشنا شدید، میتوانید برای هر ستون و ردیف عنوان گذاری کنید و یک تیتر به بالای ستون یا به ابتدای یک ردیف اضافه کنید. در هر قسمت که شما به یک تیتر و عنوان نیاز داشتید بجای تگ | از تگ | استفاده کنید که در این حالت متن نوشته شده در آن خانه بصورت ضخیم ظاهر شده و از بقیه متمایز میشود.
colspan, rowspan
گاهی اوقات شما نیاز دارید تا چند خانه در یک ردیف یا یک ستون از جدول را ترکیب کنید تا یک خانه درست شود و بطور مثال یک تیتر و عنوان در آن قرار دهید که برای ترکیب خانه های یک ستون از خصوصیت rowspan=" " و برای یک ردیف از colspan=" " در تگ استفاده میکنید و مقدار آنرا برابر با تعداد خانه هایی که باید یکی شوند، قرار میدهید.
caption
بطور معمول هر جدول دارای یک اسم و یا یک توضیح میباشد که آنرا با تگ در میان تگهای مشخص میکنند. این تگ دارای خصوصیت align=" " میباشد با کلمات top, bottom, left, center, right مقداردهی میشود.
thead, tbody, tfoot
اگر جدول شما دارای ستونها و ردیفهای زیادی است پس تکرار خصوصیات در هر تگ مربوطه بسیار دشوار است. شما میتوانید بصورت گروهی این خصوصیات را کنترل کنید. برای کنترل ردیفها باید آنها را به سه قسمت تقسیم کرد، قسمت سرشامل فقط خانه های ردیف اول، بدنه شامل همه ردیفهای وسط و قسمت انتهایی شامل فقط خانه های آخرین ردیف، که قسمت سر را با ، قسمت بدنه را با | و قسمت انتهایی را با کنترل میکنیم. این تگ دارای خصوصیت align نیز میباشد.
colgroup
همچنین با تگ میتوانید خصوصیات کلیه ستونهای یک جدول را کنترل کنید که این تگ علاوه بر خصوصیات گفته شده در این بخش دارای خصوصیت span=" " نیز میباشد که توسط آن تعداد ستونهایی که باید کنترل شوند را تعیین میکنید.
summery
یک خصوصیت دیگر نیز برای تگ هست بنام summery=" " که توصیفی از جدول میباشد ولی در جایی نمایش داده نمیشود. این خصوصیت برای مرورگرهایی که فقط متن را نمایش میدهند و یا مرورگرهای مخصوص افراد ناتوان ، مفید میباشد که بهتر است از آن استفاده کنید.
به این موضوع هم توجه داشته باشید که شما میتوانید داخل یک جدول، جدول دیگری هم درست کنید یعنی داخل هرخانه جداگانه یک جدول بسازید که به این روشNested table گفته میشود.
نظرات شما عزیزان:
تاريخ:پنج شنبه 17 / 6 / 1390برچسب: , |
موضوع: <-PostCategory->
|