آموزش CSSآموزش طراحی سایت

استایل Tables در CSS

با سلام .در پی آموزش های پیشین استایل css بدون مقدمه آموزش استایل جداول در سی اس اس را شروع میکنیم ،تا به یک جمع بندی در مبحث استایل عناصر در سی اس اس برسیم.

 

استایل عناصر در CSS

 

جدول در CSS

 

در ادامه آموزش css به ظاهر جداول می‌پردازیم، ظاهر یک جدول HTML را می‌توان به کمک CSS به شکل قابل توجهی بهبود بخشید. برای مثال جدول زیر رادر نظر بگیرید.

Country Contact Company
Germany Maria Anders Alfreds Futterkiste
Sweden Christina Berglund Berglunds snabbköp
 Mexico  Francisco Chang  Centro comercial Moctezuma
 Austria  Roland Mendel  Ernst Handel
 UK  Helen Bennett  Island Trading
 Germany Philip Cramer  Königlich Essen
 Canada  Yoshi Tannamuri  Laughing Bacchus Winecellars
 Italy  Giovanni Rovelli  Magazzini Alimentari Riuniti
 UK  Simon Crowther  North/South

 

 

 

جهت مشخص کردن حاشیه ی ( border )جداول در CSS ، کافی است از خاصیت border استفاده کنید .مثال زیر یک حاشیه ی سیاه برای المان های <table> ، <th> و <td> مشخص می کند

table,th,td {

border: 1px solid black;

}

 

توجه داشته باشید که جدول مورد نظر در مثال فوق دارای دو حاشیه است . این امر به این خاطر است کهجدول و المان های <th> و <td> حاشیه های مجزا دارند .
به منظور نمایش تنها یک حاشیه برای جدول مربوطه، از خاصیت border-collapse استفاده کنید .

خاصیت border-collapse

خصوصیت نام برده تعیین می کند آیا حاشیه های جدول در قالب تنها یک خط ( border ) جمع شوند یا بهصورت مجزا و جداگانه تنظیم شوند

table {

border-collapse: collapse;

}

Table, th, td {

Border:1px solid black;

}

 

طول و عرض جدول

طول و عرض یک جدول به ترتیب با خاصیت های height و width مشخص می شود .

مثال زیر پهنای جدول را به % 100 و درازای المان های < th> را 50px قرار می دهد

table, td, th{

border: 1px solid black;

}

table{

width: 100%;

}

th{

height: 50px;

}

تراز بندی متن به صورت افقی (Horizontal text alignment )

خاصیت text-align ترازبندی متن را تنظیم می کند(آن را راست چین، چپ چین، وسط چین) می کند .به صورت پیش فرض، نوشته ی موجود در المان های <th> وسط چین هستند و متن موجود در المان های <td>چپ چین هستند .
مثال ذیل نوشته ی موجود در المان های <th> چپ چین می کند.

 

 

th {

text-align: left;

}

ترازبندی عمودی متن ( vertical text alignment )

 

خاصیت vertical-align ، ترازبندی را به صورت عمودی تنظیم می کند، به عبارتی دیگر جای دهی متن در بالا،پایین و وسط درون جدول .

به صورت پیش فرض، در ترازبندی عمودی، نوشته در وسط جدول قرار می گیرد (برای هر دو المان های <th> و<td> . )

مثال ذیل نوشته را با خاصیت vertical-align برای المان های <td> در پایین جدول قرار می دهد

td {

height: 50px;

vertical-align: bottom;

}

استفاده از خاصیت padding در جدول

جهت کنترل فاصله ی بین حاشیه و محتوای یک جدول، لازم است خاصیت padding را روی المان های <td> و<th> اعمال کنید.

td {

padding: 15px;

}

تنظیم رنگ جدول

مثال زیر رنگ حاشیه ها، متن و پس زمینه ی المان های <th> را تعیین می کند

table, td, th {

border: 1px solid green;

}

th {

background-color: green;

color: white;

}

آموزش Box در CSS

تمامی عناصر HTML را می توان box در نظر گرفت. در CSS ، عبارت ” Box Model ” هنگام صحبت در موردdesign و layout استفاده می شود.

CSS Box Model ، الزاما یک box است که دور عناصر HTML را می گیرد، و تشکیل شده است از حاشیه ها،قاب ها border) ، padding )، و محتوای واقعی.

box model ، به ما اجازه می دهد قابی را اطراف عناصر و فضای عناصر در رابطه با عناصر دیگر قرار دهیم.تصویر زیر، box model را تشریح می کند

استایلcss
استایل css

 

توضیح بخش های مختلف

  • margin نواحی اطراف border را پاک می کند. margin رنگ پیش زمینه ندارد، و کاملا شفاف است
  • order یک border اطراف padding و content را می پوشاند. border ، از رنگ پیش زمینه boxتاثیر می گیرد
  • padding نواحی اطراف content را پاک می کند. padding از رنگ پیش زمینه box تاثیر می گیرد
  • content محتوای box ، یعنی جایی که متن و تصاویر ظاهر می شوند

به منظور تنظیم صحیح پهنا و ارتفاع عنصر در همه مرورگرها، باید بدانید box model چگونه کار می کند.

 

پهنا و ارتفاع عنصر

نکته مهم هنگامی که خصیصه پهنا و ارتفاع عنصر را با CSS تعیین می کنید، فقط پهنا و ارتفاع ناحیه contentرا تعیین می کنید. به منظور درک اندازه عنصر، همچنین باید padding ، border ، و margin را نیز اضافه کنید.
کل پهنای عنصر در مثال زیر، 300px است

Width:250px;
Padding:10px;
Border:5px solid gray;
Margin:10px;

 

بیایید محاسبه ریاضی اش را هم انجام دهیم.

250px (پهنا)
+ 20px (چپ و راست padding )
+ 10px(چپ و راست border )
+ 20px (چپ و راست margin )
= 300px

 

تصور کنید فقط 250px فضا دارید. بیایید عنصری با پهنای کل بسازیم

Width:220px;
Padding:10px;
Border:5px solid gray;
Margin:0px;

 

کل پهنای عنصر همیشه باید بصورت زیر برگزار شود

کل پهنای عنصر = پهنا + padding چپ + padding راست + border چپ + border راست + margin چپ +margin راست

کل ارتفاع عنصر نیز باید بصورا زیر محاسبه شود

کل ارتفاع عنصر = ارتفاع + padding بالا + padding پایین + border بالا + border پایین + margin بالا +margin پایین

 

مبحث سازگاری مرورگرها

 

اگر مثال قبلی را در Internet Explorer امتحان کرده باشید، دیده اید که کل ارتفاع دقیقا px 111 نبود.
IE ، هنگام تعیین پراپرتی پهنا، padding و border را در پهنا محاسبه می کند، مگر اینکه یک DOCTYPEتعریف شود.برای حل این مشکل، کافیست یک DOCTYPE به کد اضافه کنید

<!DOCTYPE html>

<html lang="en" xmlns="http//www.w3.org/1999/xhtml">
<html>
<head>
<style type="text/css">
div.ex {
width: 220px;
padding: 10px;
border :5px solid gray;
margin: 0px;
}
</style>
</head>

 

خب تا به اینجای آموزش سی اس اس،استایل عناصر در CSS به صورت کامل مورد بررسی قرار گرفت. در بخش بعدی وارد فصل تازه ای از آموزش میشویم و باساختار و لایه بندی باکس ها در سی اس اس آشنا میشویم. توجه داشته باشید که اگر با مبحث html آشنایی ندارید حتما مقالات مربوط به آموزش html سایت میزفا را مطالعه نمایید. با ما همراه باشید.

 

برچسب ها

نوشته های مشابه

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

همچنین ببینید

بستن
دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر