دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش CSS » خاصیت Display و استایل دادن به جدول ( Table ) در فیلم آموزش CSS
خاصیت Display و استایل دادن به جدول ( Table ) در فیلم آموزش CSS

خاصیت Display و استایل دادن به جدول ( Table ) در فیلم آموزش CSS

در این قسمت از فیلم آموزش CSS ، خاصیت display و نحوه استایل دادن به table ( جدول ) آموزش داده شده است هم چنین نحوه مخفی کردن عنصر در CSS را نیز آموزش داده ایم .

استایل دادن به Table

برای استایل دادن به جدول باید اول جدول خودمون رو درست کنیم ، برای دانلود آموزش استفاده ار جدول در HTML کلیک کنید . به صورت سورس کد زیر در HTML جدول خودمون رو می سازیم : 

سورس کد HTML رو می تونید از اینجا بردارید و توضیحات اون رو می تونید در فیلم آموزشی بالا مشاهده کنید . 

سورس کد CSS : 

نکته مهمی که باید به اون دقت کنید این است که برای استایل دادن به صورت هم زمان به چندین تگ یا کلاس باید اون هارو با استفاه از کاما ( , ) از هم جدا کنید . 

خاصیت Display در CSS

اول ببینیم Display یعنی چی ؟؟؟ Display به معنی نمایش دادن است . Display در برای تنظیم نحوه نمایش عناصر کاربرد دارد که مقادیر مختلفی را نیز می پذیرد مانند : block ، table ،  inline-block ، none و …

همان طور که در HTML هم گفته ام عناصر یا به صورت inline level هستند یا به صورت block level هستند ، حالا ما می تونیم با استفاده از خاصیت display نحوه نمایش این عناصر رو عوض کنیم .

display : block

مثلاً تگ Span چون به صورت خطی هستند حالا با استفاده از دستور Display می تونیم  اون رو به صورت block level در بیاوریم .

display : inline

inline باعث می شود عناصر ما در یک خط باشند .

dispaly: table 

از این مقدار برای درست کردن جدول بدون استفاده از table استفاده می شود ، در واقع عنصری که خاصیت display: table را دارد به صورت یک جدول نشان داده می شود و عناصر درونی آن به صورت سطر ها و ستون ها استفاده می شوند . 

مخفی کردن عنصر در CSS

برای مخفی کردن عنصر می توانید مقدار display رو برابر none قرار بدید ، با این کار عنصر مورد نظر حذف می شود . اگر سورس کد های زیر را انجام دهید و بر روی اولی کلیک کنید این موضوع را بهتر خواهید فهمید : 

سورس کد HTML :

سورس کد CSS : 

حالا برای پنهان کردن عنصر می توانید از visibility: hidden استفاده کنید . فرقی که این روش با روش بالا دارد در این است که عنصر حذف نمی شود بلکه پنهان می شود و فضای خود را حفظ می کند :

سورس کد CSS : 

اگر کد بالا را اجرا کنید این موضوع را بهتر درک خواهید کرد .

فیلم آموزش CSS را می توانید از لینک زیر دانلود کنید

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

عاشق برنامه نویسی

نظرات کاربران :



جواب سوال چیه ؟ *