css3 آموزش

خدمات طراحی سایت
طراحی و اجرای شبکه های کامپیوتری در کرمانشاه و شهرستانهای تابعه
انجام پروژه های دانشجویی
آموزش های طراحی وب
آموزشهای شبکه

جداول در CSS

ظاهر یک جدول html میتواند توسط کد های css بهبود پیدا کند.
برای مشخص کردن بوردر جداول در css ، از خاصیت بوردر استفاده میکنیم.
مثال پایین یک بوردر سیاه برای جدول ، و برای خاصیت های th , td مشخص کرده است.
مثال :

table, th, td
{
border: 1px solid black;
}

به یاد داشته باشید که جدول بالا دارای بوردر دوگانه است ، این به خاطر این است که دو خاصیت th/td دارای بوردر مستقل هستند.
برای نمایش بوردر تکی برای یک جدول از خاصیت border-collapse استفاده میکنیم.
Collapse Borders

table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}

خاصيت border-collapse

نام خاصيت	نوع خاصيت	شرح
border-collapse	collapse seprate	نحوه نمايش حاشيه يک جدول را به يکی از 2 حالت زير تعيين می کند : - collapse : در اين حالت ، خطوط حاشيه خانه های درونی جدول با خطوط حاشيه بيروني جدول ، در قالب يک خط ترکيب شده و يک خط واحد را تشکيل می دهند . - seprate : در اين حالت خطوط حاشيه خانه های درونی جدول با خطوط حاشيه بيرونی به صورت مجزا از هم نمايش داده می شوند ، که حالت استاندارد HTML است .

مثال برای border-collpase :

پیش نمایش

خاصيت border-spacing

نام خاصيت	نوع خاصيت	شرح
border-spacing	length	اين خاصيت ميزان فاصله بين خطوط حاشيه خانه های درونی جدول را با خطوط حاشيه دور جدول بر حسب واحدی مثل پيکسل یا نقطه تعيين می کند . مثال : اين خاصيت فقط در زمانی کاربرد دارد ، که خاصيت border-collapse روی مقدار seprate تنظيم شده باشد .

خاصيت border-spacing

نام خاصيت	نوع خاصيت	شرح
border-spacing	length	اين خاصيت ميزان فاصله بين خطوط حاشيه خانه های درونی جدول را با خطوط حاشيه دور جدول بر حسب واحدی مثل پيکسل یا نقطه تعيين می کند . مثال : اين خاصيت فقط در زمانی کاربرد دارد ، که خاصيت border-collapse روی مقدار seprate تنظيم شده باشد .

مثال : در مثال زير بين خطوط حاشيه خانه های جدول و خطوط حاشيه بيرونی ، فاصله ايجاد کرده ايم :

پیش نمایش

خاصيت caption-side

نام خاصيت	نوع خاصيت	شرح
caption-side	top right bottom left	اين خاصيت موقعيت قرار گيری عنوان جدول را تعيين می کند . عنوان جدول توسط تگ < caption > ايجاد می شود . حالت های ممکن عبارتند : - top : عنوان در بالای جدول قرار می گيرد . - right : عنوان در سمت راست جدول قرار می گيرد . - bottom : عنوان در پايين جدول قرار می گيرد . - left : عنوان در سمت چپ جدول قرار می گيرد .

مثال : در مثال زير چند حالت قرار گيری عنوان جدول را بررسی کرده ايم :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table style="border: solid 2px blue; caption-side: left ; width: 400px" >
  <caption> Table 1 , Caption left < /caption >
  <tr>
    <td style="border: solid 2px blue" >
      Cell 1
    </td>
    <td style="border: solid 2px blue" >
      Cell 2
    </td>
  </tr >
</table>
<table style="border: solid 2px blue; caption-side: bottom ; width: 400px" >
  <caption> Table 2 , Caption bottom < /caption >
  <tr>
    <td style="border: solid 2px blue" >
      Cell 1
    </td >
    <td style="border: solid 2px blue" >
      Cell 2
    </td>
  </tr>
</table>

<table style="border: solid 2px blue; caption-side: top ; width: 400px" >
  <caption> Table 3 , Caption top < /caption >
  <tr>
    <td style="border: solid 2px blue" >
      Cell 1
    </td >
    <td style="border: solid 2px blue" >
      Cell 2
    </td>
  </tr>
</table>
</body>
</html>

پیش نمایش

خاصيت empty-cells

نام خاصيت	نوع خاصيت	شرح
empty-cells	show hide	مشخص می کند که آيا خانه های خالی جدول و خطوط حاشيه های آنها نمايش داده شود يا خير ، که دو حالت دارد : - show : خانه های خالی و خطوط حاشيه آنها نمايش داده می شود . - show : خانه های خالی و خطوط حاشيه آنها نمايش داده نمی شود ، که حالت پيش فرض است .

مثال : در مثال زير چند حالت های مختلف نمايش خانه های خالی را بررسی کرده ايم . در جدول اول خانه های خالی نمايش داده شده و در جدول دوم نمايش داده نشده است . ستون دوم جدول های زير خالی است که با رنگ سبز نمايش داده شده است .
اشاره : متاسفانه بين مرورگرهای مختلف در نمايش بسياری از تگ ها و خواص HTML و CSS اختلاف وجود دارد و بعضی از آنها از برخی از خواص پشتيبانی درستی نمی کنند . برای مثال می توانيد ، صفحات همين سايت را در 3 مرورگر مطرح Internet Explorer , FireFox و Opera مشاهده کنيد تا به اختلافات پی ببريد .

پیش نمایش

خاصيت table-layout

نام خاصيت

نوع خاصيت

شرح

table-layout

auto
fixed

الگوريتم نمايش جدول را تعيين می کند . به طور کلی 2 الگوريتم برای طراحی جدول داريم :
- الگوريتم نمايش اتوماتيک auto :

در الگوريتم اتوماتيک ، عرض ستون های جدول بر حسب محتويات درونی آنها تنظيم می شود .
الگوريتم اتوماتيک به دليل اينکه ابتدا نياز دارد تا کليه محتويات جدول ها را لود کند ، بنابراين در نمايش جدول ها کمی کند عمل می کند .

- الگوريتم نمايش ثابت 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