طراحی و اجرای شبکه های کامپیوتری در کرمانشاه و شهرستانهای تابعه
انجام پروژه های دانشجویی
آموزش های طراحی وب
آموزشهای شبکه
جداول در CSS
ظاهر یک جدول html میتواند توسط کد های css بهبود پیدا کند.برای مشخص کردن بوردر جداول در css ، از خاصیت بوردر استفاده میکنیم.
مثال پایین یک بوردر سیاه برای جدول ، و برای خاصیت های th , td مشخص کرده است.
مثال :
table, th, td
{
border: 1px solid black;
}
برای نمایش بوردر تکی برای یک جدول از خاصیت border-collapse استفاده میکنیم.
Collapse Borders
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
خاصيت border-collapse
نام خاصيت |
نوع خاصيت |
شرح |
border-collapse |
collapse |
نحوه نمايش حاشيه يک جدول را به يکی از 2 حالت زير تعيين می کند : |
مثال برای border-collpase :
پیش نمایش
خاصيت border-spacing
نام خاصيت |
نوع خاصيت |
شرح |
border-spacing |
length |
اين خاصيت ميزان فاصله بين خطوط حاشيه خانه های درونی جدول را با خطوط حاشيه دور جدول بر حسب واحدی مثل پيکسل یا نقطه تعيين می کند . |
خاصيت border-spacing
نام خاصيت |
نوع خاصيت |
شرح |
border-spacing |
length |
اين خاصيت ميزان فاصله بين خطوط حاشيه خانه های درونی جدول را با خطوط حاشيه دور جدول بر حسب واحدی مثل پيکسل یا نقطه تعيين می کند . |
مثال : در مثال زير بين خطوط حاشيه خانه های جدول و خطوط حاشيه بيرونی ، فاصله ايجاد کرده ايم :
پیش نمایش
خاصيت caption-side
نام خاصيت |
نوع خاصيت |
شرح |
caption-side |
top |
اين خاصيت موقعيت قرار گيری عنوان جدول را تعيين می کند . عنوان جدول توسط تگ < caption > ايجاد می شود . حالت های ممکن عبارتند : |
مثال : در مثال زير چند حالت قرار گيری عنوان جدول را بررسی کرده ايم :
پیش نمایش
خاصيت empty-cells
نام خاصيت |
نوع خاصيت |
شرح |
empty-cells |
show |
مشخص می کند که آيا خانه های خالی جدول و خطوط حاشيه های آنها نمايش داده شود يا خير ، که دو حالت دارد : |
مثال : در مثال زير چند حالت های مختلف نمايش خانه های خالی را بررسی کرده ايم . در جدول اول خانه های خالی نمايش داده شده و در جدول دوم نمايش داده نشده است . ستون دوم جدول های زير خالی است که با رنگ سبز نمايش داده شده است .
اشاره : متاسفانه بين مرورگرهای مختلف در نمايش بسياری از تگ ها و خواص HTML و CSS اختلاف وجود دارد و بعضی از آنها از برخی از خواص پشتيبانی درستی نمی کنند . برای مثال می توانيد ، صفحات همين سايت را در 3 مرورگر مطرح Internet Explorer , FireFox و Opera مشاهده کنيد تا به اختلافات پی ببريد .
پیش نمایش
خاصيت table-layout
نام خاصيت |
نوع خاصيت |
شرح |
table-layout |
auto |
الگوريتم نمايش جدول را تعيين می کند . به طور کلی 2 الگوريتم برای طراحی جدول داريم :
- الگوريتم نمايش ثابت fixed :
|
پیش نمایش
برچسب مطالب :
css چیست| قواعد نوشتاری زبان css | کلاس و id در css| چگونگی عملکرد css| تنظیم پس زمینه background در css | متن در css| فونت در css | لینک ها در css | لیستها در css | جداول در css| باکس Box Model در css | ویژگی css border | ویژگی css outline| ویژگی css margin | ویژگی css padding | گزینشگرهای گروهی در Css | خاصیت css dimension | خاصیت css display | خاصیت css position | خاصیت css floating | خاصیت css align | شبه کلاسها در css | شبه عناصر در css | نوار هدایت در css | گالری تصاویر در css| ایجاد تصاویر شفاف در css| خاصیت image sprites در css | انواع رسانه ها در css | انتخاب گرها در css| معرفی css3| حاشیه در css3| پس زمینه در css3| خاصیت css3 gradients| جلوه های متن در Css3| فونت در css3| تغییر شکل های 2 بعدی در css3| ترنسفرم های سه بعدی در css3 | خاصیت css3 transitions | انیمیشن در css3 | ستونهای چند گانه در css3 | رابط کاربری css3 |
قواعد نوشتاری زبان css
کلاس و id در css
چگونگی عملکرد css
تنظیم پس زمینه background در css
متن در css
فونت در css
لینک ها در css
لیستها در css
جداول در css
باکس Box Model در css
ویژگی css border
ویژگی css outline
ویژگی css margin
ویژگی css padding
گزینشگرهای گروهی در Css
خاصیت css dimension
خاصیت css display
خاصیت css position
خاصیت css floating
خاصیت css align
شبه کلاسها در css
شبه عناصر در css
نوار هدایت در css
گالری تصاویر در css
ایجاد تصاویر شفاف در css
خاصیت image sprites در css
انواع رسانه ها در css
انتخاب گرها در css
معرفی css3
حاشیه در css3
پس زمینه در css3
خاصیت css3 gradients
جلوه های متن در Css3
فونت در css3
تغییر شکل های 2 بعدی در css3
ترنسفرم های سه بعدی در css3
خاصیت css3 transitions
انیمیشن در css3
ستونهای چند گانه در css3
رابط کاربری css3